Udpate readme and API for colors

README.md

-# skypatterns
+# Skypattern Visualisation
 
-## Project setup
+## Requirements
 
-```
-npm install
-```
+- Java v12 or greater
+- NodeJS v14 or greater (for build or server deployement, included in the .exe)
 
-### Compiles and hot-reloads for development
+## Run project locally
 
 ```
-npm run serve
+npm install # Fetch dependancies
 ```
 
-### Compiles and minifies for production
+### Run with source code
+
+Webapp (from the project root)
 
 ```
-npm run build
+npm run serve # Compiles and hot-reloads for development
+
+or
+
+npm run build # Compiles and hot-reloads for development
 ```
 
-### Compiles electron app for development
+Api (from project root/src/api)
 
 ```
-npm run electron:serve
+node index.js
 ```
 
-### Compiles electron app for production
+## Run as desktop application
+
+Install the compiled Electron app as and .exe or compile it yourself
+
+### Install the compiled app
+
+TODO LINK
+
+### Compile the Electron app
 
 ```
-npm run electron:build
+npm install # Fetch dependancies
+
+then
+
+npm run electron:serve # Compiles electron app for development
+
+or
+
+npm run electron:build # Compiles electron app for production
 ```
 
-### Lints and fixes files
+## Project files
+
+### Source code
+
+Webapp
 
 ```
-npm run lint
+.
+├───dist_electron       # Electron build
+├───node modules        # Installed dependancies
+├───public              # Global ressources
+├───src
+│   ├───api             # See [Api] below
+│   ├───assets          # Project ressources
+│   ├───plugins
+│   ├───components      # |
+│   ├───router          # |
+│   ├───services        # | Webapp code
+│   ├───store           # |
+│   └───views           # |
 ```
 
-### Lints and fixes files
+Api
 
 ```
-npm run lint
+api
+├───data
+│   ├─── status.json # Projects infos
+│   └─── colors.json # Colors for the graphs display
+├───datasets         # Input datasets
+├───results          # Outputs from skypattern.jar
+├───routes           # Api code
+├───index.js         # Entry point (run with: node index.js)
+├───skyppatern.jar   # Data mining program
 ```
 
-### Customize configuration
+### Compiled app
 
