Details page.

components/RankingsChart.js

@@ -0,0 +1,63 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { useSpring, animated } from 'react-spring';
+import classNames from 'classnames';
+import { get } from 'lib/web';
+import styles from './RankingsChart.module.css';
+
+export default function RankingsChart({
+  title,
+  websiteId,
+  startDate,
+  endDate,
+  type,
+  className,
+  filterData,
+}) {
+  const [data, setData] = useState();
+
+  const rankings = useMemo(() => (data && filterData ? filterData(data) : data), [data]);
+
+  const total = useMemo(() => rankings?.reduce((n, { y }) => n + y, 0) || 0, [rankings]);
+
+  async function loadData() {
+    setData(
+      await get(`/api/website/${websiteId}/rankings`, {
+        start_at: +startDate,
+        end_at: +endDate,
+        type,
+      }),
+    );
+  }
+
+  useEffect(() => {
+    if (websiteId) {
+      loadData();
+    }
+  }, [websiteId, startDate, endDate, type]);
+
+  if (!data) {
+    return <h1>loading...</h1>;
+  }
+
+  return (
+    <div className={classNames(styles.container, className)}>
+      <div className={styles.title}>{title}</div>
+      {rankings.map(({ x, y }, i) => (i <= 10 ? <Row label={x} value={y} total={total} /> : null))}
+    </div>
+  );
+}
+
+const Row = ({ label, value, total }) => {
+  const props = useSpring({ width: `${(value / total) * 100}%`, from: { width: '0%' } });
+  const valueProps = useSpring({ y: value, from: { y: 0 } });
+
+  return (
+    <div className={styles.row}>
+      <div className={styles.label}>{label}</div>
+      <animated.div className={styles.value}>
+        {valueProps.y.interpolate(y => y.toFixed(0))}
+      </animated.div>
+      <animated.div className={styles.bar} style={{ ...props }} />
+    </div>
+  );
+};