Merge pull request #916 from mikecao/dev

v1.25.0

components/common/Button.js

@@ -24,6 +24,7 @@ function Button({
       data-tip={tooltip}
       data-effect="solid"
       data-for={tooltipId}
+      data-offset={JSON.stringify({ left: 10 })}
       type={type}
       className={classNames(styles.button, className, {
         [styles.large]: size === 'large',

components/common/Calendar.js

@@ -106,9 +106,14 @@ export default function Calendar({ date, minDate, maxDate, onChange }) {
 }
 
 const DaySelector = ({ date, minDate, maxDate, locale, onSelect }) => {
-  const startWeek = startOfWeek(date, { locale: getDateLocale(locale) });
-  const startMonth = startOfMonth(date, { locale: getDateLocale(locale) });
-  const startDay = subDays(startMonth, startMonth.getDay());
+  const dateLocale = getDateLocale(locale);
+  const weekStartsOn = dateLocale?.options?.weekStartsOn || 0;
+  const startWeek = startOfWeek(date, {
+    locale: dateLocale,
+    weekStartsOn,
+  });
+  const startMonth = startOfMonth(date);
+  const startDay = subDays(startMonth, startMonth.getDay() - weekStartsOn);
   const month = date.getMonth();
   const year = date.getFullYear();
 

components/common/DateFilter.js

@@ -6,7 +6,7 @@ import Modal from './Modal';
 import DropDown from './DropDown';
 import DatePickerForm from 'components/forms/DatePickerForm';
 import useLocale from 'hooks/useLocale';
-import { getDateRange, dateFormat } from 'lib/date';
+import { dateFormat } from 'lib/date';
 import Calendar from 'assets/calendar-alt.svg';
 import Icon from './Icon';
 
@@ -47,6 +47,11 @@ const filterOptions = [
     value: '90day',
   },
   { label: <FormattedMessage id="label.this-year" defaultMessage="This year" />, value: '1year' },
+  {
+    label: <FormattedMessage id="label.all-time" defaultMessage="All time" />,
+    value: 'all',
+    divider: true,
+  },
   {
     label: <FormattedMessage id="label.custom-range" defaultMessage="Custom range" />,
     value: 'custom',
@@ -55,7 +60,6 @@ const filterOptions = [
 ];
 
 function DateFilter({ value, startDate, endDate, onChange, className }) {
-  const { locale } = useLocale();
   const [showPicker, setShowPicker] = useState(false);
   const displayValue =
     value === 'custom' ? (
@@ -64,12 +68,12 @@ function DateFilter({ value, startDate, endDate, onChange, className }) {
       value
     );
 
-  function handleChange(value) {
+  async function handleChange(value) {
     if (value === 'custom') {
       setShowPicker(true);
       return;
     }
-    onChange(getDateRange(value, locale));
+    onChange(value);
   }
 
   function handlePickerChange(value) {

components/common/RefreshButton.js

@@ -7,20 +7,17 @@ import Button from './Button';
 import Refresh from 'assets/redo.svg';
 import Dots from 'assets/ellipsis-h.svg';
 import useDateRange from 'hooks/useDateRange';
-import { getDateRange } from '../../lib/date';
-import useLocale from 'hooks/useLocale';
 
 function RefreshButton({ websiteId }) {
   const dispatch = useDispatch();
-  const { locale } = useLocale();
   const [dateRange] = useDateRange(websiteId);
   const [loading, setLoading] = useState(false);
   const completed = useSelector(state => state.queries[`/api/website/${websiteId}/stats`]);
 
   function handleClick() {
     if (dateRange) {
       setLoading(true);
-      dispatch(setDateRange(websiteId, getDateRange(dateRange.value, locale)));
+      dispatch(setDateRange(websiteId, dateRange));
     }
   }
 

components/common/WorldMap.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import ReactTooltip from 'react-tooltip';
 import { ComposableMap, Geographies, Geography, ZoomableGroup } from 'react-simple-maps';
 import classNames from 'classnames';
-import tinycolor from 'tinycolor2';
+import { colord } from 'colord';
 import useTheme from 'hooks/useTheme';
 import { ISO_COUNTRIES, THEME_COLORS, MAP_FILE } from 'lib/constants';
 import styles from './WorldMap.module.css';
@@ -35,9 +35,9 @@ function WorldMap({ data, className }) {
       return colors.fillColor;
     }
 
-    return tinycolor(colors.baseColor)[theme === 'light' ? 'lighten' : 'darken'](
-      40 * (1.0 - country.z / 100),
-    );
+    return colord(colors.baseColor)
+      [theme === 'light' ? 'lighten' : 'darken'](0.4 * (1.0 - country.z / 100))
+      .toHex();
   }
 
   function getOpacity(code) {

components/metrics/BarChart.js

@@ -6,10 +6,10 @@ import { formatLongNumber } from 'lib/format';
 import { dateFormat } from 'lib/date';
 import useLocale from 'hooks/useLocale';
 import useTheme from 'hooks/useTheme';
+import useForceUpdate from 'hooks/useForceUpdate';
 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,

components/metrics/EventsChart.js

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import tinycolor from 'tinycolor2';
+import { colord } from 'colord';
 import BarChart from './BarChart';
 import { getDateArray, getDateLength } from 'lib/date';
 import useFetch from 'hooks/useFetch';
@@ -51,13 +51,13 @@ export default function EventsChart({ websiteId, className, token }) {
     });
 
     return Object.keys(map).map((key, index) => {
-      const color = tinycolor(EVENT_COLORS[index % EVENT_COLORS.length]);
+      const color = colord(EVENT_COLORS[index % EVENT_COLORS.length]);
       return {
         label: key,
         data: map[key],
         lineTension: 0,
-        backgroundColor: color.setAlpha(0.6).toRgbString(),
-        borderColor: color.setAlpha(0.7).toRgbString(),
+        backgroundColor: color.alpha(0.6).toRgbString(),
+        borderColor: color.alpha(0.7).toRgbString(),
         borderWidth: 1,
       };
     });

components/metrics/LanguagesTable.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import MetricsTable from './MetricsTable';
+import { percentFilter } from 'lib/filters';
+import { FormattedMessage } from 'react-intl';
+import useLanguageNames from 'hooks/useLanguageNames';
+import useLocale from 'hooks/useLocale';
+
+export default function LanguagesTable({ websiteId, onDataLoad, ...props }) {
+  const { locale } = useLocale();
+  const languageNames = useLanguageNames(locale);
+
+  function renderLabel({ x }) {
+    return (
+      <div className={locale}>
+        {languageNames[x] ?? <FormattedMessage id="label.unknown" defaultMessage="Unknown" />}{' '}
+      </div>
+    );
+  }
+
+  return (
+    <MetricsTable
+      {...props}
+      title={<FormattedMessage id="metrics.languages" defaultMessage="Languages" />}
+      type="language"
+      metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
+      websiteId={websiteId}
+      onDataLoad={data => onDataLoad?.(percentFilter(data))}
+      renderLabel={renderLabel}
+    />
+  );
+}

components/metrics/Legend.js

@@ -1,9 +1,10 @@
 import React from 'react';
+import { colord } from 'colord';
 import classNames from 'classnames';
 import Dot from 'components/common/Dot';
 import useLocale from 'hooks/useLocale';
+import useForceUpdate from 'hooks/useForceUpdate';
 import styles from './Legend.module.css';
-import useForceUpdate from '../../hooks/useForceUpdate';
 
 export default function Legend({ chart }) {
   const { locale } = useLocale();
@@ -25,16 +26,20 @@ export default function Legend({ chart }) {
 
   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>
-      ))}
+      {chart.legend.legendItems.map(({ text, fillStyle, datasetIndex, hidden }) => {
+        const color = colord(fillStyle);
+
+        return (
+          <div
+            key={text}
+            className={classNames(styles.label, { [styles.hidden]: hidden })}
+            onClick={() => handleClick(datasetIndex)}
+          >
+            <Dot color={color.alpha(color.alpha() + 0.2).toHex()} />
+            <span className={locale}>{text}</span>
+          </div>
+        );
+      })}
     </div>
   );
 }

components/metrics/MetricCard.js

@@ -9,6 +9,7 @@ const MetricCard = ({
   label,
   reverseColors = false,
   format = formatNumber,
+  hideComparison = false,
 }) => {
   const props = useSpring({ x: Number(value) || 0, from: { x: 0 } });
   const changeProps = useSpring({ x: Number(change) || 0, from: { x: 0 } });
@@ -18,8 +19,8 @@ const MetricCard = ({
       <animated.div className={styles.value}>{props.x.interpolate(x => format(x))}</animated.div>
       <div className={styles.label}>
         {label}
-        {~~change === 0 && <span className={styles.change}>{format(0)}</span>}
-        {~~change !== 0 && (
+        {~~change === 0 && !hideComparison && <span className={styles.change}>{format(0)}</span>}
+        {~~change !== 0 && !hideComparison && (
           <animated.span
             className={`${styles.change} ${
               change >= 0

components/metrics/PageviewsChart.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
-import tinycolor from 'tinycolor2';
+import { colord } from 'colord';
 import CheckVisible from 'components/helpers/CheckVisible';
 import BarChart from './BarChart';
 import useTheme from 'hooks/useTheme';
@@ -18,15 +18,15 @@ export default function PageviewsChart({
 }) {
   const intl = useIntl();
   const [theme] = useTheme();
-  const primaryColor = tinycolor(THEME_COLORS[theme].primary);
+  const primaryColor = colord(THEME_COLORS[theme].primary);
   const colors = {
     views: {
-      background: primaryColor.setAlpha(0.4).toRgbString(),
-      border: primaryColor.setAlpha(0.5).toRgbString(),
+      background: primaryColor.alpha(0.4).toRgbString(),
+      border: primaryColor.alpha(0.5).toRgbString(),
     },
     visitors: {
-      background: primaryColor.setAlpha(0.6).toRgbString(),
-      border: primaryColor.setAlpha(0.7).toRgbString(),
+      background: primaryColor.alpha(0.6).toRgbString(),
+      border: primaryColor.alpha(0.7).toRgbString(),
     },
   };
 

components/metrics/RealtimeHeader.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import PageHeader from '../layout/PageHeader';
 import DropDown from '../common/DropDown';
+import ActiveUsers from './ActiveUsers';
 import MetricCard from './MetricCard';
 import styles from './RealtimeHeader.module.css';
 
@@ -24,24 +25,31 @@ export default function RealtimeHeader({ websites, data, websiteId, onSelect })
         <div>
           <FormattedMessage id="label.realtime" defaultMessage="Realtime" />
         </div>
+        <div>
+          <ActiveUsers className={styles.active} websiteId={websiteId} />
+        </div>
         <DropDown value={websiteId} options={options} onChange={onSelect} />
       </PageHeader>
       <div className={styles.metrics}>
         <MetricCard
           label={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
           value={pageviews.length}
+          hideComparison
         />
         <MetricCard
           label={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
           value={sessions.length}
+          hideComparison
         />
         <MetricCard
           label={<FormattedMessage id="metrics.events" defaultMessage="Events" />}
           value={events.length}
+          hideComparison
         />
         <MetricCard
           label={<FormattedMessage id="metrics.countries" defaultMessage="Countries" />}
           value={countries.length}
+          hideComparison
         />
       </div>
     </>

components/metrics/RealtimeLog.js

@@ -7,7 +7,7 @@ import Tag from 'components/common/Tag';
 import Dot from 'components/common/Dot';
 import FilterButtons from 'components/common/FilterButtons';
 import NoData from 'components/common/NoData';
-import { devices } from 'components/messages';
+import { getDeviceMessage } from 'components/messages';
 import useLocale from 'hooks/useLocale';
 import useCountryNames from 'hooks/useCountryNames';
 import { BROWSERS } from 'lib/constants';
@@ -137,7 +137,7 @@ export default function RealtimeLog({ data, websites, websiteId }) {
             ),
             browser: <b>{BROWSERS[browser]}</b>,
             os: <b>{os}</b>,
-            device: <b>{intl.formatMessage(devices[device])?.toLowerCase()}</b>,
+            device: <b>{getDeviceMessage(device)}</b>,
           }}
         />
       );

components/metrics/ReferrersTable.js

@@ -35,7 +35,6 @@ export default function ReferrersTable({ websiteId, websiteDomain, showFilters,
   ];
 
   const renderLink = ({ w: link, x: label }) => {
-    console.log({ link, label });
     return (
       <div className={styles.row}>
         <Link href={resolve({ ref: label })} replace={true}>