Add trends section

package.json

@@ -53,6 +53,7 @@
     "hybrids": "^9.1.14",
     "idb": "^8.0.2",
     "jwt-decode": "^4.0.0",
+    "plotly.js-basic-dist": "^3.0.1",
     "tldts-experimental": "^6.1.82"
   },
   "engineStrict": true,

src/pages/whotracksme/components/chart-button.js

@@ -0,0 +1,44 @@
+/**
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2017-present Ghostery GmbH. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+
+import { html } from 'hybrids';
+
+export default {
+  active: { value: false, reflect: true },
+  render: () => html`
+    <template layout="contents">
+      <ui-button>
+        <button layout="column center gap:0"><slot></slot></button>
+      </ui-button>
+    </template>
+  `.css`
+    ui-button {
+      box-shadow: none;
+      border-radius: 0px;
+      height: 50px;
+      background: var(--background-secondary);
+    }
+
+    :host(:first-child) ui-button {
+      border-radius: 8px 0 0 8px;
+      border-right: none;
+    }
+
+    :host(:last-child) ui-button {
+      border-radius: 0 8px 8px 0;
+      border-left: none;
+    }
+
+    :host([active]) ui-button {
+      background: var(--background-primary);
+    }
+  `,
+};

src/pages/whotracksme/components/chart-line.js

@@ -0,0 +1,118 @@
+/**
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2017-present Ghostery GmbH. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+
+import { html, store } from 'hybrids';
+import Plotly from 'plotly.js-basic-dist';
+
+import Stats from '/store/daily-stats.js';
+
+const TRACE_COLORS = {
+  'pages': '--component-chart-line-observed',
+  'trackersBlocked': '--component-chart-line-blocked',
+  'trackersModified': '--component-chart-line-modified',
+};
+
+export default {
+  dateFrom: '',
+  dateTo: '',
+  stats: store([Stats], {
+    id: ({ dateFrom, dateTo }) => ({ dateFrom, dateTo }),
+  }),
+  trends: { value: [] },
+  data: {
+    value: ({ stats, trends }) => {
+      if (!store.ready(stats) || store.pending(stats)) return undefined;
+
+      return stats.length
+        ? trends.map((key) => ({
+            name: key,
+            x: stats.map(({ day }) => day),
+            y: stats.map(({ [key]: value }) => value),
+            type: 'scatter',
+            mode: 'lines',
+            text: stats.map(({ day, [key]: value }) => `${day} - ${value}`),
+            hoverinfo: 'text',
+          }))
+        : [];
+    },
+    connect(host, _, invalidate) {
+      const matchMedia = window.matchMedia('(prefers-color-scheme: dark)');
+      matchMedia.addEventListener('change', invalidate);
+
+      return () => matchMedia.removeEventListener('change', invalidate);
+    },
+    observe(host, data) {
+      // pending state
+      if (data === undefined) return;
+
+      const chart = host.render().querySelector('#chart');
+
+      // clean previous chart
+      Plotly.purge(chart);
+
+      // Let the rest of the page layout to fill-in before rendering the chart
+      // so the responsive layout can calculate the correct size.
+      window.requestAnimationFrame(() => {
+        const computedStyle = window.getComputedStyle(host);
+
+        Plotly.newPlot(
+          chart,
+          data.map((trace) => {
+            trace.line = {
+              color: computedStyle.getPropertyValue(TRACE_COLORS[trace.name]),
+              width: 2,
+            };
+            return trace;
+          }),
+          {
+            dragmode: false,
+            autosize: true,
+            margin: { b: 0, l: 0, r: 0, t: 0, pad: 20 },
+            showlegend: false,
+            yaxis: {
+              fixedrange: true,
+              automargin: true,
+              color: computedStyle.getPropertyValue('--color-tertiary'),
+              gridcolor: computedStyle.getPropertyValue('--border-primary'),
+              zerolinecolor: computedStyle.getPropertyValue('--border-primary'),
+              tickfont: { size: 10, family: 'Inter' },
+            },
+            xaxis: {
+              fixedrange: true,
+              automargin: true,
+              showgrid: false,
+              showline: false,
+              zeroline: false,
+              ticklabelposition: 'outside',
+              tickfont: { size: 10, family: 'Inter' },
+              color: computedStyle.getPropertyValue('--color-tertiary'),
+            },
+            bargap: 0.4,
+            hoverlabel: {
+              font: { family: 'Inter', size: 12 },
+            },
+            template: {
+              layout: {
+                paper_bgcolor: 'transparent',
+                plot_bgcolor: 'transparent',
+              },
+            },
+          },
+          { displayModeBar: false, responsive: true },
+        );
+      });
+    },
+  },
+  render: () =>
+    html`<template layout="grid">
+      <div id="chart"></div>
+    </template>`,
+};

src/pages/whotracksme/elements.js

@@ -0,0 +1,20 @@
+/**
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2017-present Ghostery GmbH. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+
+import { define } from 'hybrids';
+
+define.from(
+  import.meta.glob(['./components/*.js'], {
+    eager: true,
+    import: 'default',
+  }),
+  { root: ['components'], prefix: 'whotracksme' },
+);