Remove all chart

lab5e · Apr 11, 2023 · 48c0262 · 48c0262
1 parent acf3f1e
commit 48c0262
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 105 deletions.
diff --git a/frontend/src/app/device-overview/device-overview.component.css b/frontend/src/app/device-overview/device-overview.component.css
@@ -1,17 +1,12 @@
 .overview-page {
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr;
     grid-template-rows: 1fr 1fr;
     grid-row-gap: 10px;
     grid-column-gap: 10px;
     height: 100%;
 }
 
-.main-chart {
-    grid-column: span 2;
-    padding: 1em;
-}
-
 .cell-chart {
     padding: 1em;
     border: solid 1px silver;
@@ -30,4 +25,6 @@
     width: 100%;
 }
 
-.allmap {}
+.allmap {
+    width: 100%;
+}
diff --git a/frontend/src/app/device-overview/device-overview.component.html b/frontend/src/app/device-overview/device-overview.component.html
@@ -1,11 +1,4 @@
 <div class="overview-page">
-    <div class="main-chart">
-        <div class="all-chart">
-            <h2>Totalt for alle enheter</h2>
-            <div #allchart id="allchart" class="allchart"></div>
-            <div class="update">Sist oppdatert {{ samples.lastDataUpdate |date:'YYYY-MM-dd HH:mm'}}</div>
-        </div>
-    </div>
     <div class="cell-chart">
         <h2>Per enhet</h2>
         <div #chart id="chart" class="chart"></div>

diff --git a/frontend/src/app/device-overview/device-overview.component.ts b/frontend/src/app/device-overview/device-overview.component.ts
@@ -24,9 +24,6 @@ export class DeviceOverviewComponent implements OnInit, AfterViewInit, OnDestroy
     @ViewChild("legend") legendRef?: ElementRef;
     legend?: (SVGElement | HTMLElement);
 
-    @ViewChild("allchart") allChartRef?: ElementRef;
-    allChart?: (SVGElement | HTMLElement);
-
     data: DeviceSample[] = [];
     constructor(
         protected samples: SampleService,
@@ -54,10 +51,6 @@ export class DeviceOverviewComponent implements OnInit, AfterViewInit, OnDestroy
             // Remove the old one if it already exists
             this.renderer.removeChild(this.chartRef?.nativeElement, this.chart, false);
         }
-        if (this.allChart) {
-            // Remove the old one if it already exists
-            this.renderer.removeChild(this.allChartRef?.nativeElement, this.allChart, false);
-        }
         if (this.legend) {
             this.renderer.removeChild(this.legendRef?.nativeElement, this.legend, false);
         }
@@ -67,10 +60,6 @@ export class DeviceOverviewComponent implements OnInit, AfterViewInit, OnDestroy
             // Remove the old one if it already exists
             this.renderer.removeChild(this.chartRef?.nativeElement, this.chart, false);
         }
-        if (this.allChart) {
-            // Remove the old one if it already exists
-            this.renderer.removeChild(this.allChartRef?.nativeElement, this.allChart, false);
-        }
 
         let width = this.chartRef?.nativeElement.offsetWidth;
         let max = (d3.max(this.data, (d: DeviceSample) => (d.ble + d.wifi)) || 1);
@@ -130,85 +119,5 @@ export class DeviceOverviewComponent implements OnInit, AfterViewInit, OnDestroy
             },)
             this.renderer.appendChild(this.legendRef?.nativeElement, this.legend)
         }
-
-        // Add chart for ALL THE THINGS. Rearrange the samples to make charting easier. Add a separate sample for 
-        // each value.
-
-        const mmFormat = d3.timeFormat("%d %H:00")
-
-        let sortedSamples = this.getFlattenedSamples();
-        let startDate = d3.min(this.data, (d: DeviceSample) => d.time);
-        let endDate = d3.max(this.data, (d: DeviceSample) => d.time)
-
-        let allWidth = this.allChartRef?.nativeElement.offsetWidth;
-        this.allChart = Plot.plot({
-            width: allWidth,
-            margin: 50,
-            inset: 5,
-            y: {
-                grid: true,
-                label: "Antall"
-            },
-            x: {
-                label: "Klokkeslett",
-                grid: true,
-                tickFormat: d3.timeFormat("%H:%M"),
-                domain: [startDate, endDate]
-            },
-            marks: [
-                Plot.line(
-                    sortedSamples,
-                    Plot.windowY(
-                        { reduce: "sum", k: 180, anchor: "middle" },
-                        {
-                            x: "time",
-                            y: "count",
-                            stroke: "type",
-                            strokeWidth: 2,
-                            opacity: 0.8,
-                        }
-                    )
-                ),
-                Plot.frame(),
-            ],
-            color: {
-                legend: false,
-                domain: ["wifi", "ble"],
-                range: ["red", "blue"]
-            },
-            style: {
-                fontFamily: 'sans-serif',
-                fontSize: '10pt',
-                background: '#eeeeee',
-                fill: '#808080',
-            }
-        });
-        this.renderer.appendChild(this.allChartRef?.nativeElement, this.allChart)
-    }
-
-    // Return a sorted list with flat samples for all the data
-    getFlattenedSamples(): FlatSample[] {
-        let ret: FlatSample[] = this.data.map((d: DeviceSample) => {
-            let r: FlatSample = {
-                id: d.id,
-                name: d.name,
-                time: d.time,
-                count: d.ble,
-                type: "ble",
-            };
-            return r;
-        }).concat(
-            this.data.map((d: DeviceSample) => {
-                let r: FlatSample = {
-                    id: d.id,
-                    name: d.name,
-                    time: d.time,
-                    count: d.wifi,
-                    type: "wifi",
-                };
-                return r;
-            }
-            ));
-        return d3.sort(ret, (a: FlatSample, b: FlatSample) => a.time.getTime() - b.time.getTime());
     }
 }