add feedback chart

core/assets/js/app.js

@@ -26,6 +26,7 @@ import * as Components from "../svelte/**/*.svelte";
 
 import { format } from "timeago.js";
 import ClipboardJS from "clipboard";
+import Chart from "chart.js/auto";
 
 import "@getcanary/web/components/canary-root.js";
 import "@getcanary/web/components/canary-provider-cloud.js";
@@ -47,6 +48,28 @@ let csrfToken = document
 
 let hooks = {
   ...getHooks(Components),
+  ChartJS: {
+    mounted() {
+      new Chart(
+        this.el,
+        {
+          type: "bar",
+          data: {
+            labels: JSON.parse(this.el.dataset.labels),
+            datasets: [
+              {
+                data: JSON.parse(this.el.dataset.points),
+                label: 'score',
+              },
+            ],
+          },
+        },
+        {
+          responsive: true,
+        },
+      );
+    },
+  },
   LocalTime: {
     mounted() {
       this.fn();

core/assets/package.json

@@ -17,7 +17,8 @@
     "typescript": "^5.4.5"
   },
   "dependencies": {
-    "@getcanary/web": "^0.0.83",
+    "@getcanary/web": "^0.0.84",
+    "chart.js": "^4.4.4",
     "clipboard": "^2.0.11",
     "clsx": "^2.1.1",
     "live_svelte": "file:../deps/live_svelte",

core/lib/canary_web/components/layouts.ex

@@ -44,6 +44,19 @@ defmodule CanaryWeb.Layouts do
             </.link>
           </li>
 
+          <li>
+            <.link class={if @active_tab == :feedback, do: "active"} navigate={~p"/feedback"}>
+              <span class={[
+                "h-4 w-4",
+                if(@active_tab == :feedback,
+                  do: "hero-hand-thumb-up-solid",
+                  else: "hero-hand-thumb-up"
+                )
+              ]} />
+              <span>Feedback</span>
+            </.link>
+          </li>
+
           <%!-- <li>
             <.link class={if @active_tab == :editor, do: "active"} navigate={~p"/editor"}>
               <span class={[

core/lib/canary_web/live/feedback_live.ex

@@ -3,12 +3,30 @@ defmodule CanaryWeb.FeedbackLive do
 
   def render(assigns) do
     ~H"""
-    <pre><%= @data %></pre>
+    <div>
+      <canvas
+        id="feedback-page-breakdown"
+        phx-hook="ChartJS"
+        data-labels={Jason.encode!(@labels)}
+        data-points={Jason.encode!(@points)}
+      >
+      </canvas>
+    </div>
     """
   end
 
   def mount(_params, _session, socket) do
-    {:ok, data} = Canary.Analytics.feedback_page_breakdown(socket.assigns.current_account.id)
-    {:ok, socket |> assign(data: Jason.encode!(data))}
+    account_id = socket.assigns.current_account.id
+    {:ok, data} = Canary.Analytics.feedback_page_breakdown(account_id)
+
+    labels = data |> Enum.map(fn %{"path" => path} -> path end)
+    points = data |> Enum.map(fn %{"mean_score" => score} -> score end)
+
+    socket =
+      socket
+      |> assign(:labels, labels)
+      |> assign(:points, points)
+
+    {:ok, socket}
   end
 end

core/lib/canary_web/live/nav_live.ex

@@ -11,6 +11,7 @@ defmodule CanaryWeb.NavLive do
       case socket.view do
         CanaryWeb.HomeLive -> :home
         CanaryWeb.SourceLive -> :source
+        CanaryWeb.FeedbackLive -> :feedback
         CanaryWeb.SettingsLive -> :settings
         _ -> nil
       end

core/lib/canary_web/operations_controller.ex

@@ -55,6 +55,12 @@ defmodule CanaryWeb.OperationsController do
     %URI{host: host, path: path} = URI.parse(url)
     path = path |> remove_extension() |> ensure_trailing_slash()
 
+    if host == "localhost" do
+      conn
+      |> send_resp(200, "")
+      |> halt()
+    end
+
     data = %Canary.Analytics.FeedbackPage{
       host: host,
       path: path,

js/packages/web/src/components/canary-feedback-page.ts

@@ -23,7 +23,10 @@ export class CanaryFeedbackPage extends LitElement {
   apiKey = "";
 
   private _task = new Task(this, {
-    task: async ([endpoint, key, url, score]: [string, string, string, number], { signal }) => {
+    task: async (
+      [endpoint, key, url, score]: [string, string, string, number],
+      { signal },
+    ) => {
       const response = await fetch(`${endpoint}/api/v1/feedback/page`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },

js/packages/web/src/components/canary-feedback.stories.ts

@@ -14,7 +14,9 @@ export default {
   parameters: { sourceLink: "components/canary-feedback.stories.ts" },
   render: ({ type }: any) => {
     if (type === "page") {
-      return html` <canary-feedback-page api-key="123"></canary-feedback-page> `;
+      return html`
+        <canary-feedback-page api-key="123"></canary-feedback-page>
+      `;
     }
 
     if (type === "modal") {

js/packages/web/src/components/canary-provider-cloud.ts

@@ -13,7 +13,7 @@ const NAME = "canary-provider-cloud";
 export class CanaryProviderCloud extends LitElement {
   @property({ type: String, attribute: "api-base" })
   apiBase = "";
-  
+
   @property({ type: String, attribute: "api-key" })
   apiKey = "";