@startuml web-app

skinparam linetype ortho
skinparam nodesep 50

class App {
' principale vuejs component

}

class ChartComponent {
' vue js component
    scatter

}

class ControlPanel {
' vue js component
    action-button
    refresh-button
    user-multiselect
    room-multiselect
    device-multiselect
}

class Client {
    +isconnected()
    +getValues(user, room, device)
    +getNewValue()
    -ping()
    -getAuthHeader()
}

class TimeSeriesManager {
' get data, put data in graphs, ask new measure
    +selected_user
    +selected_room
    +selected_device
    +series

    +getTimeSeriesData()
    +getNewValue()
}

class Serie {
' contains table of measure
' convert the table to graphs format
    -type
    -data
    -user
    -room
    -device

    +getLabel()
    +getSerie()

}


App *-r- TimeSeriesManager
App *-u- Client
App *-d- ChartComponent
App *-d- ControlPanel
TimeSeriesManager *---r--- Serie




@enduml