Skip to content
Snippets Groups Projects
Commit bf054321 authored by LHOUTELLIER Maël's avatar LHOUTELLIER Maël
Browse files

Udpate readme and API for colors

parent f53f13c1
No related branches found
No related tags found
No related merge requests found
# 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
```
[
"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)"
]
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
......@@ -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
......@@ -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>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment