Merge pull request #324 from mikecao/dev

v1.0.0 Legend labels

.gitignore

@@ -23,6 +23,7 @@
 .DS_Store
 .idea
 *.iml
+*.log
 .vscode/*
 
 # debug

components/common/Dot.js

@@ -4,6 +4,7 @@ import styles from './Dot.module.css';
 
 export default function Dot({ color, size, className }) {
   return (
+    <div className={styles.wrapper}>
       <div
         style={{ background: color }}
         className={classNames(styles.dot, className, {
@@ -11,5 +12,6 @@ export default function Dot({ color, size, className }) {
           [styles.large]: size === 'large',
         })}
       />
+    </div>
   );
 }

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 {

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;
+}

components/common/Favicon.module.css

@@ -0,0 +1,3 @@
+.favicon {
+  margin-right: 8px;
+}

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%;

components/metrics/BarChart.js

@@ -1,13 +1,15 @@
 import React, { useState, useRef, useEffect } from 'react';
-import ReactTooltip from 'react-tooltip';
 import classNames from 'classnames';
 import ChartJS from 'chart.js';
+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';
+import useForceUpdate from '../../hooks/useForceUpdate';
 
 export default function BarChart({
   chartId,
@@ -27,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,
@@ -111,9 +115,7 @@ export default function BarChart({
       responsiveAnimationDuration: 0,
       maintainAspectRatio: false,
       legend: {
-        labels: {
-          fontColor: colors.text,
-        },
+        display: false,
       },
       scales: {
         xAxes: [
@@ -179,6 +181,10 @@ export default function BarChart({
     options.tooltips.custom = renderTooltip;
 
     onUpdate(chart.current);
+
+    chart.current.update();
+
+    forceUpdate();
   }
 
   useEffect(() => {
@@ -202,23 +208,8 @@ export default function BarChart({
       >
         <canvas ref={canvas} />
       </div>
-      <ReactTooltip id={`${chartId}-tooltip`}>
-        {tooltip ? <Tooltip {...tooltip} /> : null}
-      </ReactTooltip>
+      <Legend chart={chart.current} />
+      <ChartTooltip chartId={chartId} tooltip={tooltip} />
     </>
   );
 }
-
-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>
-);

components/metrics/BarChart.module.css

@@ -1,43 +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;
-}

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>
+  );
+}

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;
+}

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,15 +61,7 @@ export default function EventsChart({ websiteId, className, token }) {
         borderWidth: 1,
       };
     });
-  }, [data]);
-
-  function handleCreate(options) {
-    const legend = {
-      position: 'bottom',
-    };
-
-    options.legend = legend;
-  }
+  }, [data, loading]);
 
   function handleUpdate(chart) {
     chart.data.datasets = datasets;
@@ -85,9 +79,10 @@ export default function EventsChart({ websiteId, className, token }) {
       className={className}
       datasets={datasets}
       unit={unit}
+      height={300}
       records={getDateLength(startDate, endDate, unit)}
-      onCreate={handleCreate}
       onUpdate={handleUpdate}
+      loading={loading}
       stacked
     />
   );

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>
+  );
+}

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);
+}

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;

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]);

components/metrics/PageviewsChart.js

@@ -45,8 +45,6 @@ export default function PageviewsChart({
       id: 'metrics.page-views',
       defaultMessage: 'Page views',
     });
-
-    chart.update();
   };
 
   if (!data) {

components/metrics/RealtimeHeader.module.css

@@ -1,3 +1,4 @@
 .metrics {
   display: flex;
+  margin-bottom: 10px;
 }

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>

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 = () => {},
@@ -47,7 +48,7 @@ export default function WebsiteChart({
       onDataLoad,
       headers: { [TOKEN_HEADER]: shareToken?.token },
     },
-    [modified],
+    [url, modified],
   );
 
   const chartData = useMemo(() => {
@@ -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')}

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} />

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>

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

components/pages/WebsiteDetails.module.css

@@ -31,5 +31,5 @@
 }
 
 .eventschart {
-  padding: 30px 0;
+  padding-top: 30px;
 }

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 && (

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>
   );

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 =>

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",

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);
@@ -13,7 +13,8 @@ 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];
       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!**');
+    }
   }
 });