From 894736d4748b76c099189ea60dbb9bea756a26a3 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Wed, 14 Oct 2020 14:16:00 -0700
Subject: [PATCH 1/9] Updated log display.

---
 .gitignore                          |  1 +
 components/common/NoData.module.css |  1 +
 components/metrics/RealtimeLog.js   | 12 ++++++++----
 scripts/check-lang.js               |  6 ++++++
 scripts/lang-ignore.json            |  6 ++----
 5 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/.gitignore b/.gitignore
index 715ff703..32d3cbce 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,6 +23,7 @@
 .DS_Store
 .idea
 *.iml
+*.log
 .vscode/*
 
 # debug
diff --git a/components/common/NoData.module.css b/components/common/NoData.module.css
index d1c712eb..82f9c3ee 100644
--- a/components/common/NoData.module.css
+++ b/components/common/NoData.module.css
@@ -1,5 +1,6 @@
 .container {
   color: var(--gray500);
+  font-size: var(--font-size-normal);
   position: absolute;
   top: 50%;
   left: 50%;
diff --git a/components/metrics/RealtimeLog.js b/components/metrics/RealtimeLog.js
index c2de333b..18f064e8 100644
--- a/components/metrics/RealtimeLog.js
+++ b/components/metrics/RealtimeLog.js
@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { FixedSizeList } from 'react-window';
 import firstBy from 'thenby';
 import { format } from 'date-fns';
@@ -7,6 +7,7 @@ import Icon from 'components/common/Icon';
 import Tag from 'components/common/Tag';
 import Dot from 'components/common/Dot';
 import FilterButtons from 'components/common/FilterButtons';
+import { devices } from 'components/messages';
 import useLocale from 'hooks/useLocale';
 import useCountryNames from 'hooks/useCountryNames';
 import { BROWSERS } from 'lib/constants';
@@ -15,6 +16,7 @@ import Visitor from 'assets/visitor.svg';
 import Eye from 'assets/eye.svg';
 import { stringToColor } from 'lib/format';
 import styles from './RealtimeLog.module.css';
+import NoData from '../common/NoData';
 
 const TYPE_ALL = 0;
 const TYPE_PAGEVIEW = 1;
@@ -28,6 +30,7 @@ const TYPE_ICONS = {
 };
 
 export default function RealtimeLog({ data, websites }) {
+  const intl = useIntl();
   const [locale] = useLocale();
   const countryNames = useCountryNames(locale);
   const [filter, setFilter] = useState(TYPE_ALL);
@@ -116,9 +119,9 @@ export default function RealtimeLog({ data, websites }) {
           defaultMessage="Visitor from {country} using {browser} on {os} {device}"
           values={{
             country: <b>{countryNames[country]}</b>,
-            browser: BROWSERS[browser],
-            os,
-            device,
+            browser: <b>{BROWSERS[browser]}</b>,
+            os: <b>{os}</b>,
+            device: <b>{intl.formatMessage(devices[device])?.toLowerCase()}</b>,
           }}
         />
       );
@@ -159,6 +162,7 @@ export default function RealtimeLog({ data, websites }) {
         <FormattedMessage id="label.realtime-logs" defaultMessage="Realtime logs" />
       </div>
       <div className={styles.body}>
+        {logs?.length === 0 && <NoData />}
         <FixedSizeList height={400} itemCount={logs.length} itemSize={40}>
           {Row}
         </FixedSizeList>
diff --git a/scripts/check-lang.js b/scripts/check-lang.js
index a8c54538..5df5f875 100644
--- a/scripts/check-lang.js
+++ b/scripts/check-lang.js
@@ -14,6 +14,7 @@ files.forEach(file => {
     const id = file.replace('.json', '');
 
     console.log(chalk.yellowBright(`\n## ${file}`));
+    let count = 0;
     keys.forEach(key => {
       const orig = messages[key];
       const check = lang[key];
@@ -21,7 +22,12 @@ files.forEach(file => {
 
       if (!ignored && (!check || check === orig)) {
         console.log(chalk.redBright('*'), chalk.greenBright(`${key}:`), orig);
+        count++;
       }
     });
+
+    if (count === 0) {
+      console.log('**👍 Complete!**');
+    }
   }
 });
diff --git a/scripts/lang-ignore.json b/scripts/lang-ignore.json
index 38a7eecf..28d1b025 100644
--- a/scripts/lang-ignore.json
+++ b/scripts/lang-ignore.json
@@ -1,14 +1,12 @@
 {
   "de-DE": [
     "label.administrator",
+    "label.domain",
     "label.name",
     "metrics.device.desktop",
     "metrics.device.laptop",
     "metrics.device.tablet",
     "metrics.referrers"
   ],
-  "fr-FR": [    
-    "metrics.actions",
-    "metrics.pages"
-  ]
+  "fr-FR": ["metrics.actions", "metrics.pages"]
 }

From 8e987b6b9dd39eaa34264f225aa885c9e7ff91a0 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Wed, 14 Oct 2020 16:39:26 -0700
Subject: [PATCH 2/9] Replace chart legend with custom component.

---
 components/metrics/BarChart.js             | 26 +++++++++++++++++++---
 components/metrics/BarChart.module.css     | 17 ++++++++++++++
 components/metrics/EventsChart.js          |  9 --------
 components/metrics/PageviewsChart.js       |  2 --
 components/pages/WebsiteDetails.module.css |  2 +-
 5 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/components/metrics/BarChart.js b/components/metrics/BarChart.js
index a31a6f40..2f99fa28 100644
--- a/components/metrics/BarChart.js
+++ b/components/metrics/BarChart.js
@@ -2,6 +2,7 @@ import React, { useState, useRef, useEffect } from 'react';
 import ReactTooltip from 'react-tooltip';
 import classNames from 'classnames';
 import ChartJS from 'chart.js';
+import Dot from 'components/common/Dot';
 import { formatLongNumber } from 'lib/format';
 import { dateFormat } from 'lib/lang';
 import useLocale from 'hooks/useLocale';
@@ -24,6 +25,7 @@ export default function BarChart({
 }) {
   const canvas = useRef();
   const chart = useRef();
+  const [legend, setLegend] = useState();
   const [tooltip, setTooltip] = useState(null);
   const [locale] = useLocale();
   const [theme] = useTheme();
@@ -111,9 +113,7 @@ export default function BarChart({
       responsiveAnimationDuration: 0,
       maintainAspectRatio: false,
       legend: {
-        labels: {
-          fontColor: colors.text,
-        },
+        display: false,
       },
       scales: {
         xAxes: [
@@ -143,6 +143,7 @@ export default function BarChart({
               callback: renderYLabel,
               beginAtZero: true,
               fontColor: colors.text,
+              precision: 0,
             },
             gridLines: {
               color: colors.line,
@@ -163,6 +164,8 @@ export default function BarChart({
       },
       options,
     });
+
+    chart.current.generateLegend();
   }
 
   function updateChart() {
@@ -179,6 +182,10 @@ export default function BarChart({
     options.tooltips.custom = renderTooltip;
 
     onUpdate(chart.current);
+
+    chart.current.update();
+
+    chart.current.generateLegend();
   }
 
   useEffect(() => {
@@ -189,6 +196,7 @@ export default function BarChart({
         setTooltip(null);
         updateChart();
       }
+      setLegend({ ...chart.current.legend });
     }
   }, [datasets, unit, animationDuration, locale, theme]);
 
@@ -202,6 +210,7 @@ export default function BarChart({
       >
         <canvas ref={canvas} />
       </div>
+      <Legend items={legend?.legendItems} locale={locale} />
       <ReactTooltip id={`${chartId}-tooltip`}>
         {tooltip ? <Tooltip {...tooltip} /> : null}
       </ReactTooltip>
@@ -209,6 +218,17 @@ export default function BarChart({
   );
 }
 
+const Legend = ({ items = [], locale }) => (
+  <div className={styles.legend}>
+    {items.map(({ text, fillStyle }) => (
+      <div key={text} className={styles.label}>
+        <Dot color={fillStyle} />
+        <span className={locale}>{text}</span>
+      </div>
+    ))}
+  </div>
+);
+
 const Tooltip = ({ title, value, label, labelColor }) => (
   <div className={styles.tooltip}>
     <div className={styles.content}>
diff --git a/components/metrics/BarChart.module.css b/components/metrics/BarChart.module.css
index cd26d3af..2c394e83 100644
--- a/components/metrics/BarChart.module.css
+++ b/components/metrics/BarChart.module.css
@@ -41,3 +41,20 @@
   width: 10px;
   height: 10px;
 }
+
+.legend {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-top: 10px;
+}
+
+.label {
+  display: flex;
+  align-items: center;
+  font-size: var(--font-size-xsmall);
+}
+
+.label + .label {
+  margin-left: 20px;
+}
diff --git a/components/metrics/EventsChart.js b/components/metrics/EventsChart.js
index 9a5827b2..3d55a40d 100644
--- a/components/metrics/EventsChart.js
+++ b/components/metrics/EventsChart.js
@@ -61,14 +61,6 @@ export default function EventsChart({ websiteId, className, token }) {
     });
   }, [data]);
 
-  function handleCreate(options) {
-    const legend = {
-      position: 'bottom',
-    };
-
-    options.legend = legend;
-  }
-
   function handleUpdate(chart) {
     chart.data.datasets = datasets;
 
@@ -86,7 +78,6 @@ export default function EventsChart({ websiteId, className, token }) {
       datasets={datasets}
       unit={unit}
       records={getDateLength(startDate, endDate, unit)}
-      onCreate={handleCreate}
       onUpdate={handleUpdate}
       stacked
     />
diff --git a/components/metrics/PageviewsChart.js b/components/metrics/PageviewsChart.js
index 79fe4917..e9d30449 100644
--- a/components/metrics/PageviewsChart.js
+++ b/components/metrics/PageviewsChart.js
@@ -45,8 +45,6 @@ export default function PageviewsChart({
       id: 'metrics.page-views',
       defaultMessage: 'Page views',
     });
-
-    chart.update();
   };
 
   if (!data) {
diff --git a/components/pages/WebsiteDetails.module.css b/components/pages/WebsiteDetails.module.css
index cd771c96..e8dd5399 100644
--- a/components/pages/WebsiteDetails.module.css
+++ b/components/pages/WebsiteDetails.module.css
@@ -31,5 +31,5 @@
 }
 
 .eventschart {
-  padding: 30px 0;
+  padding-top: 30px;
 }

From 37bc082efcc0194abf51b683d7b6003699641c76 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Wed, 14 Oct 2020 17:22:46 -0700
Subject: [PATCH 3/9] Updated check-lang script.

---
 components/metrics/RealtimeHeader.module.css | 1 +
 scripts/check-lang.js                        | 2 +-
 scripts/lang-ignore.json                     | 3 ++-
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/components/metrics/RealtimeHeader.module.css b/components/metrics/RealtimeHeader.module.css
index 8f948eb1..28aabc3e 100644
--- a/components/metrics/RealtimeHeader.module.css
+++ b/components/metrics/RealtimeHeader.module.css
@@ -1,3 +1,4 @@
 .metrics {
   display: flex;
+  margin-bottom: 10px;
 }
diff --git a/scripts/check-lang.js b/scripts/check-lang.js
index 5df5f875..67b4b8a4 100644
--- a/scripts/check-lang.js
+++ b/scripts/check-lang.js
@@ -13,7 +13,7 @@ files.forEach(file => {
     const lang = require(`../lang/${file}`);
     const id = file.replace('.json', '');
 
-    console.log(chalk.yellowBright(`\n## ${file}`));
+    console.log(chalk.yellowBright(`\n## ${file.replace('.json', '')}`));
     let count = 0;
     keys.forEach(key => {
       const orig = messages[key];
diff --git a/scripts/lang-ignore.json b/scripts/lang-ignore.json
index 28d1b025..29430a94 100644
--- a/scripts/lang-ignore.json
+++ b/scripts/lang-ignore.json
@@ -8,5 +8,6 @@
     "metrics.device.tablet",
     "metrics.referrers"
   ],
-  "fr-FR": ["metrics.actions", "metrics.pages"]
+  "fr-FR": ["metrics.actions", "metrics.pages"],
+  "tr-TR": ["metrics.device.tablet"]
 }

From 7d659212b0b330b45b5b8f563d77f8640c2251c1 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Wed, 14 Oct 2020 22:09:00 -0700
Subject: [PATCH 4/9] Refactor chart components.

---
 components/common/Dot.js                   | 16 +++---
 components/common/Dot.module.css           |  7 ++-
 components/metrics/BarChart.js             | 42 ++--------------
 components/metrics/BarChart.module.css     | 57 ----------------------
 components/metrics/ChartTooltip.js         | 26 ++++++++++
 components/metrics/ChartTooltip.module.css | 43 ++++++++++++++++
 components/metrics/EventsChart.js          |  7 ++-
 components/metrics/Legend.js               | 40 +++++++++++++++
 components/metrics/Legend.module.css       | 21 ++++++++
 components/metrics/MetricsBar.js           |  2 +-
 components/metrics/WebsiteChart.js         |  2 +-
 package.json                               |  2 +-
 12 files changed, 157 insertions(+), 108 deletions(-)
 create mode 100644 components/metrics/ChartTooltip.js
 create mode 100644 components/metrics/ChartTooltip.module.css
 create mode 100644 components/metrics/Legend.js
 create mode 100644 components/metrics/Legend.module.css

diff --git a/components/common/Dot.js b/components/common/Dot.js
index 3f424820..d5dcf914 100644
--- a/components/common/Dot.js
+++ b/components/common/Dot.js
@@ -4,12 +4,14 @@ import styles from './Dot.module.css';
 
 export default function Dot({ color, size, className }) {
   return (
-    <div
-      style={{ background: color }}
-      className={classNames(styles.dot, className, {
-        [styles.small]: size === 'small',
-        [styles.large]: size === 'large',
-      })}
-    />
+    <div className={styles.wrapper}>
+      <div
+        style={{ background: color }}
+        className={classNames(styles.dot, className, {
+          [styles.small]: size === 'small',
+          [styles.large]: size === 'large',
+        })}
+      />
+    </div>
   );
 }
diff --git a/components/common/Dot.module.css b/components/common/Dot.module.css
index 9081dc5c..258d6e87 100644
--- a/components/common/Dot.module.css
+++ b/components/common/Dot.module.css
@@ -1,9 +1,14 @@
+.wrapper {
+  background: var(--gray50);
+  margin-right: 10px;
+  border-radius: 100%;
+}
+
 .dot {
   background: var(--green400);
   width: 10px;
   height: 10px;
   border-radius: 100%;
-  margin-right: 10px;
 }
 
 .dot.small {
diff --git a/components/metrics/BarChart.js b/components/metrics/BarChart.js
index 2f99fa28..1bd9ce65 100644
--- a/components/metrics/BarChart.js
+++ b/components/metrics/BarChart.js
@@ -1,14 +1,14 @@
 import React, { useState, useRef, useEffect } from 'react';
-import ReactTooltip from 'react-tooltip';
 import classNames from 'classnames';
 import ChartJS from 'chart.js';
-import Dot from 'components/common/Dot';
+import Legend from 'components/metrics/Legend';
 import { formatLongNumber } from 'lib/format';
 import { dateFormat } from 'lib/lang';
 import useLocale from 'hooks/useLocale';
 import useTheme from 'hooks/useTheme';
 import { DEFAUL_CHART_HEIGHT, DEFAULT_ANIMATION_DURATION, THEME_COLORS } from 'lib/constants';
 import styles from './BarChart.module.css';
+import ChartTooltip from './ChartTooltip';
 
 export default function BarChart({
   chartId,
@@ -25,7 +25,6 @@ export default function BarChart({
 }) {
   const canvas = useRef();
   const chart = useRef();
-  const [legend, setLegend] = useState();
   const [tooltip, setTooltip] = useState(null);
   const [locale] = useLocale();
   const [theme] = useTheme();
@@ -143,7 +142,6 @@ export default function BarChart({
               callback: renderYLabel,
               beginAtZero: true,
               fontColor: colors.text,
-              precision: 0,
             },
             gridLines: {
               color: colors.line,
@@ -164,8 +162,6 @@ export default function BarChart({
       },
       options,
     });
-
-    chart.current.generateLegend();
   }
 
   function updateChart() {
@@ -184,8 +180,6 @@ export default function BarChart({
     onUpdate(chart.current);
 
     chart.current.update();
-
-    chart.current.generateLegend();
   }
 
   useEffect(() => {
@@ -196,7 +190,6 @@ export default function BarChart({
         setTooltip(null);
         updateChart();
       }
-      setLegend({ ...chart.current.legend });
     }
   }, [datasets, unit, animationDuration, locale, theme]);
 
@@ -210,35 +203,8 @@ export default function BarChart({
       >
         <canvas ref={canvas} />
       </div>
-      <Legend items={legend?.legendItems} locale={locale} />
-      <ReactTooltip id={`${chartId}-tooltip`}>
-        {tooltip ? <Tooltip {...tooltip} /> : null}
-      </ReactTooltip>
+      <Legend chart={chart.current} />
+      <ChartTooltip chartId={chartId} tooltip={tooltip} />
     </>
   );
 }
-
-const Legend = ({ items = [], locale }) => (
-  <div className={styles.legend}>
-    {items.map(({ text, fillStyle }) => (
-      <div key={text} className={styles.label}>
-        <Dot color={fillStyle} />
-        <span className={locale}>{text}</span>
-      </div>
-    ))}
-  </div>
-);
-
-const Tooltip = ({ title, value, label, labelColor }) => (
-  <div className={styles.tooltip}>
-    <div className={styles.content}>
-      <div className={styles.title}>{title}</div>
-      <div className={styles.metric}>
-        <div className={styles.dot}>
-          <div className={styles.color} style={{ backgroundColor: labelColor }} />
-        </div>
-        {value} {label}
-      </div>
-    </div>
-  </div>
-);
diff --git a/components/metrics/BarChart.module.css b/components/metrics/BarChart.module.css
index 2c394e83..aea86a4c 100644
--- a/components/metrics/BarChart.module.css
+++ b/components/metrics/BarChart.module.css
@@ -1,60 +1,3 @@
 .chart {
   position: relative;
 }
-
-.tooltip {
-  color: var(--msgColor);
-  pointer-events: none;
-  z-index: 1;
-}
-
-.content {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-}
-
-.title {
-  font-size: var(--font-size-xsmall);
-  font-weight: 600;
-}
-
-.metric {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: var(--font-size-small);
-  font-weight: 600;
-}
-
-.dot {
-  position: relative;
-  overflow: hidden;
-  border-radius: 100%;
-  margin-right: 8px;
-  background: var(--gray50);
-}
-
-.color {
-  width: 10px;
-  height: 10px;
-}
-
-.legend {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-  margin-top: 10px;
-}
-
-.label {
-  display: flex;
-  align-items: center;
-  font-size: var(--font-size-xsmall);
-}
-
-.label + .label {
-  margin-left: 20px;
-}
diff --git a/components/metrics/ChartTooltip.js b/components/metrics/ChartTooltip.js
new file mode 100644
index 00000000..fb290b66
--- /dev/null
+++ b/components/metrics/ChartTooltip.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import Dot from 'components/common/Dot';
+import styles from './ChartTooltip.module.css';
+import ReactTooltip from 'react-tooltip';
+
+export default function ChartTooltip({ chartId, tooltip }) {
+  if (!tooltip) {
+    return null;
+  }
+
+  const { title, value, label, labelColor } = tooltip;
+
+  return (
+    <ReactTooltip id={`${chartId}-tooltip`}>
+      <div className={styles.tooltip}>
+        <div className={styles.content}>
+          <div className={styles.title}>{title}</div>
+          <div className={styles.metric}>
+            <Dot color={labelColor} />
+            {value} {label}
+          </div>
+        </div>
+      </div>
+    </ReactTooltip>
+  );
+}
diff --git a/components/metrics/ChartTooltip.module.css b/components/metrics/ChartTooltip.module.css
new file mode 100644
index 00000000..cd26d3af
--- /dev/null
+++ b/components/metrics/ChartTooltip.module.css
@@ -0,0 +1,43 @@
+.chart {
+  position: relative;
+}
+
+.tooltip {
+  color: var(--msgColor);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.title {
+  font-size: var(--font-size-xsmall);
+  font-weight: 600;
+}
+
+.metric {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: var(--font-size-small);
+  font-weight: 600;
+}
+
+.dot {
+  position: relative;
+  overflow: hidden;
+  border-radius: 100%;
+  margin-right: 8px;
+  background: var(--gray50);
+}
+
+.color {
+  width: 10px;
+  height: 10px;
+}
diff --git a/components/metrics/EventsChart.js b/components/metrics/EventsChart.js
index 3d55a40d..dfaa424a 100644
--- a/components/metrics/EventsChart.js
+++ b/components/metrics/EventsChart.js
@@ -16,7 +16,7 @@ export default function EventsChart({ websiteId, className, token }) {
   const { query } = usePageQuery();
   const shareToken = useShareToken();
 
-  const { data } = useFetch(
+  const { data, loading } = useFetch(
     `/api/website/${websiteId}/events`,
     {
       params: {
@@ -31,8 +31,10 @@ export default function EventsChart({ websiteId, className, token }) {
     },
     [modified],
   );
+
   const datasets = useMemo(() => {
     if (!data) return [];
+    if (loading) return data;
 
     const map = data.reduce((obj, { x, t, y }) => {
       if (!obj[x]) {
@@ -59,7 +61,7 @@ export default function EventsChart({ websiteId, className, token }) {
         borderWidth: 1,
       };
     });
-  }, [data]);
+  }, [data, loading]);
 
   function handleUpdate(chart) {
     chart.data.datasets = datasets;
@@ -79,6 +81,7 @@ export default function EventsChart({ websiteId, className, token }) {
       unit={unit}
       records={getDateLength(startDate, endDate, unit)}
       onUpdate={handleUpdate}
+      loading={loading}
       stacked
     />
   );
diff --git a/components/metrics/Legend.js b/components/metrics/Legend.js
new file mode 100644
index 00000000..a40ff411
--- /dev/null
+++ b/components/metrics/Legend.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import classNames from 'classnames';
+import Dot from 'components/common/Dot';
+import useLocale from 'hooks/useLocale';
+import styles from './Legend.module.css';
+import useForceUpdate from '../../hooks/useForceUpdate';
+
+export default function Legend({ chart }) {
+  const [locale] = useLocale();
+  const forceUpdate = useForceUpdate();
+
+  function handleClick(index) {
+    const meta = chart.getDatasetMeta(index);
+
+    meta.hidden = meta.hidden === null ? !chart.data.datasets[index].hidden : null;
+
+    chart.update();
+
+    forceUpdate();
+  }
+
+  if (!chart?.legend?.legendItems.find(({ text }) => text)) {
+    return null;
+  }
+
+  return (
+    <div className={styles.legend}>
+      {chart.legend.legendItems.map(({ text, fillStyle, datasetIndex, hidden }) => (
+        <div
+          key={text}
+          className={classNames(styles.label, { [styles.hidden]: hidden })}
+          onClick={() => handleClick(datasetIndex)}
+        >
+          <Dot color={fillStyle} />
+          <span className={locale}>{text}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/components/metrics/Legend.module.css b/components/metrics/Legend.module.css
new file mode 100644
index 00000000..faa197e3
--- /dev/null
+++ b/components/metrics/Legend.module.css
@@ -0,0 +1,21 @@
+.legend {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-top: 10px;
+}
+
+.label {
+  display: flex;
+  align-items: center;
+  font-size: var(--font-size-xsmall);
+  cursor: pointer;
+}
+
+.label + .label {
+  margin-left: 20px;
+}
+
+.hidden {
+  color: var(--gray400);
+}
diff --git a/components/metrics/MetricsBar.js b/components/metrics/MetricsBar.js
index 33b6eaad..886ee5f0 100644
--- a/components/metrics/MetricsBar.js
+++ b/components/metrics/MetricsBar.js
@@ -31,7 +31,7 @@ export default function MetricsBar({ websiteId, className }) {
       },
       headers: { [TOKEN_HEADER]: shareToken?.token },
     },
-    [modified],
+    [url, modified],
   );
 
   const formatFunc = format ? formatLongNumber : formatNumber;
diff --git a/components/metrics/WebsiteChart.js b/components/metrics/WebsiteChart.js
index 07ba5161..fb8bdf8f 100644
--- a/components/metrics/WebsiteChart.js
+++ b/components/metrics/WebsiteChart.js
@@ -47,7 +47,7 @@ export default function WebsiteChart({
       onDataLoad,
       headers: { [TOKEN_HEADER]: shareToken?.token },
     },
-    [modified],
+    [url, modified],
   );
 
   const chartData = useMemo(() => {
diff --git a/package.json b/package.json
index 1f26ba1e..7532b1da 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "umami",
-  "version": "0.96.0",
+  "version": "1.0.0",
   "description": "A simple, fast, website analytics alternative to Google Analytics. ",
   "author": "Mike Cao <mike@mikecao.com>",
   "license": "MIT",

From 2abcd9f2b5b49d3988b53089b129bb1fc5bcc2d8 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Thu, 15 Oct 2020 09:10:59 -0700
Subject: [PATCH 5/9] Fix legend rendering.

---
 components/metrics/BarChart.js    | 5 +++++
 components/metrics/EventsChart.js | 1 +
 2 files changed, 6 insertions(+)

diff --git a/components/metrics/BarChart.js b/components/metrics/BarChart.js
index 1bd9ce65..f42cf73f 100644
--- a/components/metrics/BarChart.js
+++ b/components/metrics/BarChart.js
@@ -9,6 +9,7 @@ import useTheme from 'hooks/useTheme';
 import { DEFAUL_CHART_HEIGHT, DEFAULT_ANIMATION_DURATION, THEME_COLORS } from 'lib/constants';
 import styles from './BarChart.module.css';
 import ChartTooltip from './ChartTooltip';
+import useForceUpdate from '../../hooks/useForceUpdate';
 
 export default function BarChart({
   chartId,
@@ -28,6 +29,8 @@ export default function BarChart({
   const [tooltip, setTooltip] = useState(null);
   const [locale] = useLocale();
   const [theme] = useTheme();
+  const forceUpdate = useForceUpdate();
+
   const colors = {
     text: THEME_COLORS[theme].gray700,
     line: THEME_COLORS[theme].gray200,
@@ -180,6 +183,8 @@ export default function BarChart({
     onUpdate(chart.current);
 
     chart.current.update();
+
+    forceUpdate();
   }
 
   useEffect(() => {
diff --git a/components/metrics/EventsChart.js b/components/metrics/EventsChart.js
index dfaa424a..68556c96 100644
--- a/components/metrics/EventsChart.js
+++ b/components/metrics/EventsChart.js
@@ -79,6 +79,7 @@ export default function EventsChart({ websiteId, className, token }) {
       className={className}
       datasets={datasets}
       unit={unit}
+      height={300}
       records={getDateLength(startDate, endDate, unit)}
       onUpdate={handleUpdate}
       loading={loading}

From b167c923b74c20ee7f3b8be15755ce182061b7fd Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Thu, 15 Oct 2020 17:22:49 -0700
Subject: [PATCH 6/9] Formatting.

---
 lang/zh-CN.json | 196 ++++++++++++++++++++++++------------------------
 1 file changed, 98 insertions(+), 98 deletions(-)

diff --git a/lang/zh-CN.json b/lang/zh-CN.json
index 22b1be5b..101cd6cd 100644
--- a/lang/zh-CN.json
+++ b/lang/zh-CN.json
@@ -1,99 +1,99 @@
 {
-    "label.accounts": "账户",
-    "label.add-account": "添加账户",
-    "label.add-website": "添加网站",
-    "label.administrator": "管理员",
-    "label.all": "所有",
-    "label.all-websites": "全部网站",
-    "label.back": "返回",
-    "label.cancel": "取消",
-    "label.change-password": "更新密码",
-    "label.confirm-password": "确认密码",
-    "label.copy-to-clipboard": "复制",
-    "label.current-password": "目前密码",
-    "label.custom-range": "自定义时间段",
-    "label.dashboard": "仪表板",
-    "label.date-range": "多日",
-    "label.default-date-range": "默认日期范围",
-    "label.delete": "删除",
-    "label.delete-account": "删除账户",
-    "label.delete-website": "删除网站",
-    "label.dismiss": "关闭",
-    "label.domain": "域名",
-    "label.edit": "编辑",
-    "label.edit-account": "编辑账户",
-    "label.edit-website": "编辑网站",
-    "label.enable-share-url": "激活共享链接",
-    "label.invalid": "输入无效",
-    "label.invalid-domain": "无效域名",
-    "label.last-days": "最近 {x} 天",
-    "label.last-hours": "最近 {x} 小时",
-    "label.logged-in-as": "登录名: {username}",
-    "label.login": "登录",
-    "label.logout": "退出",
-    "label.more": "更多",
-    "label.name": "名字",
-    "label.new-password": "新密码",
-    "label.password": "密码",
-    "label.passwords-dont-match": "密码不一致",
-    "label.profile": "个人资料",
-    "label.realtime": "实时",
-    "label.realtime-logs": "实时日志",
-    "label.refresh": "刷新",
-    "label.required": "必填",
-    "label.reset": "重置",
-    "label.save": "保存",
-    "label.settings": "设置",
-    "label.share-url": "共享链接",
-    "label.single-day": "单日",
-    "label.this-month": "本月",
-    "label.this-week": "本周",
-    "label.this-year": "今年",
-    "label.timezone": "时区",
-    "label.today": "今天",
-    "label.tracking-code": "跟踪代码",
-    "label.unknown": "未知",
-    "label.username": "用户名",
-    "label.view-details": "查看更多",
-    "label.websites": "网站",
-    "message.active-users": "当前在线 {x} 人",
-    "message.confirm-delete": "你确定要删除{target}吗?",
-    "message.copied": "复制成功!",
-    "message.delete-warning": "所有相关数据将会被删除.",
-    "message.failure": "出现错误.",
-    "message.get-share-url": "获得共享链接",
-    "message.get-tracking-code": "获得跟踪代码",
-    "message.go-to-settings": "去设置",
-    "message.incorrect-username-password": "用户名密码不正确.",
-    "message.log.visitor": "来自 {country} 的访客在搭载 {os} 的 {device} 上使用 {browser} 进行访问.",
-    "message.new-version-available": "umami 有新版本 {version} 发布啦！",
-    "message.no-data-available": "无可用数据.",
-    "message.no-websites-configured": "你还没有设置任何网站.",
-    "message.page-not-found": "网页未找到.",
-    "message.powered-by": "运行 {name}",
-    "message.save-success": "成功保存.",
-    "message.share-url": "这是 {target} 的共享链接.",
-    "message.track-stats": "把以下代码放到你的网站的{head}部分来收集{target}的数据.",
-    "message.type-delete": "在下面空格输入{delete}确认",
-    "metrics.actions": "用户行为",
-    "metrics.average-visit-time": "平均访问时间",
-    "metrics.bounce-rate": "跳出率",
-    "metrics.browsers": "浏览器",
-    "metrics.countries": "国家",
-    "metrics.device.desktop": "台式机",
-    "metrics.device.laptop": "笔记本",
-    "metrics.device.mobile": "手机",
-    "metrics.device.tablet": "平板",
-    "metrics.devices": "设备",
-    "metrics.events": "行为类别",
-    "metrics.filter.combined": "总和",
-    "metrics.filter.domain-only": "只看域名",
-    "metrics.filter.raw": "原始",
-    "metrics.operating-systems": "操作系统",
-    "metrics.page-views": "页面流量",
-    "metrics.pages": "网页",
-    "metrics.referrers": "指入域名",
-    "metrics.unique-visitors": "独立访客",
-    "metrics.views": "页面流量",
-    "metrics.visitors": "独立访客"
-}
\ No newline at end of file
+  "label.accounts": "账户",
+  "label.add-account": "添加账户",
+  "label.add-website": "添加网站",
+  "label.administrator": "管理员",
+  "label.all": "所有",
+  "label.all-websites": "全部网站",
+  "label.back": "返回",
+  "label.cancel": "取消",
+  "label.change-password": "更新密码",
+  "label.confirm-password": "确认密码",
+  "label.copy-to-clipboard": "复制",
+  "label.current-password": "目前密码",
+  "label.custom-range": "自定义时间段",
+  "label.dashboard": "仪表板",
+  "label.date-range": "多日",
+  "label.default-date-range": "默认日期范围",
+  "label.delete": "删除",
+  "label.delete-account": "删除账户",
+  "label.delete-website": "删除网站",
+  "label.dismiss": "关闭",
+  "label.domain": "域名",
+  "label.edit": "编辑",
+  "label.edit-account": "编辑账户",
+  "label.edit-website": "编辑网站",
+  "label.enable-share-url": "激活共享链接",
+  "label.invalid": "输入无效",
+  "label.invalid-domain": "无效域名",
+  "label.last-days": "最近 {x} 天",
+  "label.last-hours": "最近 {x} 小时",
+  "label.logged-in-as": "登录名: {username}",
+  "label.login": "登录",
+  "label.logout": "退出",
+  "label.more": "更多",
+  "label.name": "名字",
+  "label.new-password": "新密码",
+  "label.password": "密码",
+  "label.passwords-dont-match": "密码不一致",
+  "label.profile": "个人资料",
+  "label.realtime": "实时",
+  "label.realtime-logs": "实时日志",
+  "label.refresh": "刷新",
+  "label.required": "必填",
+  "label.reset": "重置",
+  "label.save": "保存",
+  "label.settings": "设置",
+  "label.share-url": "共享链接",
+  "label.single-day": "单日",
+  "label.this-month": "本月",
+  "label.this-week": "本周",
+  "label.this-year": "今年",
+  "label.timezone": "时区",
+  "label.today": "今天",
+  "label.tracking-code": "跟踪代码",
+  "label.unknown": "未知",
+  "label.username": "用户名",
+  "label.view-details": "查看更多",
+  "label.websites": "网站",
+  "message.active-users": "当前在线 {x} 人",
+  "message.confirm-delete": "你确定要删除{target}吗?",
+  "message.copied": "复制成功!",
+  "message.delete-warning": "所有相关数据将会被删除.",
+  "message.failure": "出现错误.",
+  "message.get-share-url": "获得共享链接",
+  "message.get-tracking-code": "获得跟踪代码",
+  "message.go-to-settings": "去设置",
+  "message.incorrect-username-password": "用户名密码不正确.",
+  "message.log.visitor": "来自 {country} 的访客在搭载 {os} 的 {device} 上使用 {browser} 进行访问.",
+  "message.new-version-available": "umami 有新版本 {version} 发布啦！",
+  "message.no-data-available": "无可用数据.",
+  "message.no-websites-configured": "你还没有设置任何网站.",
+  "message.page-not-found": "网页未找到.",
+  "message.powered-by": "运行 {name}",
+  "message.save-success": "成功保存.",
+  "message.share-url": "这是 {target} 的共享链接.",
+  "message.track-stats": "把以下代码放到你的网站的{head}部分来收集{target}的数据.",
+  "message.type-delete": "在下面空格输入{delete}确认",
+  "metrics.actions": "用户行为",
+  "metrics.average-visit-time": "平均访问时间",
+  "metrics.bounce-rate": "跳出率",
+  "metrics.browsers": "浏览器",
+  "metrics.countries": "国家",
+  "metrics.device.desktop": "台式机",
+  "metrics.device.laptop": "笔记本",
+  "metrics.device.mobile": "手机",
+  "metrics.device.tablet": "平板",
+  "metrics.devices": "设备",
+  "metrics.events": "行为类别",
+  "metrics.filter.combined": "总和",
+  "metrics.filter.domain-only": "只看域名",
+  "metrics.filter.raw": "原始",
+  "metrics.operating-systems": "操作系统",
+  "metrics.page-views": "页面流量",
+  "metrics.pages": "网页",
+  "metrics.referrers": "指入域名",
+  "metrics.unique-visitors": "独立访客",
+  "metrics.views": "页面流量",
+  "metrics.visitors": "独立访客"
+}

From 90fa656d409377b6779ac2c5ac69dae2e43b9197 Mon Sep 17 00:00:00 2001
From: Boris Kubiak <kubiakboris@gmail.com>
Date: Wed, 21 Oct 2020 15:44:43 +0200
Subject: [PATCH 7/9] Add favicon to websites

---
 components/common/Favicon.js           | 21 +++++++++++++++++++++
 components/common/Favicon.module.css   |  3 +++
 components/metrics/WebsiteChart.js     |  3 ++-
 components/metrics/WebsiteHeader.js    |  8 ++++++--
 components/pages/TestConsole.js        |  7 ++++++-
 components/pages/WebsiteDetails.js     |  1 +
 components/pages/WebsiteList.js        |  4 ++--
 components/settings/WebsiteSettings.js |  4 +++-
 8 files changed, 44 insertions(+), 7 deletions(-)
 create mode 100644 components/common/Favicon.js
 create mode 100644 components/common/Favicon.module.css

diff --git a/components/common/Favicon.js b/components/common/Favicon.js
new file mode 100644
index 00000000..07ec696c
--- /dev/null
+++ b/components/common/Favicon.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import styles from './Favicon.module.css';
+
+function getHostName(url) {
+  const match = url.match(/^(?:https?:\/\/)?(?:[^@\n]+@)?(?:www\.)?([^:/\n?=]+)/im);
+  return match && match.length > 1 ? match[1] : null;
+}
+
+export default function Favicon({ domain, ...props }) {
+  const hostName = domain ? getHostName(domain) : null;
+
+  return hostName ? (
+    <img
+      className={styles.favicon}
+      src={`https://icons.duckduckgo.com/ip3/${hostName}.ico`}
+      height="16"
+      alt=""
+      {...props}
+    />
+  ) : null;
+}
diff --git a/components/common/Favicon.module.css b/components/common/Favicon.module.css
new file mode 100644
index 00000000..82c85c42
--- /dev/null
+++ b/components/common/Favicon.module.css
@@ -0,0 +1,3 @@
+.favicon {
+  margin-right: 8px;
+}
diff --git a/components/metrics/WebsiteChart.js b/components/metrics/WebsiteChart.js
index 07ba5161..a5390f78 100644
--- a/components/metrics/WebsiteChart.js
+++ b/components/metrics/WebsiteChart.js
@@ -20,6 +20,7 @@ import { TOKEN_HEADER } from '../../lib/constants';
 export default function WebsiteChart({
   websiteId,
   title,
+  domain,
   stickyHeader = false,
   showLink = false,
   onDataLoad = () => {},
@@ -66,7 +67,7 @@ export default function WebsiteChart({
 
   return (
     <div className={styles.container}>
-      <WebsiteHeader websiteId={websiteId} title={title} showLink={showLink} />
+      <WebsiteHeader websiteId={websiteId} title={title} domain={domain} showLink={showLink} />
       <div className={classNames(styles.header, 'row')}>
         <StickyHeader
           className={classNames(styles.metrics, 'col row')}
diff --git a/components/metrics/WebsiteHeader.js b/components/metrics/WebsiteHeader.js
index 803d18cc..d5015d7c 100644
--- a/components/metrics/WebsiteHeader.js
+++ b/components/metrics/WebsiteHeader.js
@@ -4,14 +4,18 @@ import Link from 'components/common/Link';
 import PageHeader from 'components/layout/PageHeader';
 import RefreshButton from 'components/common/RefreshButton';
 import ButtonLayout from 'components/layout/ButtonLayout';
+import Favicon from 'components/common/Favicon';
 import ActiveUsers from './ActiveUsers';
 import Arrow from 'assets/arrow-right.svg';
 import styles from './WebsiteHeader.module.css';
 
-export default function WebsiteHeader({ websiteId, title, showLink = false }) {
+export default function WebsiteHeader({ websiteId, title, domain, showLink = false }) {
   return (
     <PageHeader>
-      <div className={styles.title}>{title}</div>
+      <div className={styles.title}>
+        <Favicon domain={domain} />
+        {title}
+      </div>
       <ActiveUsers className={styles.active} websiteId={websiteId} />
       <ButtonLayout align="right">
         <RefreshButton websiteId={websiteId} />
diff --git a/components/pages/TestConsole.js b/components/pages/TestConsole.js
index fef6c620..b715b4a8 100644
--- a/components/pages/TestConsole.js
+++ b/components/pages/TestConsole.js
@@ -82,7 +82,12 @@ export default function TestConsole() {
           </div>
           <div className="row">
             <div className="col-12">
-              <WebsiteChart websiteId={website.website_id} title={website.name} showLink />
+              <WebsiteChart
+                websiteId={website.website_id}
+                title={website.name}
+                domain={website.domain}
+                showLink
+              />
               <PageHeader>Events</PageHeader>
               <EventsChart websiteId={website.website_id} />
             </div>
diff --git a/components/pages/WebsiteDetails.js b/components/pages/WebsiteDetails.js
index 6c310909..81cde3ad 100644
--- a/components/pages/WebsiteDetails.js
+++ b/components/pages/WebsiteDetails.js
@@ -120,6 +120,7 @@ export default function WebsiteDetails({ websiteId }) {
           <WebsiteChart
             websiteId={websiteId}
             title={data.name}
+            domain={data.domain}
             onDataLoad={handleDataLoad}
             showLink={false}
             stickyHeader
diff --git a/components/pages/WebsiteList.js b/components/pages/WebsiteList.js
index cd96ae9f..03552470 100644
--- a/components/pages/WebsiteList.js
+++ b/components/pages/WebsiteList.js
@@ -17,9 +17,9 @@ export default function WebsiteList({ userId }) {
 
   return (
     <Page>
-      {data.map(({ website_id, name }) => (
+      {data.map(({ website_id, name, domain }) => (
         <div key={website_id} className={styles.website}>
-          <WebsiteChart websiteId={website_id} title={name} showLink />
+          <WebsiteChart websiteId={website_id} title={name} domain={domain} showLink />
         </div>
       ))}
       {data.length === 0 && (
diff --git a/components/settings/WebsiteSettings.js b/components/settings/WebsiteSettings.js
index 0ff6246d..686605f2 100644
--- a/components/settings/WebsiteSettings.js
+++ b/components/settings/WebsiteSettings.js
@@ -13,6 +13,7 @@ import ShareUrlForm from 'components/forms/ShareUrlForm';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
 import ButtonLayout from 'components/layout/ButtonLayout';
 import Toast from 'components/common/Toast';
+import Favicon from 'components/common/Favicon';
 import Pen from 'assets/pen.svg';
 import Trash from 'assets/trash.svg';
 import Plus from 'assets/plus.svg';
@@ -60,8 +61,9 @@ export default function WebsiteSettings() {
     </ButtonLayout>
   );
 
-  const DetailsLink = ({ website_id, name }) => (
+  const DetailsLink = ({ website_id, name, domain }) => (
     <Link href="/website/[...id]" as={`/website/${website_id}/${name}`}>
+      <Favicon domain={domain} />
       {name}
     </Link>
   );

From f34c8f8ec86888dc4db6e6e143ffb34caed650aa Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Wed, 21 Oct 2020 16:14:51 -0700
Subject: [PATCH 8/9] Update filters and sorting.

---
 components/metrics/MetricsTable.js |  5 +++--
 lib/filters.js                     | 11 +++--------
 2 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/components/metrics/MetricsTable.js b/components/metrics/MetricsTable.js
index 16f61836..25bb4a08 100644
--- a/components/metrics/MetricsTable.js
+++ b/components/metrics/MetricsTable.js
@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
+import firstBy from 'thenby';
 import classNames from 'classnames';
 import Link from 'components/common/Link';
 import Loading from 'components/common/Loading';
@@ -55,9 +56,9 @@ export default function MetricsTable({
     if (data) {
       const items = percentFilter(dataFilter ? dataFilter(data, filterOptions) : data);
       if (limit) {
-        return items.filter((e, i) => i < limit);
+        return items.filter((e, i) => i < limit).sort(firstBy('y', -1).thenBy('x'));
       }
-      return items;
+      return items.sort(firstBy('y', -1).thenBy('x'));
     }
     return [];
   }, [data, error, dataFilter, filterOptions]);
diff --git a/lib/filters.js b/lib/filters.js
index 7fd5d833..d4853618 100644
--- a/lib/filters.js
+++ b/lib/filters.js
@@ -1,4 +1,3 @@
-import firstBy from 'thenby';
 import { BROWSERS } from './constants';
 import { removeTrailingSlash, removeWWW, getDomainName } from './url';
 
@@ -43,9 +42,7 @@ export const urlFilter = (data, { raw }) => {
     return obj;
   }, {});
 
-  return Object.keys(map)
-    .map(key => ({ x: key, y: map[key] }))
-    .sort(firstBy('y', -1).thenBy('x'));
+  return Object.keys(map).map(key => ({ x: key, y: map[key] }));
 };
 
 export const refFilter = (data, { domain, domainOnly, raw }) => {
@@ -70,7 +67,7 @@ export const refFilter = (data, { domain, domainOnly, raw }) => {
       }
 
       if (domainOnly && hostname) {
-        return hostname;
+        return removeWWW(hostname);
       }
 
       if (!origin || origin === 'null') {
@@ -113,9 +110,7 @@ export const refFilter = (data, { domain, domainOnly, raw }) => {
     return obj;
   }, {});
 
-  return Object.keys(map)
-    .map(key => ({ x: key, y: map[key], w: links[key] }))
-    .sort(firstBy('y', -1).thenBy('x'));
+  return Object.keys(map).map(key => ({ x: key, y: map[key], w: links[key] }));
 };
 
 export const browserFilter = data =>

From dec5965c6168300fc5ec909510e5ea276a9ee2d6 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Wed, 21 Oct 2020 19:35:59 -0700
Subject: [PATCH 9/9] Moved files.

---
 scripts/lang-ignore.json => lang-ignore.json | 0
 scripts/check-lang.js                        | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename scripts/lang-ignore.json => lang-ignore.json (100%)

diff --git a/scripts/lang-ignore.json b/lang-ignore.json
similarity index 100%
rename from scripts/lang-ignore.json
rename to lang-ignore.json
diff --git a/scripts/check-lang.js b/scripts/check-lang.js
index 67b4b8a4..b843efeb 100644
--- a/scripts/check-lang.js
+++ b/scripts/check-lang.js
@@ -2,7 +2,7 @@ const fs = require('fs');
 const path = require('path');
 const chalk = require('chalk');
 const messages = require('../lang/en-US.json');
-const ignore = require('./lang-ignore.json');
+const ignore = require('../lang-ignore.json');
 
 const dir = path.resolve(__dirname, '../lang');
 const files = fs.readdirSync(dir);