Bar chart styling.

components/WebsiteDetails.js

@@ -23,9 +23,9 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
   const [data, setData] = useState();
   const [chartLoaded, setChartLoaded] = useState(false);
   const [countryData, setCountryData] = useState();
+  const [eventsData, setEventsData] = useState();
   const [dateRange, setDateRange] = useState(getDateRange(defaultDateRange));
   const [expand, setExpand] = useState();
-  const [showEvents, setShowEvents] = useState(false);
   const { startDate, endDate, unit } = dateRange;
 
   const BackButton = () => (
@@ -145,14 +145,16 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
               <WorldMap data={countryData} />
             </div>
             <div className="col-12 col-md-12 col-lg-4">
-              <CountriesTable {...tableProps} onDataLoad={data => setCountryData(data)} />
+              <CountriesTable {...tableProps} onDataLoad={setCountryData} />
             </div>
           </div>
-          <div className={classNames(styles.row, 'row', { [styles.hidden]: !showEvents })}>
+          <div
+            className={classNames(styles.row, 'row', { [styles.hidden]: !eventsData?.length > 0 })}
+          >
             <div className="col-12 col-md-12 col-lg-4">
-              <EventsTable {...tableProps} onDataLoad={data => setShowEvents(data.length > 0)} />
+              <EventsTable {...tableProps} onDataLoad={setEventsData} />
             </div>
-            <div className="col-12 col-md-12 col-lg-8">
+            <div className="col-12 col-md-12 col-lg-8 pt-5 pb-5">
               <EventsChart {...dataProps} />
             </div>
           </div>

components/common/ButtonGroup.module.css

@@ -2,13 +2,13 @@
   display: inline-flex;
   border-radius: 4px;
   overflow: hidden;
-  border: 1px solid var(--gray400);
+  border: 1px solid var(--gray500);
 }
 
 .group .button {
   border-radius: 0;
   background: var(--gray50);
-  border-left: 1px solid var(--gray400);
+  border-left: 1px solid var(--gray500);
   padding: 4px 8px;
 }
 
@@ -16,6 +16,10 @@
   border: 0;
 }
 
+.group .button:hover {
+  background: var(--gray100);
+}
+
 .group .button + .button {
   margin: 0;
 }

components/metrics/BarChart.js

@@ -2,7 +2,7 @@ import React, { useState, useRef, useEffect } from 'react';
 import ReactTooltip from 'react-tooltip';
 import classNames from 'classnames';
 import ChartJS from 'chart.js';
