Dynamical Y in graph projection;Integration brushup;Mockpare better positioning;

Author: neokrept

src/components/stake/StakeGraphPage.vue

@@ -101,7 +101,7 @@ import RewardTooltip from './tooltips/RewardTooltip.vue';
 
 import { i18n } from '../../i18n/i18n-setup';
 
-import { CryptoCurrency, NIM_DECIMALS } from '../../lib/Constants';
+import { CryptoCurrency, NIM_DECIMALS, NIM_MAGNITUDE } from '../../lib/Constants';
 import { calculateDisplayedDecimals } from '../../lib/NumberFormatting';
 
 export default defineComponent({
@@ -129,13 +129,19 @@ export default defineComponent({
             }
         };
 
+        const mockStakedAlready = () => {
+            validator.stakeAge = 60 * 60 * 24 * 110;
+            validator.stakeSessionRewards = 450 * NIM_MAGNITUDE;
+        };
+
         const performStaking = () => {
             validator.stakedAmount = currentStake.amount;
             if (currentStake.amount < preStaked.value) {
                 validator.unstakePending = true;
             } else if (currentStake.amount > preStaked.value) {
                 validator.stakePending = true;
             }
+            mockStakedAlready();
             context.emit('next');
         };
 

src/components/stake/graph/plugins/StakingGraphPointsPlugin.ts

@@ -41,18 +41,20 @@ const plugin = {
 
         ctx.strokeStyle = 'rgba(33, 188, 165, 1.0)';
 
+        const yRange = args.meta._scaleRanges.ymax - args.meta._scaleRanges.ymin;
+
         for (let i = 0; i < args.meta._dataset.data.length; i++) {
             const point = args.meta._dataset.data[i];
             if (point) {
-                const { x, y } = (point.y === 0) ? { x: 0, y: 0 } : points[i - 1];
+                const y = (152 - 16) - ((point.y - args.meta._scaleRanges.ymin) / yRange) * 152;
+                const x = (point.y === 0) ? 0 : points[i - 1].x;
 
                 const label = args.meta.data[i].$context.element.options.pointStyle;
                 if (label.length > 0) {
                     drawRoundedRectBox(ctx, label, x, y);
                 }
             }
         }
-        // ctx.scale(0.5, 0.5);
         ctx.restore();
     },
 };

src/components/widgets/Mockpare.vue

@@ -1,6 +1,6 @@
 <template>
     <span>
-        <select v-model="screenName">
+        <select v-model="screenName" @change="screenChange()" >
             <option v-for="screen in screens" :key="screen">
                 {{ screen }}
             </option>
@@ -92,26 +92,37 @@ export default defineComponent({
             }
         };
 
+        const fitCenter = (img:HTMLImageElement) => {
+            offsetX = (window.innerWidth - img.width) / 2.0;
+            offsetY = (window.innerHeight - img.height) / 2.0;
+        };
+
         const fitToScreenW = () => {
             const el = document.getElementById(mockContainerID) as HTMLImageElement;
             if (!el.style.width) {
                 el.style.width = `${window.innerWidth}px`;
+                offsetX = 0;
+                offsetY = 0;
             } else {
                 el.style.width = '';
+                fitCenter(el);
             }
-            el.style.top = '0';
-            el.style.left = '0';
+            el.style.top = `${offsetY}px`;
+            el.style.left = `${offsetX}px`;
         };
 
         const fitToScreenH = () => {
             const el = document.getElementById(mockContainerID) as HTMLImageElement;
             if (!el.style.height) {
                 el.style.height = `${window.innerHeight}px`;
+                offsetX = 0;
+                offsetY = 0;
             } else {
                 el.style.height = '';
+                fitCenter(el);
             }
-            el.style.top = '0';
-            el.style.left = '0';
+            el.style.top = `${offsetY}px`;
+            el.style.left = `${offsetX}px`;
         };
 
         const adjustOpacity = (adjustment = 0.1) => {
@@ -127,6 +138,10 @@ export default defineComponent({
             el.style.left = `${offsetX}px`;
         };
 
+        const screenChange = () => {
+            updateSource();
+        };
+
         const keyboardControl = (e:KeyboardEvent) => {
             if (e.key === 'M') {
                 toggleMock();
@@ -165,8 +180,9 @@ export default defineComponent({
             document.body.style.overflow = 'hidden';
             const imgNode = document.createElement('IMG') as HTMLImageElement;
             imgNode.onload = () => {
-                imgNode.style.top = `${(window.innerHeight - imgNode.height) / 2.0}px`;
-                imgNode.style.left = `${(window.innerWidth - imgNode.width) / 2.0}px`;
+                fitCenter(imgNode);
+                imgNode.style.top = `${offsetY.toFixed(2)}px`;
+                imgNode.style.left = `${offsetX.toFixed(2)}px`;
             };
             imgNode.style.pointerEvents = 'none';
             imgNode.style.display = 'none';
@@ -187,6 +203,7 @@ export default defineComponent({
             screens,
             $screens,
             screenName,
+            screenChange,
             toggleMock,
         };
     },

src/stores/Staking.ts

@@ -19,6 +19,8 @@ export type ValidatorData = {
     dominance: number | 0,
     stakedAmount: number | 0,
     unclaimedReward: number | 0,
+    stakeAge: number | 0, // in seconds
+    stakeSessionRewards: number | 0,
     stakePending: boolean | false,
     unstakePending: boolean | false,
 }