Overlay on top of graph

- Add at the top of the size graph the total size that has been used by the library
- Add a new control that can be reused (limited since only for size)
- Set the graph to be relative to allow overlay with relative position in CSS

.prettierrc

@@ -0,0 +1,5 @@
+{
+    "printWidth": 120,
+    "tabWidth": 4,
+    "jsxBracketSameLine": false
+}

devpanel/src/BusinessLogics/Logics.ts

@@ -1,4 +1,4 @@
-import { DataAction, DataSource, Message, MessageClient, Statistics, Threshold } from "./Model";
+import { DataAction, DataSource, getDividerSize, MemorySizesByType, Message, MessageClient, sizeConversation, Statistics, Threshold } from "./Model";
 
 export interface ILogics {
     extractPerformanceFromPayload(m: MessageClient): number;
@@ -7,6 +7,7 @@ export interface ILogics {
     extractSizeFromPayload(m: MessageClient): number;
     adjustStatistics(message: Message, currentStatistics: Statistics): Statistics;
     getMessageKey(message: MessageClient): string;
+    getDataWithBiggerUnit(statistics: Statistics): MemorySizesByType;
 }
 export class Logics implements ILogics {
     public extractPerformanceFromPayload(m: MessageClient): number {
@@ -217,4 +218,22 @@ export class Logics implements ILogics {
         ${encodeURI(message.payload.action)}_
         ${encodeURI(message.payload.source)}`;
     }
+
+    public getDataWithBiggerUnit(statistics: Statistics): MemorySizesByType {
+        let bigger = statistics.memoryBytes;
+        if (statistics.persistenceStorageBytes > bigger) {
+            bigger = statistics.persistenceStorageBytes;
+        }
+        if (statistics.httpBytes > bigger) {
+            bigger = statistics.httpBytes;
+        }
+        const biggerWithUnit = sizeConversation(bigger);
+        let divider = getDividerSize(biggerWithUnit);
+        return {
+            unit: biggerWithUnit.unit,
+            memory: statistics.memoryBytes / divider,
+            db: statistics.persistenceStorageBytes / divider,
+            http: statistics.httpBytes / divider
+        };
+    }
 }

devpanel/src/BusinessLogics/Model.ts

@@ -132,6 +132,13 @@ export interface Threshold {
     sign: Sign;
 }
 
+export interface MemorySizesByType {
+    memory: number;
+    db: number;
+    http: number;
+    unit: Unit;
+}
+
 export const CSS_TIME = "time";
 export const CSS_SOURCE = "source";
 export const CSS_ACTION = "action";

devpanel/src/Components/Graphs/Graph.tsx

@@ -3,27 +3,29 @@ import { Statistics } from "../../BusinessLogics/Model";
 import { GraphCountBySourceAndAction } from "./GraphCountBySourceAndAction";
 import { GraphPercentilePerformance } from "./GraphPercentilePerformance";
 import { GraphSizeBySource } from "./GraphSizeBySource";
+import { GraphSizeOverlay } from "./GraphSizeOverlay";
 export interface GraphProps {
     statistics: Statistics;
 }
 
 export class Graph extends React.Component<GraphProps> {
-
     public constructor(props: GraphProps) {
         super(props);
     }
     public render(): JSX.Element {
-
-        return <div className="Graph">
-            <div className="IndividualGraph">
-                <GraphCountBySourceAndAction statistics={this.props.statistics} />
-            </div>
-            <div className="IndividualGraph">
-                <GraphSizeBySource statistics={this.props.statistics} />
+        return (
+            <div className="Graph">
+                <div className="IndividualGraph">
+                    <GraphCountBySourceAndAction statistics={this.props.statistics} />
+                </div>
+                <div className="IndividualGraph">
+                    <GraphSizeOverlay statistics={this.props.statistics} />
+                    <GraphSizeBySource statistics={this.props.statistics} />
+                </div>
+                <div className="IndividualGraph">
+                    <GraphPercentilePerformance statistics={this.props.statistics} />
+                </div>
             </div>
-            <div className="IndividualGraph">
-                <GraphPercentilePerformance statistics={this.props.statistics} />
-            </div>
-        </div>;
+        );
     }
-}
+}

devpanel/src/Components/Graphs/GraphSizeBySource.tsx

@@ -1,15 +1,17 @@
 import * as chartjs from "chart.js";
 import * as React from "react";
 import { Bar, ChartData } from "react-chartjs-2";
-import { getDividerSize, sizeConversation, Statistics, Unit } from "../../BusinessLogics/Model";
+import { ILogics, Logics } from "../../BusinessLogics/Logics";
+import { Statistics } from "../../BusinessLogics/Model";
 import { BAR_HOVER_BACKGROUND_COLOR, BAR_HOVER_BORDER_COLOR, FONT_COLOR, FONT_SIZE, GRAPH_HEIGHT, GRAPH_WIDTH, HTTP_BACKGROUND_COLOR, MEMORY_BACKGROUND_COLOR, PERSISTENCE_BACKGROUND_COLOR } from "./Constants";
 export interface GraphSizeBySourceProps {
     statistics: Statistics;
 }
 export class GraphSizeBySource extends React.Component<GraphSizeBySourceProps> {
 
+    private logic: ILogics = new Logics();
     public render(): JSX.Element {
-        const unitWithData = this.getDataWithBiggerUnit();
+        const unitWithData = this.logic.getDataWithBiggerUnit(this.props.statistics);
         const unit = unitWithData.unit;
         const data: ChartData<chartjs.ChartData> = {
             labels: ["Mem " + unit, "DB " + unit, "Http " + unit],
@@ -85,21 +87,4 @@ export class GraphSizeBySource extends React.Component<GraphSizeBySourceProps> {
             }
         />;
     }
-    public getDataWithBiggerUnit(): { memory: number, db: number, http: number, unit: Unit } {
-        let bigger = this.props.statistics.memoryBytes;
-        if (this.props.statistics.persistenceStorageBytes > bigger) {
-            bigger = this.props.statistics.persistenceStorageBytes;
-        }
-        if (this.props.statistics.httpBytes > bigger) {
-            bigger = this.props.statistics.httpBytes;
-        }
-        const biggerWithUnit = sizeConversation(bigger);
-        let divider = getDividerSize(biggerWithUnit);
-        return {
-            unit: biggerWithUnit.unit,
-            memory: this.props.statistics.memoryBytes / divider,
-            db: this.props.statistics.persistenceStorageBytes / divider,
-            http: this.props.statistics.httpBytes / divider
-        };
-    }
 }

devpanel/src/Components/Graphs/GraphSizeOverlay.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import CountUp from "react-countup";
+import { sizeConversation, SizeUnit, Statistics } from "../../BusinessLogics/Model";
+export interface GraphSizeOverlayProps {
+    statistics: Statistics;
+}
+
+export interface GraphSizeOverlayState {
+    oldSize: SizeUnit;
+    newSize: SizeUnit;
+}
+export class GraphSizeOverlay extends React.Component<GraphSizeOverlayProps, GraphSizeOverlayState> {
+    public constructor(props: GraphSizeOverlayProps) {
+        super(props);
+        this.state = {
+            oldSize: {
+                size: 0,
+                unit: "B"
+            },
+            newSize: {
+                size: 0,
+                unit: "B"
+            }
+        };
+    }
+    public static getDerivedStateFromProps(
+        props: GraphSizeOverlayProps,
+        state: GraphSizeOverlayState
+    ): GraphSizeOverlayState {
+        const total =
+            props.statistics.httpBytes + props.statistics.memoryBytes + props.statistics.persistenceStorageBytes;
+        const sizeUnit = sizeConversation(total);
+        return {
+            oldSize: state.newSize,
+            newSize: sizeUnit
+        };
+    }
+    public render(): JSX.Element {
+        const total =
+            this.props.statistics.httpBytes +
+            this.props.statistics.memoryBytes +
+            this.props.statistics.persistenceStorageBytes;
+        const sizeUnit = sizeConversation(total);
+        return (
+            <div className="highlight-number-on-graph">
+                <span className="number">
+                    <CountUp start={this.state.oldSize.size.toFixed(0)} end={this.state.newSize.size.toFixed(0)} />
+                </span>
+                <span className="unit">{sizeUnit.unit}</span>
+            </div>
+        );
+    }
+}

devpanel/src/index.css

@@ -18,6 +18,7 @@ body {
 }
 
 .Graph .IndividualGraph{
+  position:relative; /*Allow to positionate with absolute the big number on top of canvas*/
   flex:1;
   margin: auto;
   padding: 10px;
@@ -29,6 +30,21 @@ body {
 .Graph .IndividualGraph canvas{
   margin: auto;
 }
+.Graph .IndividualGraph .highlight-number-on-graph {
+  position:absolute;
+  top: 10px;
+  right:10px;
+  color:#737c9a;
+}
+
+.Graph .IndividualGraph .highlight-number-on-graph .number {
+  font-size: 50px;
+  text-shadow: #b2b9ce 1px 1px 1px, #383c4a -1px -1px 1px;
+}
+.Graph .IndividualGraph .highlight-number-on-graph .unit {
+  font-size: 10px;
+}
+/****** CONSOLE *****/
 .ConsoleMessages {
   display:flex;
   flex-direction: column;
@@ -97,9 +113,6 @@ body {
 .ConsoleMessages ul li .row{
   display:flex;
   cursor: pointer;
-}
-.ConsoleMessages ul li .row.active-row{
-
 }
 .ConsoleMessagesLineDetails{
   padding:15px 5px 15px 5px;