Initial expanded view in details.

components/charts/QuickButtons.module.css

@@ -1,5 +1,6 @@
 .buttons {
   display: flex;
+  align-content: center;
   position: absolute;
   top: 0;
   right: 0;
@@ -10,7 +11,7 @@
   margin-left: 10px;
 }
 
-.button {
+.buttons .button {
   font-size: var(--font-size-xsmall);
   padding: 4px 8px;
 }

components/charts/RankingsChart.js

@@ -1,7 +1,9 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import { useSpring, animated, config } from 'react-spring';
 import classNames from 'classnames';
-import CheckVisible from '../helpers/CheckVisible';
+import CheckVisible from 'components/helpers/CheckVisible';
+import Button from 'components/common/Button';
+import Arrow from 'assets/arrow-right.svg';
 import { get } from 'lib/web';
 import { percentFilter } from 'lib/filters';
 import styles from './RankingsChart.module.css';
@@ -16,6 +18,7 @@ export default function RankingsChart({
   className,
   dataFilter,
   onDataLoad = () => {},
+  onExpand = () => {},
 }) {
   const [data, setData] = useState();
 
@@ -62,6 +65,11 @@ export default function RankingsChart({
               <Row key={x} label={x} value={y} percent={z} animate={visible} />
             ))}
           </div>
+          <div className={styles.footer}>
+            <Button icon={<Arrow />} size="xsmall" onClick={() => onExpand(title)}>
+              <div>More</div>
+            </Button>
+          </div>
         </div>
       )}
     </CheckVisible>

components/charts/RankingsChart.module.css

@@ -1,6 +1,6 @@
 .container {
   position: relative;
-  min-height: 430px;
+  min-height: 460px;
   font-size: var(--font-size-small);
   padding: 20px 0;
   display: flex;
@@ -90,6 +90,11 @@
   transform: translate(-50%, -50%);
 }
 
+.footer {
+  display: flex;
+  justify-content: center;
+}
+
 @media only screen and (max-width: 992px) {
   .container {
     min-height: auto;