Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Dashboard date range picker #21

Draft
wants to merge 6 commits into
base: main
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 49 additions & 0 deletions shedpi_hub_dashboard/static/shedpi_hub_dashboard/css/landing.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
.bi {
display: inline-block;
width: 1rem;
height: 1rem;
}

/*
* Sidebar
*/

@media (min-width: 768px) {
.sidebar .offcanvas-lg {
position: -webkit-sticky;
position: sticky;
top: 48px;
}

.navbar-search {
display: block;
}
}

.sidebar .nav-link {
font-size: .875rem;
font-weight: 500;
}

.sidebar .nav-link.active {
color: #2470dc;
}

.sidebar-heading {
font-size: .75rem;
}

/*
* Navbar
*/

.navbar-brand {
padding-top: .75rem;
padding-bottom: .75rem;
background-color: rgba(0, 0, 0, .25);
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}

.navbar .form-control {
padding: .75rem 1rem;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
import {LineChart} from "./modules/chart.js";

const widgetTypeLineChart = "lineChart"

class Widget {
constructor(config) {
this.config = config
const container = document.getElementById(this.config.id);

this.chart;
if (this.config.chartType == widgetTypeLineChart) {
this.chart = new LineChart(container)
}
}

async getDeviceData() {
let data;
const urlDeviceModule = "/api/v1/device-module/" + this.config.deviceModuleId
let endpointDeviceModule = new Request(urlDeviceModule);

await fetch(endpointDeviceModule)
.then((response) => {
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}

return response.json();
})
.then((response) => {
data = response

return response
});
return data
}

async getDeviceReadings() {
let data;

// const url = section.getAttribute("data-json-feed")
const url = window.location.origin + "/api/v1/device-module-readings/"
const endpoint = new URL(url);
endpoint.searchParams.append("device_module", this.config.deviceModuleId);
endpoint.searchParams.append("format", "json");
endpoint.searchParams.append("start", this.config.startDate);
endpoint.searchParams.append("end", this.config.endDate);

let endpointDeviceModuleReading = new Request(endpoint);

await fetch(endpointDeviceModuleReading)
.then((response) => {
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}

return response.json();
})
.then((response) => {
data = response

return response
});
return data
}

async render() {
const deviceData = await this.getDeviceData()
const deviceReadings = await this.getDeviceReadings()

this.chart.draw(deviceReadings, deviceData.schema)
}
}


// TODO: DB Entry that controls this config, the page will then spit them out onto the page via backend,
// we then loop through each class with config embedded
const widgetConfigs = [
{
"id": "chartContainer1",
"chartType": widgetTypeLineChart,
"deviceModuleId": "c2f30e74-4708-4dff-9347-466563e353c8",
"startDate": "2024-01-25",
"endDate": "2024-02-24"
},
{
"id": "chartContainer2",
"chartType": widgetTypeLineChart,
"deviceModuleId": "a62408c2-bc89-48e2-8c23-9494bbf33cb7",
"startDate": "2024-01-25",
"endDate": "2024-02-24"
}
];

widgetConfigs.forEach((widgetConfig) => {
const widget = new Widget(widgetConfig)
widget.render()
});
179 changes: 0 additions & 179 deletions shedpi_hub_dashboard/static/shedpi_hub_dashboard/js/index.js

This file was deleted.

Loading
Loading