chore: 🔧 bars on channel view

apotdevin · Jun 23, 2020 · 7b970e5 · 7b970e5
1 parent fbcd483
commit 7b970e5
Show file tree

Hide file tree

Showing 8 changed files with 152 additions and 53 deletions.
diff --git a/src/components/balance/index.tsx b/src/components/balance/index.tsx
@@ -0,0 +1,67 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { ProgressBar } from '../generic/CardGeneric';
+
+const BalanceLine = styled.div`
+  width: 100%;
+  display: flex;
+  position: relative;
+`;
+
+const ValueBox = styled.div`
+  position: absolute;
+  font-size: 14px;
+  padding: 0 8px;
+  font-weight: bolder;
+`;
+
+const Value = styled(ValueBox)`
+  right: 50%;
+  text-align: right;
+`;
+
+const RightValue = styled(ValueBox)`
+  left: 50%;
+  text-align: left;
+`;
+
+type BalanceProps = {
+  local: number;
+  remote: number;
+  formatLocal?: string;
+  formatRemote?: string;
+};
+
+export const BalanceBars = ({
+  local,
+  remote,
+  formatLocal,
+  formatRemote,
+}: BalanceProps) => {
+  const localOpposite = 100 - local;
+  const remoteOpposite = 100 - remote;
+
+  const hasLocal =
+    formatLocal &&
+    formatLocal !== '0' &&
+    formatLocal !== '0.0' &&
+    formatLocal !== '0.00';
+  const hasRemote =
+    formatRemote &&
+    formatRemote !== '0' &&
+    formatRemote !== '0.0' &&
+    formatRemote !== '0.00';
+
+  return (
+    <>
+      <BalanceLine>
+        {hasLocal && <Value>{formatLocal}</Value>}
+        {hasRemote && <RightValue>{formatRemote}</RightValue>}
+        <ProgressBar barHeight={20} order={4} percent={localOpposite} />
+        <ProgressBar barHeight={20} order={1} percent={local} />
+        <ProgressBar barHeight={20} order={2} percent={remote} />
+        <ProgressBar barHeight={20} order={4} percent={remoteOpposite} />
+      </BalanceLine>
+    </>
+  );
+};
diff --git a/src/components/generic/CardGeneric.tsx b/src/components/generic/CardGeneric.tsx
@@ -15,10 +15,11 @@ export const Progress = styled.div`
 interface ProgressBar {
   percent: number;
   order?: number;
+  barHeight?: number;
 }
 
 export const ProgressBar = styled.div<ProgressBar>`
