Chart background via plugin (#2495)

* Chart background via plugin

* Sort democracy

packages/page-democracy/src/Overview/Referendum.tsx

@@ -7,15 +7,15 @@ import { BlockNumber } from '@polkadot/types/interfaces';
 
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
-import { Button, Expander, LinkExternal, Tag } from '@polkadot/react-components';
+import { Button, LinkExternal, Tag } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
-import { FormatBalance, BlockToTime } from '@polkadot/react-query';
+import { BlockToTime } from '@polkadot/react-query';
 import { formatNumber, isBoolean } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
 import PreImageButton from './PreImageButton';
 import ProposalCell from './ProposalCell';
-import ReferendumVote from './ReferendumVote';
+import ReferendumVotes from './ReferendumVotes';
 import Voting from './Voting';
 
 interface Props {
@@ -54,26 +54,16 @@ function Referendum ({ className, value: { allAye, allNay, image, imageHash, ind
         <BlockToTime blocks={enactBlock.sub(bestNumber)} />
         #{formatNumber(enactBlock)}
       </td>
-      <td className='number'>
-        <Expander summary={<><FormatBalance value={votedAye} />{voteCountAye ? ` (${formatNumber(voteCountAye)})` : '' }</>}>
-          {allAye.map((vote) =>
-            <ReferendumVote
-              key={vote.accountId.toString()}
-              vote={vote}
-            />
-          )}
-        </Expander>
-      </td>
-      <td className='number'>
-        <Expander summary={<><FormatBalance value={votedNay} />{voteCountNay ? ` (${formatNumber(voteCountNay)})` : '' }</>}>
-          {allNay.map((vote) =>
-            <ReferendumVote
-              key={vote.accountId.toString()}
-              vote={vote}
-            />
-          )}
-        </Expander>
-      </td>
+      <ReferendumVotes
+        count={voteCountAye}
+        total={votedAye}
+        votes={allAye}
+      />
+      <ReferendumVotes
+        count={voteCountNay}
+        total={votedNay}
+        votes={allNay}
+      />
       <td>
         {isBoolean(isPassing) && (
           <Tag

packages/page-democracy/src/Overview/ReferendumVotes.tsx

@@ -0,0 +1,51 @@
+// Copyright 2017-2020 @polkadot/app-democracy authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { DeriveReferendumVote } from '@polkadot/api-derive/types';
+
+import BN from 'bn.js';
+import React, { useEffect, useState } from 'react';
+import { Expander } from '@polkadot/react-components';
+import { FormatBalance } from '@polkadot/react-query';
+import { formatNumber } from '@polkadot/util';
+
+import ReferendumVote from './ReferendumVote';
+
+interface Props {
+  count: number;
+  total: BN;
+  votes: DeriveReferendumVote[];
+}
+
+const LOCKS = [1, 10, 20, 30, 40, 50];
+
+function ReferendumVotes ({ count, total, votes }: Props): React.ReactElement<Props> {
+  const [sorted, setSorted] = useState<DeriveReferendumVote[]>([]);
+
+  useEffect((): void => {
+    setSorted(
+      votes.sort((a, b) => {
+        const ta = a.balance.muln(LOCKS[a.vote.conviction.toNumber()]).divn(10);
+        const tb = b.balance.muln(LOCKS[b.vote.conviction.toNumber()]).divn(10);
+
+        return tb.cmp(ta);
+      })
+    );
+  }, [votes]);
+
+  return (
+    <td className='number'>
+      <Expander summary={<><FormatBalance value={total} />{count ? ` (${formatNumber(count)})` : '' }</>}>
+        {sorted.map((vote) =>
+          <ReferendumVote
+            key={vote.accountId.toString()}
+            vote={vote}
+          />
+        )}
+      </Expander>
+    </td>
+  );
+}
+
+export default React.memo(ReferendumVotes);

packages/page-staking/src/index.tsx

@@ -153,11 +153,15 @@ export default React.memo(styled(StakingApp)`
     display: none;
   }
 
-  .staking--Chart h1 {
-    margin-bottom: 0.5rem;
-  }
-
-  .staking--Chart+.staking--Chart {
+  .staking--Chart {
     margin-top: 1.5rem;
+
+    h1 {
+      margin-bottom: 0.5rem;
+    }
+
+    .ui--Spinner {
+      margin: 2.5rem auto;
+    }
   }
 `);

packages/react-components/src/Chart/Line.tsx

@@ -7,7 +7,7 @@ import { LineProps } from './types';
 import BN from 'bn.js';
 import React, { useEffect, useState } from 'react';
 import ChartJs from 'chart.js';
-import { Line } from 'react-chartjs-2';
+import * as Chart from 'react-chartjs-2';
 
 interface State {
   chartData?: ChartJs.ChartData;
@@ -76,6 +76,22 @@ function calculateOptions (colors: (string | undefined)[] = [], legends: string[
 function LineChart ({ className, colors, labels, legends, style, values }: LineProps): React.ReactElement<LineProps> | null {
   const [{ chartData, chartOptions, jsonValues }, setState] = useState<State>({});
 
+  useEffect((): void => {
+    // Ok, this does exists, but the export if not there in the typings - so it works,
+    //  but we have to jiggle around here to get it to actually compile :(
+    (Chart as any).Chart.pluginService.register({
+      beforeDraw: (chart: any) => {
+        const ctx = chart.chart.ctx;
+        const chartArea = chart.chartArea;
+
+        ctx.save();
+        ctx.fillStyle = '#fff';
+        ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
+        ctx.restore();
+      }
+    });
+  }, []);
+
   useEffect((): void => {
     const newJsonValues = JSON.stringify(values);
 
@@ -93,7 +109,7 @@ function LineChart ({ className, colors, labels, legends, style, values }: LineP
       className={className}
       style={style}
     >
-      <Line
+      <Chart.Line
         data={chartData}
         options={chartOptions}
       />