TokenomicsCharts.tsx 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. import React from 'react';
  2. import { Icon, Label } from 'semantic-ui-react';
  3. import PieChart from '../../../react-components/src/Chart/PieChart';
  4. import styled from 'styled-components';
  5. import { TokenomicsData } from '@polkadot/joy-utils/src/types/tokenomics';
  6. const StyledPieChart = styled(PieChart)`
  7. width:15rem;
  8. height:15rem;
  9. margin-bottom:1rem;
  10. @media (max-width: 1650px){
  11. height:12rem;
  12. width:12rem;
  13. }
  14. @media (max-width: 1400px){
  15. height:15rem;
  16. width:15rem;
  17. }
  18. `;
  19. const ChartContainer = styled('div')`
  20. display:flex;
  21. flex-direction:column;
  22. align-items:center;
  23. `;
  24. const TokenomicsCharts: React.FC<{data?: TokenomicsData; className?: string}> = ({ data, className }) => {
  25. return (
  26. <div className={className}>
  27. {data ? <ChartContainer>
  28. <StyledPieChart
  29. values={[{
  30. colors: ['rgb(246, 109, 68)'],
  31. label: 'Validators',
  32. value: data.validators.rewardsShare * 100
  33. }, {
  34. colors: ['rgb(254, 174, 101)'],
  35. label: 'Council',
  36. value: data.council.rewardsShare * 100
  37. }, {
  38. colors: ['rgb(230, 246, 157)'],
  39. label: 'Storage Providers',
  40. value: data.storageProviders.rewardsShare * 100
  41. }, {
  42. colors: ['rgb(170, 222, 167)'],
  43. label: 'Storage Lead',
  44. value: data.storageProviders.lead.rewardsShare * 100
  45. }, {
  46. colors: ['rgb(100, 194, 166)'],
  47. label: 'Content Curators',
  48. value: data.contentCurators.rewardsShare * 100
  49. }
  50. ]} />
  51. <Label as='div'>
  52. <Icon name='money' />
  53. <span style={{ fontWeight: 600 }}>Spending</span>
  54. </Label>
  55. </ChartContainer> : <Icon name='circle notched' loading/>}
  56. {data ? <ChartContainer>
  57. <StyledPieChart
  58. values={[{
  59. colors: ['rgb(246, 109, 68)'],
  60. label: 'Validators',
  61. value: data.validators.stakeShare * 100
  62. }, {
  63. colors: ['rgb(254, 174, 101)'],
  64. label: 'Council',
  65. value: data.council.stakeShare * 100
  66. }, {
  67. colors: ['rgb(230, 246, 157)'],
  68. label: 'Storage Providers',
  69. value: data.storageProviders.stakeShare * 100
  70. }, {
  71. colors: ['rgb(170, 222, 167)'],
  72. label: 'Storage Lead',
  73. value: data.storageProviders.lead.stakeShare * 100
  74. }, {
  75. colors: ['rgb(100, 194, 166)'],
  76. label: 'Content Curators',
  77. value: data.contentCurators.stakeShare * 100
  78. }
  79. ]} />
  80. <Label as='div'>
  81. <Icon name='block layout' />
  82. <span style={{ fontWeight: 600 }}>Stake</span>
  83. </Label>
  84. </ChartContainer> : <Icon name='circle notched' loading/>}
  85. </div>
  86. );
  87. };
  88. export default TokenomicsCharts;