Remove dangling console.log, extract colors to object const, change colors to be easier to differentiate

pioneer/packages/joy-tokenomics/src/Overview/SpendingAndStakeDistributionTable.tsx

@@ -5,6 +5,8 @@ import { useWindowDimensions } from '../../../joy-utils/src/react/hooks';
 
 import { TokenomicsData, StatusServerData } from '@polkadot/joy-utils/src/types/tokenomics';
 
+import { COLORS } from './index';
+
 const round = (num: number): number => Math.round((num + Number.EPSILON) * 100) / 100;
 
 const applyCss = (columns: number[]): string => {
@@ -141,8 +143,6 @@ const SpendingAndStakeDistributionTable: React.FC<{data?: TokenomicsData; status
     }
   };
 
-  console.log(data);
-
   return (
     <StyledTable divideColumnsAt={[3, 6, 9]} celled>
       <Table.Header>
@@ -170,7 +170,7 @@ const SpendingAndStakeDistributionTable: React.FC<{data?: TokenomicsData; status
           groupStake={data && `${data.validators.totalStake}`}
           groupStakeDollar={displayStatusData('validators', 'totalStake')}
           stakeShare={data && `${round(data.validators.stakeShare * 100)}`}
-          color='rgb(246, 109, 68)'
+          color={COLORS.VALIDATOR}
         />
         <SpendingAndStakeTableRow
           role={width <= 1015 ? 'Council' : 'Council Members'}
@@ -182,7 +182,7 @@ const SpendingAndStakeDistributionTable: React.FC<{data?: TokenomicsData; status
           groupStake={data && `${data.council.totalStake}`}
           groupStakeDollar={displayStatusData('council', 'totalStake')}
           stakeShare={data && `${round(data.council.stakeShare * 100)}`}
-          color='rgb(254, 174, 101)'
+          color={COLORS.COUNCIL_MEMBER}
         />
         <SpendingAndStakeTableRow
           role={width <= 1015 ? 'Storage' : 'Storage Providers'}
@@ -194,7 +194,7 @@ const SpendingAndStakeDistributionTable: React.FC<{data?: TokenomicsData; status
           groupStake={data && `${data.storageProviders.totalStake}`}
           groupStakeDollar={displayStatusData('storageProviders', 'totalStake')}
           stakeShare={data && `${round(data.storageProviders.stakeShare * 100)}`}
-          color='rgb(230, 246, 157)'
+          color={COLORS.STORAGE_PROVIDER}
         />
         <SpendingAndStakeTableRow
           role={width <= 1015 ? 'S. Lead' : width <= 1050 ? 'Storage Lead' : 'Storage Provider Lead'}
@@ -206,7 +206,7 @@ const SpendingAndStakeDistributionTable: React.FC<{data?: TokenomicsData; status
           groupStake={data && `${data.storageProviders.lead.totalStake}`}
           groupStakeDollar={displayStatusData('storageProviders', 'totalStake', true)}
           stakeShare={data && `${round(data.storageProviders.lead.stakeShare * 100)}`}
-          color='rgb(170, 222, 167)'
+          color={COLORS.STORAGE_LEAD}
         />
         <SpendingAndStakeTableRow
           role={width <= 1015 ? 'Curators' : 'Content Curators'}
@@ -218,7 +218,7 @@ const SpendingAndStakeDistributionTable: React.FC<{data?: TokenomicsData; status
           groupStake={data && `${data.contentCurators.totalStake}`}
           groupStakeDollar={displayStatusData('contentCurators', 'totalStake')}
           stakeShare={data && `${round(data.contentCurators.stakeShare * 100)}`}
-          color='rgb(100, 194, 166)'
+          color={COLORS.CONTENT_CURATOR}
         />
         <SpendingAndStakeTableRow
           role={width <= 1015 ? 'C. Lead' : 'Curators Lead'}
@@ -230,7 +230,7 @@ const SpendingAndStakeDistributionTable: React.FC<{data?: TokenomicsData; status
           groupStake={data && `${data.contentCurators.lead.totalStake}`}
           groupStakeDollar={displayStatusData('contentCurators', 'totalStake', true)}
           stakeShare={data && `${round(data.contentCurators.lead.stakeShare * 100)}`}
-          color='rgb(100, 160, 190)'
+          color={COLORS.CURATOR_LEAD}
         />
         <SpendingAndStakeTableRow
           role='Operations'
@@ -242,7 +242,7 @@ const SpendingAndStakeDistributionTable: React.FC<{data?: TokenomicsData; status
           groupStake={data && `${data.operations.totalStake}`}
           groupStakeDollar={displayStatusData('operations', 'totalStake')}
           stakeShare={data && `${round(data.operations.stakeShare * 100)}`}
-          color='rgb(30, 166, 165)'
+          color={COLORS.OPERATIONS}
         />
         <SpendingAndStakeTableRow
           role='Operations Lead'
@@ -254,7 +254,7 @@ const SpendingAndStakeDistributionTable: React.FC<{data?: TokenomicsData; status
           groupStake={data && `${data.operations.lead.totalStake}`}
           groupStakeDollar={displayStatusData('operations', 'totalStake', true)}
           stakeShare={data && `${round(data.operations.lead.stakeShare * 100)}`}
-          color='rgb(30, 132, 189)'
+          color={COLORS.OPERATIONS_LEAD}
         />
         <SpendingAndStakeTableRow
           role='TOTAL'

pioneer/packages/joy-tokenomics/src/Overview/TokenomicsCharts.tsx

@@ -4,6 +4,7 @@ import PieChart from '../../../react-components/src/Chart/PieChart';
 import styled from 'styled-components';
 
 import { TokenomicsData } from '@polkadot/joy-utils/src/types/tokenomics';
+import { COLORS } from './index';
 
 const StyledPieChart = styled(PieChart)`
   width:15rem;
@@ -31,35 +32,35 @@ const TokenomicsCharts: React.FC<{data?: TokenomicsData; className?: string}> =
       {data ? <ChartContainer>
         <StyledPieChart
           values={[{
-            colors: ['rgb(246, 109, 68)'],
+            colors: [COLORS.VALIDATOR],
             label: 'Validators',
             value: data.validators.rewardsShare * 100
           }, {
-            colors: ['rgb(254, 174, 101)'],
+            colors: [COLORS.COUNCIL_MEMBER],
             label: 'Council',
             value: data.council.rewardsShare * 100
           }, {
-            colors: ['rgb(230, 246, 157)'],
+            colors: [COLORS.STORAGE_PROVIDER],
             label: 'Storage Providers',
             value: data.storageProviders.rewardsShare * 100
           }, {
-            colors: ['rgb(170, 222, 167)'],
+            colors: [COLORS.STORAGE_LEAD],
             label: 'Storage Lead',
             value: data.storageProviders.lead.rewardsShare * 100
           }, {
-            colors: ['rgb(100, 194, 166)'],
+            colors: [COLORS.CONTENT_CURATOR],
             label: 'Content Curators',
             value: data.contentCurators.rewardsShare * 100
           }, {
-            colors: ['rgb(100, 160, 190)'],
+            colors: [COLORS.CURATOR_LEAD],
             label: 'Content Curators Lead',
             value: data.contentCurators.lead.rewardsShare * 100
           }, {
-            colors: ['rgb(30, 166, 165)'],
+            colors: [COLORS.OPERATIONS],
             label: 'Operations',
             value: data.operations.rewardsShare * 100
           }, {
-            colors: ['rgb(30, 132, 189)'],
+            colors: [COLORS.OPERATIONS_LEAD],
             label: 'Operations Lead',
             value: data.operations.lead.rewardsShare * 100
           }
@@ -72,28 +73,28 @@ const TokenomicsCharts: React.FC<{data?: TokenomicsData; className?: string}> =
       {data ? <ChartContainer>
         <StyledPieChart
           values={[{
-            colors: ['rgb(246, 109, 68)'],
+            colors: [COLORS.VALIDATOR],
             label: 'Validators',
             value: data.validators.stakeShare * 100
           }, {
-            colors: ['rgb(254, 174, 101)'],
+            colors: [COLORS.COUNCIL_MEMBER],
             label: 'Council',
             value: data.council.stakeShare * 100
           }, {
-            colors: ['rgb(230, 246, 157)'],
+            colors: [COLORS.STORAGE_PROVIDER],
             label: 'Storage Providers',
             value: data.storageProviders.stakeShare * 100
           }, {
-            colors: ['rgb(170, 222, 167)'],
+            colors: [COLORS.STORAGE_LEAD],
             label: 'Storage Lead',
             value: data.storageProviders.lead.stakeShare * 100
           }, {
-            colors: ['rgb(100, 194, 166)'],
+            colors: [COLORS.CONTENT_CURATOR],
             label: 'Content Curators',
             value: data.contentCurators.stakeShare * 100
           },
           {
-            colors: ['rgb(100, 160, 190)'],
+            colors: [COLORS.CURATOR_LEAD],
             label: 'Content Curators Lead',
             value: data.contentCurators.lead.stakeShare * 100
           }

pioneer/packages/joy-tokenomics/src/Overview/index.tsx

@@ -38,6 +38,17 @@ const StyledTokenomicsCharts = styled(TokenomicsCharts)`
   }
 `;
 
+const COLORS = {
+  VALIDATOR: '#ff9800',
+  COUNCIL_MEMBER: '#ffc107',
+  STORAGE_PROVIDER: '#ffeb3b',
+  STORAGE_LEAD: '#cddc39',
+  CONTENT_CURATOR: '#8bc34a',
+  CURATOR_LEAD: '#4caf50',
+  OPERATIONS: '#009688',
+  OPERATIONS_LEAD: '#00bcd4'
+};
+
 const Overview: React.FC = () => {
   const transport = useTransport();
   const [statusDataValue, statusDataError] = usePromise<StatusServerData | undefined>(() => fetch('https://status.joystream.org/status').then((res) => res.json().then((data) => data as StatusServerData)), undefined, []);
@@ -57,3 +68,4 @@ const Overview: React.FC = () => {
 };
 
 export default Overview;
+export { COLORS };