-  height: 10px;
+  height: ${({ barHeight }) => (barHeight ? `${barHeight}px` : '10px')};
   background-color: ${({ order }) => {
     switch (order) {
       case 1:

diff --git a/src/components/price/Price.tsx b/src/components/price/Price.tsx
@@ -51,6 +51,7 @@ interface GetPriceProps {
   amount: number | string;
   breakNumber?: boolean;
   override?: string;
+  noUnit?: boolean;
 }
 
 export const getPrice = (
@@ -61,7 +62,12 @@ export const getPrice = (
     dontShow: boolean;
     prices?: { [key: string]: { last: number; symbol: string } };
   }
-) => ({ amount, breakNumber = false, override }: GetPriceProps): string => {
+) => ({
+  amount,
+  breakNumber = false,
+  override,
+  noUnit,
+}: GetPriceProps): string => {
   const { prices, dontShow, fiat } = priceContext;
 
   if (!displayValues) {
@@ -87,5 +93,5 @@ export const getPrice = (
     };
   }
 
-  return getValue({ amount, ...priceProps, breakNumber, override });
+  return getValue({ amount, ...priceProps, breakNumber, override, noUnit });
 };
diff --git a/src/context/ConfigContext.tsx b/src/context/ConfigContext.tsx
@@ -8,7 +8,13 @@ const currencyTypes = ['sat', 'btc', 'fiat'];
 
 export type channelBarStyleTypes = 'normal' | 'compact' | 'ultracompact';
 export type channelBarTypeTypes = 'balance' | 'fees' | 'size' | 'proportional';
-export type channelSortTypes = 'none' | 'local' | 'balance' | 'feeRate';
+export type channelSortTypes =
+  | 'none'
+  | 'local'
+  | 'balance'
+  | 'feeRate'
+  | 'partnerName'
+  | 'size';
 export type sortDirectionTypes = 'increase' | 'decrease';
 
 type State = {

diff --git a/src/utils/helpers.tsx b/src/utils/helpers.tsx
@@ -2,12 +2,12 @@ import numeral from 'numeral';
 
 const getValueString = (amount: number): string => {
   if (amount >= 100000) {
-    return `${amount / 1000000}m`;
+    return `${numeral(amount / 1000000).format('0,0.[0]')}m`;
   }
   if (amount >= 1000) {
-    return `${amount / 1000}k`;
+    return `${numeral(amount / 1000).format('0,0.[0]')}k`;
   }
-  return `${amount}`;
+  return `${numeral(amount).format('0,0.[0]')}`;
 };
 
 interface GetNumberProps {
@@ -17,6 +17,7 @@ interface GetNumberProps {
   currency: string;
   breakNumber?: boolean;
   override?: string;
+  noUnit?: boolean;
 }
 
 export const getValue = ({
@@ -26,6 +27,7 @@ export const getValue = ({
   currency,
   breakNumber,
   override,
+  noUnit,
 }: GetNumberProps): string => {
   const correctCurrency = override || currency;
   let value = 0;
@@ -37,25 +39,27 @@ export const getValue = ({
 
   if (correctCurrency === 'ppm') {
     const amount = numeral(value).format('0,0.[000]');
-    return `${amount} ppm`;
+    return noUnit ? amount : `${amount} ppm`;
   }
 
   if (correctCurrency === 'btc') {
-    if (!value) return '₿0.0';
+    if (!value) return noUnit ? '0.0' : '₿0.0';
     const amountInBtc = value / 100000000;
     const rounded = Math.round(amountInBtc * 10000) / 10000;
 
-    return `₿${rounded}`;
+    return noUnit ? `${rounded}` : `₿${rounded}`;
   }
   if (correctCurrency === 'sat') {
     const breakAmount = breakNumber
       ? getValueString(value)
       : numeral(value).format('0,0.[000]');
-    return `${breakAmount} sats`;
+    return noUnit ? `${breakAmount}` : `${breakAmount} sats`;
   }
 
   const amountInFiat = (value / 100000000) * price;
-  return `${symbol}${numeral(amountInFiat).format('0,0.00')}`;
+  return noUnit
+    ? `${numeral(amountInFiat).format('0,0.00')}`
+    : `${symbol}${numeral(amountInFiat).format('0,0.00')}`;
 };
 
 export const formatSats = (value: number) => numeral(value).format('0,0.[000]');

diff --git a/src/views/channels/channels/ChannelCard.tsx b/src/views/channels/channels/ChannelCard.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import ReactTooltip from 'react-tooltip';
 import { ArrowDown, ArrowUp, EyeOff } from 'react-feather';
 import { ChannelType } from 'src/graphql/types';
+import { BalanceBars } from 'src/components/balance';
 import { getPercent, formatSeconds } from '../../../utils/helpers';
 import {
   ProgressBar,
@@ -134,6 +135,17 @@ export const ChannelCard: React.FC<ChannelCardProps> = ({
   const remoteReserve = format({ amount: remote_reserve });
   const nodeCapacity = format({ amount: partnerNodeCapacity });
 
+  const localBalance = format({
+    amount: local_balance,
+    breakNumber: true,
+    noUnit: true,
+  });
+  const remoteBalance = format({
+    amount: remote_balance,
+    breakNumber: true,
+    noUnit: true,
+  });
+
   const baseFee = format({
     amount: Number(base_fee_mtokens) / 1000,
     override: 'sat',
@@ -273,44 +285,21 @@ export const ChannelCard: React.FC<ChannelCardProps> = ({
         );
       case 'proportional':
         return (
-          <ChannelStatsColumn>
-            <ChannelStatsLine>
-              <ProgressBar order={1} percent={getBar(local_balance, biggest)} />
-              <ProgressBar
-                order={4}
-                percent={getBar(biggest - local_balance, biggest)}
-              />
-            </ChannelStatsLine>
-            <ChannelStatsLine>
-              <ProgressBar
-                order={2}
-                percent={getBar(remote_balance, biggest)}
-              />
-              <ProgressBar
-                order={4}
-                percent={getBar(biggest - remote_balance, biggest)}
-              />
-            </ChannelStatsLine>
-          </ChannelStatsColumn>
+          <BalanceBars
+            local={getBar(local_balance, biggest)}
+            remote={getBar(remote_balance, biggest)}
+            formatLocal={localBalance}
+            formatRemote={remoteBalance}
+          />
         );
       default:
         return (
-          <ChannelStatsColumn>
-            <ChannelStatsLine>
-              <ProgressBar
-                order={1}
-                percent={getPercent(local_balance, remote_balance)}
-              />
-              <ProgressBar
-                order={4}
-                percent={getPercent(remote_balance, local_balance)}
-              />
-            </ChannelStatsLine>
-            <ChannelStatsLine>
-              <ProgressBar order={2} percent={getPercent(received, sent)} />
-              <ProgressBar order={4} percent={getPercent(sent, received)} />
-            </ChannelStatsLine>
-          </ChannelStatsColumn>
+          <BalanceBars
+            local={getPercent(local_balance, remote_balance)}
+            remote={getPercent(remote_balance, local_balance)}
+            formatLocal={localBalance}
+            formatRemote={remoteBalance}
+          />
         );
     }
   };
@@ -343,8 +332,6 @@ export const ChannelCard: React.FC<ChannelCardProps> = ({
           <>
             <div>{`Local Balance: ${formatLocal}`}</div>
             <div>{`Remote Balance: ${formatRemote}`}</div>
-            <div>{`Received: ${formatReceived}`}</div>
-            <div>{`Sent: ${formatSent}`}</div>
           </>
         );
     }

diff --git a/src/views/channels/channels/ChannelManage.tsx b/src/views/channels/channels/ChannelManage.tsx
@@ -11,10 +11,10 @@ import {
   channelSortTypes,
   sortDirectionTypes,
 } from 'src/context/ConfigContext';
-import { Card, SingleLine, Sub4Title } from 'src/components/generic/Styled';
+import { Card, Sub4Title, ResponsiveLine } from 'src/components/generic/Styled';
 import styled from 'styled-components';
 
-const MarginLine = styled(SingleLine)`
+const MarginLine = styled(ResponsiveLine)`
   margin: 8px 0;
 `;
 
@@ -117,6 +117,18 @@ export const ChannelManage = () => {
           >
             Fee Rate
           </SingleButton>
+          <SingleButton
+            selected={channelSort === 'partnerName'}
+            onClick={() => changeSort('partnerName')}
+          >
+            Name
+          </SingleButton>
+          <SingleButton
+            selected={channelSort === 'size'}
+            onClick={() => changeSort('size')}
+          >
+            Size
+          </SingleButton>
         </MultiButton>
       </MarginLine>
       {channelSort !== 'none' && (

diff --git a/src/views/channels/channels/Channels.tsx b/src/views/channels/channels/Channels.tsx
@@ -5,6 +5,7 @@ import { useGetChannelsQuery } from 'src/graphql/queries/__generated__/getChanne
 import { useConfigState } from 'src/context/ConfigContext';
 import { sortBy } from 'underscore';
 import { getPercent } from 'src/utils/helpers';
+import { ChannelType } from 'src/graphql/types';
 import { Card } from '../../../components/generic/Styled';
 import { getErrorContent } from '../../../utils/error';
 import { LoadingCard } from '../../../components/loading/LoadingCard';
@@ -75,15 +76,30 @@ export const Channels: React.FC = () => {
         return sortDirection === 'increase' ? newArray : newArray.reverse();
       }
       case 'balance': {
-        const newArray = sortBy(data.getChannels, channel =>
+        const newArray = sortBy(data.getChannels, (channel: ChannelType) =>
           getPercent(channel.local_balance, channel.remote_balance)
         );
         return sortDirection === 'increase' ? newArray : newArray.reverse();
       }
+      case 'partnerName': {
+        const newArray = sortBy(data.getChannels, (channel: ChannelType) =>
+          channel.partner_node_info.node.alias.toLowerCase()
+        );
+        return sortDirection === 'increase' ? newArray : newArray.reverse();
+      }
+      case 'size': {
+        const newArray = sortBy(
+          data.getChannels,
+          (channel: ChannelType) =>
+            channel.remote_balance + channel.local_balance
+        );
+        return sortDirection === 'increase' ? newArray : newArray.reverse();
+      }
       case 'feeRate': {
         const newArray = sortBy(
           data.getChannels,
-          channel => channel.partner_node_info.fee_rate
+          (channel: ChannelType) =>
+            channel.partner_fee_info.channel.partner_node_policies.fee_rate
         );
         return sortDirection === 'increase' ? newArray : newArray.reverse();
       }