initial chart improvements

components/charts/Area.js

@@ -0,0 +1,112 @@
+import Chart from "react-apexcharts";
+
+const Area = () => {
+  const data = {
+    series: [
+      {
+        name: "series1",
+        data: [31, 40, 28, 100, 51, 300, 420, 109, 100, 1230],
+      },
+    ],
+    options: {
+      chart: {
+        height: 350,
+        type: "area",
+        toolbar: {
+          show: false,
+        },
+        zoom: {
+          enabled: false,
+        },
+        // sparkline: {
+        //   enabled: true,
+        // },
+      },
+      grid: {
+        row: {
+          // colors: ["#e5e5e5", "transparent"],
+          opacity: 0.5,
+        },
+        column: {
+          //colors: ["#f8f8f8", "transparent"],
+        },
+        yaxis: {
+          lines: {
+            show: false,
+          },
+        },
+        xaxis: {
+          lines: {
+            show: false,
+          },
+        },
+        show: false,
+        padding: {
+          left: 0,
+          right: 0,
+        },
+      },
+      dataLabels: {
+        enabled: false,
+      },
+      stroke: {
+        curve: "smooth",
+      },
+      yaxis: {
+        labels: {
+          show: true,
+          style: {
+            colors: "#FFFFFF",
+            fontSize: "14px",
+            fontWeight: 800,
+            cssClass: "apexcharts-xaxis-label",
+          },
+          padding: {
+            left: 0,
+            right: 0,
+          },
+        },
+      },
+      xaxis: {
+        type: "datetime",
+        categories: [
+          "2018-09-19T00:00:00.000Z",
+          "2018-09-19T01:30:00.000Z",
+          "2018-09-19T02:30:00.000Z",
+          "2018-09-19T03:30:00.000Z",
+          "2018-09-19T04:30:00.000Z",
+          "2018-09-19T05:30:00.000Z",
+          "2018-09-19T06:30:00.000Z",
+          "2018-09-19T07:30:00.000Z",
+          "2018-09-19T08:30:00.000Z",
+          "2018-09-19T09:30:00.000Z",
+          "2018-09-19T010:30:00.000Z",
+        ],
+        axisBorder: {
+          show: false,
+        },
+        lines: {
+          show: false,
+        },
+        labels: {
+          show: true,
+          style: {
+            colors: "#FFFFFF",
+            fontSize: "14px",
+            fontWeight: 800,
+            cssClass: "apexcharts-xaxis-label",
+          },
+        },
+      },
+      tooltip: {
+        x: {
+          format: "dd/MM/yy HH:mm",
+        },
+      },
+    },
+  };
+
+  return <Chart options={data.options} series={data.series} type="area" height={350} />;
+};
+
+export default Area;

components/charts/Jumbo.js

@@ -1,6 +1,43 @@
+import { ArrowSmDownIcon, ArrowSmUpIcon } from "@heroicons/react/solid";
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+const item = {
+  changeType: "increase",
+};
+
 export const Jumbo = ({ title, value }) => (
   <div className="px-0 py-0 bg-white dark:bg-transparent overflow-hidden sm:first:pl-0 sm:pl-5 sm:py-5">
-    <dt className="text-md font-medium text-gray-500 truncate">{title}</dt>
+    <dt className="text-md font-medium text-gray-500 truncate flex justify-between">
+      <div>{title}</div>
+
+      <div
+        className={classNames(
+          item?.changeType === "increase"
+            ? "bg-green-100 text-green-800 dark:text-green-500"
+            : "bg-red-100 text-red-800 dark:text-red-500",
+          "inline-flex items-baseline px-2.5 py-0.5 rounded-full text-sm font-medium md:mt-2 lg:mt-0 dark:bg-gray-700"
+        )}
+      >
+        {item?.changeType === "increase" ? (
+          <ArrowSmUpIcon
+            className="-ml-1 mr-0.5 flex-shrink-0 self-center h-5 w-5 text-green-500"
+            aria-hidden="true"
+          />
+        ) : (
+          <ArrowSmDownIcon
+            className="-ml-1 mr-0.5 flex-shrink-0 self-center h-5 w-5 text-red-500"
+            aria-hidden="true"
+          />
+        )}
+        <span className="sr-only">
+          {item?.changeType === "increase" ? "Increased" : "Decreased"} by
+        </span>
+        12
+      </div>
+    </dt>
     <dd className="mt-1 text-5xl font-semibold text-white">{value}</dd>
   </div>
 );