-See [Configuration Reference](https://cli.vuejs.org/config/).
+```
+.
+├───locales
+├───ressources
+│   └─── api        # See [Api] above
+├───skypattern.exe  # App launcher
+```

src/api/data/colors.json

+[
+  "rgba(120, 120, 230, 0.3)",
+  "rgba(255, 0, 0, 0.3)",
+  "rgba(50, 190, 50, 0.3)",
+  "rgba(186, 220, 88, 0.6)",
+  "rgba(104, 109, 224, 0.6)",
+  "rgba(48, 51, 107, 0.6)",
+  "rgba(126, 214, 223, 0.6)",
+  "rgba(249, 202, 36, 0.6)",
+  "rgba(235, 77, 75, 0.6)",
+  "rgba(223, 249, 251, 0.6)"
+]

src/api/routes/colors.js

+const colors = function (app, fs) {
+  const file = require('./file.js')
+  const pathColors = __dirname + '/../data/colors.json'
+
+  app.get('/colors', (req, res) => {
+    file.readFile(
+      fs,
+      function (data) {
+        res.send(data)
+      },
+      true,
+      pathColors,
+    )
+  })
+}
+
+module.exports = colors

src/api/routes/routes.js

@@ -4,6 +4,7 @@ const appRouter = function (app, fs, port) {
   const statusRoutes = require('./status.js')
   const resultsRoutes = require('./results.js')
   const datasetsRoutes = require('./datasets.js')
+  const colorsRoutes = require('./colors.js')
 
   // Root
   app.get('/', (req, res) => {
@@ -22,6 +23,7 @@ const appRouter = function (app, fs, port) {
   statusRoutes(app, fs)
   resultsRoutes(app, fs)
   datasetsRoutes(app, fs)
+  colorsRoutes(app, fs)
 }
 
 module.exports = appRouter

src/views/Visualisation.vue

@@ -2,9 +2,21 @@
   <SplitPane :side="50" :onResize="onResize">
     <template v-slot:left>
       <div class="table-container">
-        <v-container fluid class="px-6 py-0" height="50px"><v-switch v-model="multiple" :label="multiple ? `Multiple` : `Simple`"></v-switch></v-container>
+        <v-container fluid class="px-6 py-0" height="50px">
+          <v-switch v-model="multiple" :label="`${multiple ? `Multiple` : `Simple`} - Displayed ${displayed} / ${max_displayed} Max`"></v-switch>
+        </v-container>
         <v-system-bar window dark color="blue darken-3" height="30">{{ data.title }}</v-system-bar>
-        <v-data-table fill-height :headers="getHeaders()" :items="data.datasets" v-model="selected" item-key="label" class="select-table" height="calc(100vh - 260px)" show-select>
+        <v-data-table
+          fill-height
+          :headers="getHeaders()"
+          :footer-props="{ itemsPerPageOptions: [10, 20, 30, 100] }"
+          :items="data.datasets"
+          v-model="selected"
+          item-key="label"
+          class="select-table"
+          height="calc(100vh - 260px)"
+          show-select
+        >
           <template v-slot:item="{ item, isSelected, select }">
             <tr :class="isSelected ? 'selected-row' : ''" @click="select(!isSelected)">
               <td><v-checkbox v-model="selected" :value="item" @click.native="select(!isSelected)" style="margin: 0px; padding: 0px" hide-details /></td>
@@ -28,19 +40,6 @@ import SplitPane from '@/components/SplitPane.vue'
 import RadarChart from '@/components/RadarChart.vue'
 import ApiSkyppattern from '@/services/http/api-skypattern'
 
-const colors = [
-  'rgba(120, 120, 230, 0.3)', // bleu
-  'rgba(255, 0, 0, 0.3)', // jaune
-  'rgba(50, 190, 50, 0.3)',
-  'rgba(186, 220, 88, 0.6)',
-  'rgba(104, 109, 224, 0.6)',
-  'rgba(48, 51, 107, 0.6)',
-  'rgba(126, 214, 223, 0.6)',
-  'rgba(249, 202, 36, 0.6)',
-  'rgba(235, 77, 75, 0.6)',
-  'rgba(223, 249, 251, 0.6)',
-]
-
 export default {
   name: 'Visualisation',
   components: { SplitPane, RadarChart },
@@ -48,11 +47,14 @@ export default {
     return {
       multiple: false,
       selected: [],
+      displayed: 0,
+      max_displayed: 50,
       data: {
         title: '',
         labels: [],
         datasets: [],
       },
+      colors: ['rgba(120, 120, 230, 0.3)', 'rgba(255, 0, 0, 0.3)', 'rgba(50, 190, 50, 0.3)'],
     }
   },
   methods: {
@@ -81,8 +83,11 @@ export default {
       })
     },
     getDatasets: function () {
-      const datasets = this.selected.map((e, i) => {
-        return { label: e.label || `Dataset ${i + 1}`, data: e.rdata, backgroundColor: colors[i % colors.length] } // Copie l'objet sans modifier l'original
+      const size = Math.min(this.max_displayed, this.selected.length)
+      this.displayed = size
+
+      const datasets = this.selected.slice(0, size).map((e, i) => {
+        return { label: e.label || `Dataset ${i + 1}`, data: e.rdata, backgroundColor: this.colors[i % this.colors.length] } // Copie l'objet sans modifier l'original
       })
 
       if (this.multiple) {
@@ -111,6 +116,12 @@ export default {
 
       console.log(this.data)
     })
+
+    ApiSkyppattern.get(`/colors`).then((response) => {
+      if (response.data) {
+        this.colors = response.data
+      }
+    })
   },
 }
 </script>