empezar a mostrar cosas en el sitio!

sitio/package.json

@@ -15,6 +15,7 @@
     "@sveltejs/adapter-auto": "^3.0.0",
     "@sveltejs/kit": "^2.0.0",
     "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "@types/better-sqlite3": "^7.6.8",
     "autoprefixer": "^10.4.16",
     "postcss": "^8.4.32",
     "postcss-load-config": "^5.0.2",
@@ -22,12 +23,19 @@
     "prettier-plugin-svelte": "^3.1.2",
     "prettier-plugin-tailwindcss": "^0.5.9",
     "svelte": "^4.2.7",
-    "svelte-adapter-bun": "^0.5.1",
     "svelte-check": "^3.6.0",
     "tailwindcss": "^3.3.6",
     "tslib": "^2.4.1",
     "typescript": "^5.0.0",
     "vite": "^5.0.3"
   },
-  "type": "module"
+  "type": "module",
+  "dependencies": {
+    "better-sqlite3": "^9.2.2",
+    "chart.js": "^4.4.1",
+    "chartjs-adapter-dayjs-4": "^1.0.4",
+    "dayjs": "^1.11.10",
+    "db-datos": "workspace:^",
+    "drizzle-orm": "^0.29.1"
+  }
 }

sitio/src/lib/db.ts

@@ -0,0 +1,8 @@
+import Database from "better-sqlite3";
+import { drizzle } from "drizzle-orm/better-sqlite3";
+import * as schema from "db-datos/schema.js";
+
+const sqlite = new Database("../scraper/sqlite.db");
+
+export const db = drizzle(sqlite, { schema });
+export * as schema from "db-datos/schema.js";

sitio/src/routes/+page.server.ts

@@ -0,0 +1,18 @@
+import { error } from "@sveltejs/kit";
+import type { PageServerLoad } from "./$types";
+import { db, schema } from "$lib/db";
+import { ilike, like, sql } from "drizzle-orm";
+
+export const load: PageServerLoad = async ({ params }) => {
+  const q = db
+    .select({ ean: schema.precios.ean })
+    .from(schema.precios)
+    .where(
+      like(schema.precios.url, `https://diaonline.supermercadosdia.com.ar%`),
+    )
+    .groupBy(schema.precios.ean)
+    .orderBy(sql`random()`)
+    .limit(150);
+  const precios = await q;
+  return { precios };
+};

sitio/src/routes/+page.svelte

@@ -1,4 +1,17 @@
-<h1>Welcome to SvelteKit</h1>
-<p>
-  Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation
-</p>
+<script lang="ts">
+  import type { PageData } from "./$types";
+
+  export let data: PageData;
+</script>
+
+<h1 class="text-xl">WIP</h1>
+
+<ul>
+  {#each data.precios as product}
+    <li>
+      <a href={`/ean/${product.ean}`}>
+        {product.ean}
+      </a>
+    </li>
+  {/each}
+</ul>

sitio/src/routes/ean/[ean]/+page.server.ts

@@ -0,0 +1,13 @@
+import { error } from "@sveltejs/kit";
+import { eq } from "drizzle-orm";
+import type { PageServerLoad } from "./$types";
+import { db, schema } from "$lib/db";
+
+export const load: PageServerLoad = async ({ params }) => {
+  const precios = await db.query.precios.findMany({
+    where: eq(schema.precios.ean, params.ean),
+  });
+  if (precios.length === 0) return error(404, "Not Found");
+
+  return { precios };
+};

sitio/src/routes/ean/[ean]/+page.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { PageData } from "./$types";
+  import Chart from "./Chart.svelte";
+
+  export let data: PageData;
+</script>
+
+<ul>
+  {#each data.precios as precio}
+    <li>
+      {precio.url}
+      :
+      {#if precio.precioCentavos}
+        {precio.precioCentavos / 100}
+      {:else}
+        {precio.inStock}
+      {/if}
+      ({precio.fetchedAt})
+    </li>
+  {/each}
+</ul>
+
+<Chart precios={data.precios} />

sitio/src/routes/ean/[ean]/Chart.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import type { Precio } from "db-datos/schema";
+  // import dayjs from "dayjs";
+  import ChartJs from "./ChartJs.svelte";
+
+  export let precios: Precio[];
+
+  $: datasets = precios
+    .map((p) => new URL(p.url!).hostname)
+    .filter(onlyUnique)
+    .map((host) => {
+      const ps = precios
+        .filter((p) => new URL(p.url!).hostname === host)
+        .filter(
+          (p): p is Precio & { precioCentavos: number } =>
+            p.precioCentavos !== null,
+        );
+      return {
+        label: host,
+        data: [
+          ...ps.map((p) => ({
+            x: p.fetchedAt,
+            y: p.precioCentavos / 100,
+          })),
+          // lie
+          // ...ps.map((p) => ({
+          //   x: dayjs(p.fetchedAt).add(14, "day").toDate(),
+          //   y: p.precioCentavos / 100 + 100,
+          // })),
+        ],
+        fill: false,
+
+        borderColor: `${host}`,
+        tension: 0.1,
+      };
+    });
+  function onlyUnique(value: any, index: any, self: string | any[]) {
+    return self.indexOf(value) === index;
+  }
+</script>
+
+<div class="h-[300px] w-full min-w-[500px]">
+  <ChartJs
+    type="line"
+    data={{ datasets }}
+    options={{
+      responsive: true,
+      scales: {
+        x: { type: "time" },
+      },
+    }}
+  />
+</div>

sitio/src/routes/ean/[ean]/ChartJs.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import {
+    Chart,
+    LineController,
+    type ChartData,
+    type ChartOptions,
+    type ChartType,
+    type Point,
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement,
+    Filler,
+    TimeScale,
+    Tooltip,
+    Legend,
+  } from "chart.js";
+  import "chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm";
+  import { onMount } from "svelte";
+
+  Chart.register(
+    LineController,
+    LineElement,
+    CategoryScale,
+    LinearScale,
+    TimeScale,
+    PointElement,
+    Filler,
+    Tooltip,
+    Legend,
+  );
+
+  export let type: ChartType;
+  export let data: ChartData<typeof type, { x: Date; y: number }[]>;
+  export let options: ChartOptions<typeof type> = {};
+
+  let canvasEl: HTMLCanvasElement;
+  onMount(() => {
+    const chart = new Chart(canvasEl, {
+      type,
+      data,
+      options,
+    });
+    return () => chart.destroy();
+  });
+</script>
+
+<canvas bind:this={canvasEl} />

sitio/svelte.config.js

@@ -1,5 +1,5 @@
-// import adapter from "@sveltejs/adapter-auto";
-import adapter from "svelte-adapter-bun";
+import adapter from "@sveltejs/adapter-auto";
+// import adapter from "svelte-adapter-bun";
 import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
 
 /** @type {import('@sveltejs/kit').Config} */