Merge request widget redesign

1 files changed, 36 insertions, 0 deletions

diff --git a/app/assets/javascripts/vue_shared/components/memory_graph.js b/app/assets/javascripts/vue_shared/components/memory_graph.js
new file mode 100644
index 00000000000..2a605b24339
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/memory_graph.js
@@ -0,0 +1,36 @@
+export default {
+  name: 'MemoryGraph',
+  props: {
+    metrics: { type: Array, required: true },
+    width: { type: String, required: true },
+    height: { type: String, required: true },
+  },
+  data() {
+    return {
+      pathD: '',
+      pathViewBox: '',
+      // dotX: '',
+      // dotY: '',
+    };
+  },
+  mounted() {
+    const renderData = this.$props.metrics.map(v => v[1]);
+    const maxMemory = Math.max.apply(null, renderData);
+    const minMemory = Math.min.apply(null, renderData);
+    const diff = maxMemory - minMemory;
+    // const cx = 0;
+    // const cy = 0;
+    const lineWidth = renderData.length;
+    const linePath = renderData.map((y, x) => `${x} ${maxMemory - y}`);
+    this.pathD = `M ${linePath}`;
+    this.pathViewBox = `0 0 ${lineWidth} ${diff}`;
+  },
+  template: `
+    <div class="memory-graph-container">
+      <svg :width="width" :height="height" xmlns="http://www.w3.org/2000/svg">
+        <path :d="pathD" :viewBox="pathViewBox" />
+        <!--<circle r="0.8" :cx="dotX" :cy="dotY" tranform="translate(0 -1)" /> -->
+      </svg>
+    </div>
+  `,
+};