-import styles from './PageviewsChart.module.css';
+import styles from './BarChart.module.css';
 import { format } from 'date-fns';
 
 export default function BarChart({
@@ -10,6 +10,7 @@ export default function BarChart({
   datasets,
   unit,
   records,
+  height = 400,
   animationDuration = 300,
   className,
   stacked = false,
@@ -68,7 +69,9 @@ export default function BarChart({
       hover: {
         animationDuration: 0,
       },
+      responsive: true,
       responsiveAnimationDuration: 0,
+      maintainAspectRatio: false,
       scales: {
         xAxes: [
           {
@@ -133,16 +136,19 @@ export default function BarChart({
   }, [datasets]);
 
   return (
-    <div
-      data-tip=""
-      data-for={`${chartId}-tooltip`}
-      className={classNames(styles.chart, className)}
-    >
-      <canvas ref={canvas} width={960} height={400} />
+    <>
+      <div
+        data-tip=""
+        data-for={`${chartId}-tooltip`}
+        className={classNames(styles.chart, className)}
+        style={{ height }}
+      >
+        <canvas ref={canvas} />
+      </div>
       <ReactTooltip id={`${chartId}-tooltip`}>
         {tooltip ? <Tooltip {...tooltip} /> : null}
       </ReactTooltip>
-    </div>
+    </>
   );
 }
 

components/metrics/EventsChart.js

@@ -1,33 +1,38 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import classNames from 'classnames';
+import tinycolor from 'tinycolor2';
 import BarChart from './BarChart';
 import { get } from 'lib/web';
 import { getTimezone, getDateArray, getDateLength } from 'lib/date';
-import styles from './PageviewsChart.module.css';
+import styles from './BarChart.module.css';
 
 const COLORS = [
-  'rgba(38, 128, 235, 0.5)',
-  'rgba(146, 86, 217, 0.5)',
-  'rgba(45, 157, 120, 0.5)',
-  'rgba(216, 55, 144, 0.5)',
-  'rgba(227, 72, 80, 0.5)',
-  'rgba(103, 103, 236, 0.5)',
-  'rgba(68, 181, 86, 0.5)',
+  '#2680eb',
+  '#9256d9',
+  '#44b556',
+  '#e68619',
+  '#e34850',
+  '#1b959a',
+  '#d83790',
+  '#85d044',
 ];
 
-export default function EventsChart({ websiteId, startDate, endDate, unit, className }) {
+export default function EventsChart({ websiteId, startDate, endDate, unit }) {
   const [data, setData] = useState();
   const datasets = useMemo(() => {
     if (!data) return [];
 
-    return Object.keys(data).map((key, index) => ({
-      label: key,
-      data: data[key],
-      lineTension: 0,
-      backgroundColor: COLORS[index],
-      borderColor: COLORS[index],
-      borderWidth: 1,
-    }));
+    return Object.keys(data).map((key, index) => {
+      const color = tinycolor(COLORS[index]);
+      return {
+        label: key,
+        data: data[key],
+        lineTension: 0,
+        backgroundColor: color.setAlpha(0.4).toRgbString(),
+        borderColor: color.setAlpha(0.5).toRgbString(),
+        borderWidth: 1,
+      };
+    });
   }, [data]);
 
   async function loadData() {
@@ -55,6 +60,14 @@ export default function EventsChart({ websiteId, startDate, endDate, unit, class
     setData(map);
   }
 
+  function handleCreate(options) {
+    const legend = {
+      position: 'bottom',
+    };
+
+    options.legend = legend;
+  }
+
   function handleUpdate(chart) {
     chart.data.datasets = datasets;
 
@@ -70,15 +83,14 @@ export default function EventsChart({ websiteId, startDate, endDate, unit, class
   }
 
   return (
-    <div className={classNames(styles.chart, className)}>
-      <BarChart
-        chartId={websiteId}
-        datasets={datasets}
-        unit={unit}
-        records={getDateLength(startDate, endDate, unit)}
-        onUpdate={handleUpdate}
-        stacked
-      />
-    </div>
+    <BarChart
+      chartId={`events-${websiteId}`}
+      datasets={datasets}
+      unit={unit}
+      records={getDateLength(startDate, endDate, unit)}
+      onCreate={handleCreate}
+      onUpdate={handleUpdate}
+      stacked
+    />
   );
 }

components/metrics/EventsTable.js

@@ -2,7 +2,7 @@ import React from 'react';
 import MetricsTable from './MetricsTable';
 import styles from './EventsTable.module.css';
 
-export default function DevicesTable({
+export default function EventsTable({
   websiteId,
   startDate,
   endDate,
@@ -19,14 +19,19 @@ export default function DevicesTable({
       startDate={startDate}
       endDate={endDate}
       limit={limit}
-      renderLabel={({ w, x }) => (
-        <>
-          <span className={styles.type}>{w}</span>
-          {x}
-        </>
-      )}
+      renderLabel={({ x }) => <Label value={x} />}
       onExpand={onExpand}
       onDataLoad={onDataLoad}
     />
   );
 }
+
+const Label = ({ value }) => {
+  const [event, label] = value.split(':');
+  return (
+    <>
+      <span className={styles.type}>{event}</span>
+      {label}
+    </>
+  );
+};

components/metrics/PageviewsChart.js

@@ -1,7 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
 import BarChart from './BarChart';
-import styles from './PageviewsChart.module.css';
 
 export default function PageviewsChart({ websiteId, data, unit, className, animationDuration }) {
   const handleUpdate = chart => {
@@ -22,31 +20,30 @@ export default function PageviewsChart({ websiteId, data, unit, className, anima
   }
 
   return (
-    <div className={classNames(styles.chart, className)}>
-      <BarChart
-        chartId={websiteId}
-        datasets={[
-          {
-            label: 'unique visitors',
-            data: data.uniques,
-            lineTension: 0,
-            backgroundColor: 'rgb(38, 128, 235, 0.4)',
-            borderColor: 'rgb(13, 102, 208, 0.4)',
-            borderWidth: 1,
-          },
-          {
-            label: 'page views',
-            data: data.pageviews,
-            lineTension: 0,
-            backgroundColor: 'rgb(38, 128, 235, 0.2)',
-            borderColor: 'rgb(13, 102, 208, 0.2)',
-            borderWidth: 1,
-          },
-        ]}
-        unit={unit}
-        records={data.pageviews.length}
-        onUpdate={handleUpdate}
-      />
-    </div>
+    <BarChart
+      className={className}
+      chartId={websiteId}
+      datasets={[
+        {
+          label: 'unique visitors',
+          data: data.uniques,
+          lineTension: 0,
+          backgroundColor: 'rgb(38, 128, 235, 0.4)',
+          borderColor: 'rgb(13, 102, 208, 0.4)',
+          borderWidth: 1,
+        },
+        {
+          label: 'page views',
+          data: data.pageviews,
+          lineTension: 0,
+          backgroundColor: 'rgb(38, 128, 235, 0.2)',
+          borderColor: 'rgb(13, 102, 208, 0.2)',
+          borderWidth: 1,
+        },
+      ]}
+      unit={unit}
+      records={data.pageviews.length}
+      onUpdate={handleUpdate}
+    />
   );
 }