components/charts/Performance.js

@@ -1,5 +1,6 @@
 import { Stats } from "../Stats";
 import { useGraph } from "../../hooks/useGraph";
+import { Jumbo } from "./Jumbo";
 
 export const Performance = ({ url, timeRange }) => {
   const { graph, isLoading, isError } = useGraph(url, timeRange);
@@ -8,6 +9,14 @@ export const Performance = ({ url, timeRange }) => {
   if (isError) return <div>failed to load</div>;
 
   return (
+    <dl className="grid grid-cols-1 gap-5 sm:grid-cols-4 divide-x divide-gray-800">
+      <Jumbo title="Total Views" value={graph.pageViews.cp} />
+      <Jumbo title="Unique Visitors" value={graph.uniqueVisitors.cp} />
+      <Jumbo title="Bounces" value={graph.bounceRate.cp} />
+      <Jumbo title="Avg Visit Time" value="24s" />
+    </dl>
+
+    /*
     <Stats
       stats={[
         {
@@ -33,5 +42,6 @@ export const Performance = ({ url, timeRange }) => {
         },
       ]}
     />
+    */
   );
 };

pages/websites/[seed]/index.js

@@ -1,3 +1,4 @@
+import dynamic from "next/dynamic";
 import { useState } from "react";
 import { withAuth } from "../../../hoc/withAuth";
 import { useWebsite } from "../../../hooks/useWebsite";
@@ -11,6 +12,8 @@ import { CountryViews } from "../../../components/charts/CountryViews";
 import { RealtimeVisitors } from "../../../components/RealtimeVisitors";
 import { RangeSelector } from "../../../components/RangeSelector";
 import { PageHeading } from "../../../components/PageHeading";
+import { Jumbo } from "../../../components/charts/Jumbo";
+//import { Area } from "../../../components/charts/Area";
 
 export async function getServerSideProps(context) {
   const { seed } = context.query;
@@ -20,6 +23,8 @@ export async function getServerSideProps(context) {
   };
 }
 
+const Area = dynamic(() => import("../../../components/charts/Area"), { ssr: false });
+
 const Website = ({ seed }) => {
   const { website, isLoading, isError } = useWebsite({ seed });
   const [timeRange, setTimeRange] = useState(TimeRanges.DAY);
@@ -28,7 +33,7 @@ const Website = ({ seed }) => {
   if (isError) return <div>failed to load</div>;
 
   return (
-    <div className="h-full p-6 space-y-4 bg-gray-900">
+    <div className="h-full py-8 px-10 space-y-4 bg-gray-900">
       <PageHeading
         title={isLoading ? "" : website.url}
         breadcumbs={["Websites", "Dashboard"]}
@@ -38,7 +43,9 @@ const Website = ({ seed }) => {
       />
 
       <Performance url={`/api/metrics/${seed}/performance`} timeRange={timeRange} />
-      <Chart url={`/api/metrics/${seed}/views/series`} timeRange={timeRange} type="lineChart" />
+      <Area />
+
+      {/* <Chart url={`/api/metrics/${seed}/views/series`} timeRange={timeRange} type="lineChart" /> */}
 
       <div className="grid md:grid-cols-2 gap-4">
         <PageViews url={`/api/metrics/${seed}/views/pages`} timeRange={timeRange} />