Fixed some bugs (#342)

Fixed some bugs

src/components/Home/Charts/ExecutivesResponsivenessChart.tsx

@@ -6,7 +6,7 @@ const info =
   'The more responsive MKR tokens are, the safer the system is. It gives a good ballpark estimate for how much MKR we can expect to see voting in executive votes and how quickly that MKR will vote.'
 const links = [
   {
-    title: 'MakerDao Governance Graph',
+    title: 'MakerDAO Governance Graph',
     uri: 'https://thegraph.com/explorer/subgraph/protofire/makerdao-governance?query=Executive%20votes',
   },
 ]

src/components/Home/Charts/GiniChart.tsx

@@ -6,7 +6,7 @@ const info =
   'Allows us to keep track of how ‘fair’ the distribution of voting tokens is in the MKR governance ecosystem.'
 const links = [
   {
-    title: 'MakerDao Governance Graph',
+    title: 'MakerDAO Governance Graph',
     uri: 'https://thegraph.com/explorer/subgraph/protofire/makerdao-governance?query=Lock%20and%20Free%20Actions',
   },
 ]

src/components/Home/Charts/MkrDistributionPerExecutiveChart.tsx

@@ -7,11 +7,11 @@ const info =
   'This metric helps to inform governance of the distribution of MKR within the governance system and which executive has the current hat and the amount of MKR staked on the current hat.'
 const links = [
   {
-    title: 'MakerDao Governance Graph - Executives',
+    title: 'MakerDAO Governance Graph - Executives',
     uri: 'https://thegraph.com/explorer/subgraph/protofire/makerdao-governance?query=Executive%20votes',
   },
   {
-    title: 'MakerDao Governance Graph - Governance Info',
+    title: 'MakerDAO Governance Graph - Governance Info',
     uri: 'https://thegraph.com/explorer/subgraph/protofire/makerdao-governance?query=Governance%20Info',
   },
 ]

src/components/Home/Charts/PollsResponsivenessChart.tsx

@@ -6,7 +6,7 @@ const info =
   'The more responsive MKR tokens are, the safer the system is. It gives a good ballpark estimate for how much MKR we can expect to see voting in polls and how quickly that MKR will vote.'
 const links = [
   {
-    title: 'MakerDao Governance Graph',
+    title: 'MakerDAO Governance Graph',
     uri: 'https://thegraph.com/explorer/subgraph/protofire/makerdao-governance?query=Polls',
   },
   {

src/components/Home/Charts/StakedMkrChart.tsx

@@ -8,7 +8,7 @@ const info =
   'Being able to see voter participation over time allows us to judge the safety and representativeness of the current set of system parameters.'
 const links = [
   {
-    title: 'MakerDao Governance Graph',
+    title: 'MakerDAO Governance Graph',
     uri:
       'https://thegraph.com/explorer/subgraph/protofire/makerdao-governance?query=Lock%2C%20Free%20and%20Vote%20Actions',
   },

src/components/Home/Charts/TimeTakenChart.tsx

@@ -5,7 +5,7 @@ import { Chart, ChartWrapper } from '../../common'
 const info = 'This distribution gives users an idea of how long a given executive takes to pass. '
 const links = [
   {
-    title: 'MakerDao Governance Graph',
+    title: 'MakerDAO Governance Graph',
     uri: 'https://thegraph.com/explorer/subgraph/protofire/makerdao-governance?query=Executive%20votes',
   },
 ]

src/components/Home/Charts/VotesVsPollsChart.tsx

@@ -6,7 +6,7 @@ const info =
   'Being able to see the rate of change of votes and polls over time lets us judge the demand on governance over time.'
 const links = [
   {
-    title: 'MakerDao Governance Graph',
+    title: 'MakerDAO Governance Graph',
     uri: 'https://thegraph.com/explorer/subgraph/protofire/makerdao-governance?query=Executive%20Votes%20and%20Polls',
   },
 ]

src/components/Home/HomeDetail.tsx

@@ -173,7 +173,7 @@ function HomeDetail(props: Props) {
           'This gives governance a brief overview of the most recent polls, and serves as a navigation aid for users to explore further.',
         links: [
           {
-            title: 'MakerDao Governance Graph',
+            title: 'MakerDAO Governance Graph',
             uri: 'https://thegraph.com/explorer/subgraph/protofire/makerdao-governance?query=Polls',
           },
         ],
@@ -189,7 +189,7 @@ function HomeDetail(props: Props) {
           'This allows governance to get an idea of the most popular decisions made in the history of MKR Governance. It also provides a baseline expectation of participation.',
         links: [
           {
-            title: 'MakerDao Governance Graph',
+            title: 'MakerDAO Governance Graph',
             uri: 'https://thegraph.com/explorer/subgraph/protofire/makerdao-governance?query=Polls',
           },
         ],
@@ -212,7 +212,7 @@ function HomeDetail(props: Props) {
           'Lets users see how MKR is currently distributed over executive votes, giving some idea of the value of the current hat, and where ‘idle’ MKR is sitting in the system.',
         links: [
           {
-            title: 'MakerDao Governance Graph',
+            title: 'MakerDAO Governance Graph',
             uri: 'https://thegraph.com/explorer/subgraph/protofire/makerdao-governance?query=Executive%20votes',
           },
         ],
@@ -227,11 +227,11 @@ function HomeDetail(props: Props) {
           'A list of the addresses that have voted the most in the MKR governance system. Having a ‘leaderboard’ will hopefully lead to more active and consistent participants in the voting ecosystem.',
         links: [
           {
-            title: 'MakerDao Governance Graph - Executives',
+            title: 'MakerDAO Governance Graph - Executives',
             uri: 'https://thegraph.com/explorer/subgraph/protofire/makerdao-governance?query=Executive%20votes',
           },
           {
-            title: 'MakerDao Governance Graph - Polls',
+            title: 'MakerDAO Governance Graph - Polls',
             uri: 'https://thegraph.com/explorer/subgraph/protofire/makerdao-governance?query=Polls',
           },
         ],
@@ -247,7 +247,7 @@ function HomeDetail(props: Props) {
           'This metric helps to inform governance of potentially malicious MKR being moved to old uncast executive votes.',
         links: [
           {
-            title: 'MakerDao Governance Graph',
+            title: 'MakerDAO Governance Graph',
             uri: 'https://thegraph.com/explorer/subgraph/protofire/makerdao-governance?query=Executive%20votes',
           },
         ],

src/components/Home/helpers.tsx

@@ -289,6 +289,7 @@ export const ActivenessBreakdownColumns = () => {
     {
       Header: 'Period',
       accessor: 'period',
+      disableFilters: true,
     },
     {
       Header: 'MKR',

src/components/PollDetails/Charts/MakerDistributionChart.tsx

@@ -12,7 +12,7 @@ const links = [
     uri: 'https://thegraph.com/explorer/subgraph/protofire/makerdao-governance?query=Polls',
   },
   {
-    title: 'MakerDao Governance Graph',
+    title: 'MakerDAO Governance Graph',
     uri: 'https://thegraph.com/explorer/subgraph/protofire/mkr-registry?query=Account%20balances',
   },
 ]

src/components/PollDetails/Charts/PollPerOptionChart.tsx

@@ -17,13 +17,13 @@ const PollPerOptionChart = props => {
   const { wrapperProps, modalProps, colors, options, isVoter } = props
   const chartColors = [...defaultColors, ...colors]
 
-  const info = !isVoter
+  const info = isVoter
     ? 'Shows the current or final distribution of voting addresses across the options available in this poll. This gives an intuitive visual depiction of the current or final vote results in terms of addresses.'
     : ' Shows the current or final distribution of MKR voting across the options available in this poll. This gives an intuitive visual depiction of the current or final vote results in terms of MKR.'
   const links = !isVoter
     ? [
         {
-          title: 'MakerDao Governance Graph',
+          title: 'MakerDAO Governance Graph',
           uri: 'https://thegraph.com/explorer/subgraph/protofire/makerdao-governance?query=Polls',
         },
         {
@@ -33,7 +33,7 @@ const PollPerOptionChart = props => {
       ]
     : [
         {
-          title: 'MakerDao Governance Graph',
+          title: 'MakerDAO Governance Graph',
           uri: 'https://thegraph.com/explorer/subgraph/protofire/makerdao-governance?query=Polls',
         },
         {

src/components/PollDetails/Charts/VotersDistributionChart.tsx

@@ -8,7 +8,7 @@ const info =
   'Shows the historical number of addresses voting for each option in this poll. This helps track swings in opinion over time, as well as allowing comparison between the ‘MKR Count By Option’ metric.'
 const links = [
   {
-    title: 'MakerDao Governance Graph',
+    title: 'MakerDAO Governance Graph',
     uri: 'https://thegraph.com/explorer/subgraph/protofire/makerdao-governance?query=Polls',
   },
   {

src/components/PollDetails/index.tsx

@@ -124,7 +124,7 @@ function PollDetails(props: Props) {
           [el.label]: el.mkr,
         })),
         component: props => (
-          <PollPerOption expanded content="MKR Voter Per Option" component="pollPerOptionMkr" {...props} />
+          <PollPerOption expanded content="MKR Votes Per Option" component="pollPerOptionMkr" {...props} />
         ),
       },
     },
@@ -264,7 +264,7 @@ function PollDetails(props: Props) {
           {pollPerOptionData.length === 0 ? (
             <Loading />
           ) : (
-            <PollPerOption content="MKR Voter Per Option" component="pollPerOptionMkr" />
+            <PollPerOption content="MKR Votes Per Option" component="pollPerOptionMkr" />
           )}
         </CardStyled>
       </PollDetailContainer>
@@ -283,7 +283,7 @@ function PollDetails(props: Props) {
             }
             links={[
               {
-                title: 'MakerDao Governance Graph',
+                title: 'MakerDAO Governance Graph',
                 uri: 'https://thegraph.com/explorer/subgraph/protofire/makerdao-governance?query=Polls',
               },
               {

src/components/VoteDetails/Charts/ApprovalsByAddressChart.tsx

@@ -6,7 +6,7 @@ const info =
   'Gives users an idea of how well represented different ‘sizes’ of MKR holder were in this vote. Note that this metric is not sybil safe. '
 const links = [
   {
-    title: 'MakerDao Governance Graph',
+    title: 'MakerDAO Governance Graph',
     uri: 'https://thegraph.com/explorer/subgraph/protofire/makerdao-governance?query=Executive%20vote',
   },
 ]

src/components/VoteDetails/Charts/ExecutiveVsHatChart.tsx

@@ -7,7 +7,7 @@ const info =
   'Shows this executive in comparison to the current hat, giving users a clear picture of how much more MKR is required for the hat to be assigned either to or from this executive vote.'
 const links = [
   {
-    title: 'MakerDao Governance Graph',
+    title: 'MakerDAO Governance Graph',
     uri: 'https://thegraph.com/explorer/subgraph/protofire/makerdao-governance?query=Executive%20vote',
   },
 ]

src/components/VoteDetails/Charts/VotersVsMkrChart.tsx

@@ -11,13 +11,13 @@ const VotersVsMkrChart = props => {
   const links = !voters
     ? [
         {
-          title: 'MakerDao Governance Graph',
+          title: 'MakerDAO Governance Graph',
           uri: 'https://thegraph.com/explorer/subgraph/protofire/makerdao-governance?query=Executive%20vote',
         },
       ]
     : [
         {
-          title: 'MakerDao Governance Graph',
+          title: 'MakerDAO Governance Graph',
           uri: 'https://thegraph.com/explorer/subgraph/protofire/makerdao-governance?query=Executive%20vote',
         },
       ]

src/components/VoteDetails/index.tsx

@@ -220,7 +220,7 @@ function VoteDetails(props: Props) {
             }
             links={[
               {
-                title: 'MakerDao Governance Graph',
+                title: 'MakerDAO Governance Graph',
                 uri: 'https://thegraph.com/explorer/subgraph/protofire/makerdao-governance?query=Executive%20vote',
               },
             ]}

src/components/common/ChartWrapper/index.tsx

@@ -21,6 +21,7 @@ const InfoIconContainer = styled.div`
 const LinksContainer = styled.div`
   margin-top: 10px;
   display: flex;
+  justify-content: space-between;
   a {
     &:visited,
     &:active {
@@ -79,7 +80,7 @@ function ChartWrapper(props: Props) {
           <CloseIcon />
         </InfoContainer>
         <div>
-          <CardTitle content={`${content} Info`} />
+          <CardTitle content={`${content} ${versus ? 'vs' : ''} ${versus || ''} Info`} />
           <DescriptionBox>
             {info}
             <LinksContainer>

src/components/common/StrippedTableWrapper/index.tsx

@@ -34,6 +34,7 @@ const InfoIconContainer = styled.div`
 const LinksContainer = styled.div`
   margin-top: 10px;
   display: flex;
+  justify-content: space-between;
   a {
     &:visited,
     &:active {

src/components/common/Table/index.tsx

@@ -281,6 +281,7 @@ function Table({ columns, data, expanded, limitPerPage, scrollable, handleRow, s
   const {
     getTableProps,
     headerGroups,
+    rows,
     prepareRow,
     page, // Instead of using 'rows', we'll use page,
     // which has only the rows for the active page
@@ -418,7 +419,7 @@ function Table({ columns, data, expanded, limitPerPage, scrollable, handleRow, s
               ))}
             </PageSelect>
             <Pager>
-              {pageIndex + 1}-{pageSize} of {data ? data.length : 0}
+              {pageIndex + 1}-{pageSize} of {rows ? rows.length : 0}
             </Pager>
             <PageIconContainer onClick={() => previousPage()} disabled={!canPreviousPage}>
               <PreviousIcon />