From 24cdeceda4a5deceb67a03a21882a8e9a92b6aab Mon Sep 17 00:00:00 2001
From: Yuqiu Wang <yuqiuw@indeed.com>
Date: Fri, 26 Feb 2021 11:18:53 -0500
Subject: [PATCH] add padding, percentage, and memory chart

---
 client/src/views/prometheusgraph.tsx | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/client/src/views/prometheusgraph.tsx b/client/src/views/prometheusgraph.tsx
index 49cbb9d..4dce78f 100644
--- a/client/src/views/prometheusgraph.tsx
+++ b/client/src/views/prometheusgraph.tsx
@@ -8,6 +8,7 @@ const isDev = process.env.NODE_ENV !== 'production';
 const BASE_HTTP_URL = isDev && hostname === 'localhost' ? 'http://localhost:57008' : '';
 const GRAPH_QUERIES = [
     'instance:node_cpu:ratio',
+    'instance:node_memory_utilisation:ratio',
 ];
 
 
@@ -56,14 +57,23 @@ export default class PrometheusGraph extends Base<Props, State> {
                     return <div>Pending...</div>;
                 }
                 return this.state.data.get(value)
-                    && <div>
+                    && <div style={{marginLeft: '36px'}}>
+                        <span>${value}</span>
                         <XYPlot
+                            yPadding={60}
                             width={600}
                             height={600}
                             xType="time">
                             <HorizontalGridLines />
                             <LineSeries
-                                data={this.state.data.get(value)}/>
+                                data={this.state.data.get(value)}
+                                onNearestXY={(datapoint) => {
+                                    return <div style={{background: 'black'}}>
+                                        {datapoint.x} <br/>
+                                        {datapoint.y}
+                                    </div>;
+                                }}
+                            />
                             <XAxis
                                 tickFormat={function tickFormat(d) {
                                     const date = new Date(d * 1000);
@@ -73,8 +83,10 @@ export default class PrometheusGraph extends Base<Props, State> {
                             />
                             <YAxis
                                 tickFormat={function tickFormet(d) {
-                                    return `${Math.round(d * 100)}%`;
+                                    return `${(d * 100).toFixed(2)}%`;
                                 }}
+                                tickLabelAngle={30}
+                                marginLeft={50}
                             />
                         </XYPlot>
                     </div>;