app: lazy load lean-qr

app/src/app/components/frames/chart/components/buttonShare.tsx

@@ -1,5 +1,3 @@
-import { generate } from "lean-qr";
-
 import { Button } from "./button";
 
 export function ButtonShare({ qrcode }: { qrcode: RWS<string> }) {
@@ -7,16 +5,18 @@ export function ButtonShare({ qrcode }: { qrcode: RWS<string> }) {
     <Button
       title="Share"
       icon={() => IconTablerShare}
-      onClick={() => {
-        qrcode.set(() =>
-          generate(document.location.href).toDataURL({
-            on: [0xff, 0xff, 0xff, 0xff],
-            off: [0x00, 0x00, 0x00, 0x00],
-            padX: 0,
-            padY: 0,
-          }),
-        );
-      }}
+      onClick={() =>
+        import("lean-qr").then(({ generate }) =>
+          qrcode.set(() =>
+            generate(document.location.href).toDataURL({
+              on: [0xff, 0xff, 0xff, 0xff],
+              off: [0x00, 0x00, 0x00, 0x00],
+              padX: 0,
+              padY: 0,
+            }),
+          ),
+        )
+      }
     />
   );
 }

app/src/app/components/qrcode.tsx

@@ -2,49 +2,46 @@ import { touchScreen } from "/src/env";
 
 export function Qrcode({ qrcode }: { qrcode: RWS<string> }) {
   return (
-    <Show when={qrcode()}>
-      <div
-        class="absolute inset-0 z-50 flex size-full items-center justify-center bg-black/50 backdrop-blur-md"
-        onClick={() => {
-          qrcode.set("");
-        }}
-      >
-        <div class="flex size-full max-h-[80dvh] max-w-md flex-col justify-center space-y-8 px-8 pb-8 text-base">
-          <p class="pb-4 text-center text-3xl font-bold">Share</p>
+    <div
+      class="absolute inset-0 z-50 flex size-full items-center justify-center bg-black/50 backdrop-blur-md"
+      onClick={() => {
+        qrcode.set("");
+      }}
+    >
+      <div class="flex size-full max-h-[80dvh] max-w-md flex-col justify-center space-y-8 px-8 pb-8 text-base">
+        <p class="pb-4 text-center text-3xl font-bold">Share</p>
 
-          <p>
-            To share this page, you can either send the following QR Code with a
-            phone:
-          </p>
-          <div class="flex min-h-0 w-full flex-1 flex-col items-center justify-center">
-            <img
-              class="aspect-square min-h-0 flex-1 grow object-contain"
-              onClick={(event) => {
-                event?.stopPropagation();
-              }}
-              src={qrcode()}
-              style={{ "image-rendering": "pixelated" }}
-            />
-          </div>
-
-          <div>
-            <p>Or if you prefer you can share this link instead:</p>
-            <a
-              onClick={(event) => {
-                event.stopPropagation();
-              }}
-              href={location.href}
-            >
-              {location.href}
-            </a>
-          </div>
-
-          <p>
-            {touchScreen ? "Touch" : "Click"} anywhere but on the QR Code to
-            exit.
-          </p>
+        <p>
+          To share this page, you can either send the following QR Code with a
+          phone:
+        </p>
+        <div class="flex min-h-0 w-full flex-1 flex-col items-center justify-center">
+          <img
+            class="aspect-square min-h-0 flex-1 grow object-contain"
+            onClick={(event) => {
+              event?.stopPropagation();
+            }}
+            src={qrcode()}
+            style={{ "image-rendering": "pixelated" }}
+          />
         </div>
+
+        <div>
+          <p>Or if you prefer you can share this link instead:</p>
+          <a
+            onClick={(event) => {
+              event.stopPropagation();
+            }}
+            href={location.href}
+          >
+            {location.href}
+          </a>
+        </div>
+
+        <p>
+          {touchScreen ? "Touch" : "Click"} anywhere but on the QR Code to exit.
+        </p>
       </div>
-    </Show>
+    </div>
   );
 }

app/src/app/index.tsx

@@ -18,7 +18,6 @@ import { FavoritesFrame } from "./components/frames/favorites";
 import { FoldersFrame } from "./components/frames/folders";
 import { HistoryFrame } from "./components/frames/history";
 import { SettingsFrame } from "./components/frames/settings";
-import { Qrcode } from "./components/qrcode";
 import { StripDesktop, StripMobile } from "./components/strip";
 import { Update } from "./components/update";
 
@@ -231,6 +230,12 @@ export function App() {
     })),
   );
 
+  const Qrcode = lazy(() =>
+    import("./components/qrcode").then((d) => ({
+      default: d.Qrcode,
+    })),
+  );
+
   return (
     <>
       <Background
@@ -264,7 +269,10 @@ export function App() {
         onTouchEnd={() => resizingBarStart.set(undefined)}
         onTouchCancel={() => resizingBarStart.set(undefined)}
       >
-        <Qrcode qrcode={qrcode} />
+        <Show when={qrcode()}>
+          <Qrcode qrcode={qrcode} />
+        </Show>
+
         <Update />
 
         <div class="flex size-full flex-col md:flex-row md:p-3 md:short:p-0">

app/src/scripts/datasets/resource.ts

@@ -17,17 +17,16 @@ export function createResourceDataset<
   >;
 
   const baseURL = `${
-    // location.hostname === "localhost"
-    //   ? "http://localhost:3110"
-    //   : "https://api.satonomics.xyz"
-    "https://api.satonomics.xyz"
+    location.hostname === "localhost"
+      ? "http://localhost:3111"
+      : "https://api.satonomics.xyz"
+    // "https://api.satonomics.xyz"
   }${path}`;
 
   const backupURL = `${
-    // location.hostname === "localhost"
-    //   ? "http://localhost:3110"
-    //   : "https://api.satonomics.xyz"
-    "https://api-bkp.satonomics.xyz"
+    location.hostname === "localhost"
+      ? "http://localhost:3111"
+      : "https://api-bkp.satonomics.xyz"
   }${path}`;
 
   return createRoot((dispose) => {

app/src/scripts/presets/market/averages/index.ts

@@ -43,17 +43,43 @@ function createPresetFolder({
   key: AverageName;
 }) {
   return {
-    scale,
     name,
-    description: "",
-    icon: IconTablerMathAvg,
-    title: `${name} Moving Average`,
-    top: [
+    tree: [
       {
-        title: `SMA`,
-        color,
-        datasetPath: `/date-to-price-${key}-sma`,
+        scale,
+        name: "Average",
+        description: "",
+        icon: IconTablerMathAvg,
+        title: `${name} Moving Average`,
+        top: [
+          {
+            title: `SMA`,
+            color,
+            datasetPath: `/date-to-price-${key}-sma`,
+          },
+        ],
+      },
+      {
+        scale,
+        name: "Ratio",
+        description: "",
+        icon: IconTablerMathXDivideY,
+        title: `${name} Moving Average Ratio`,
+        top: [
+          {
+            title: `SMA`,
+            color,
+            datasetPath: `/date-to-price-${key}-sma`,
+          },
+        ],
+        bottom: [
+          {
+            title: `Ratio`,
+            color,
+            datasetPath: `/date-to-market-price-to-price-${key}-sma-ratio`,
+          },
+        ],
       },
     ],
-  } satisfies PartialPreset;
+  } satisfies PartialPresetFolder;
 }

app/src/types/auto-imports.d.ts

@@ -168,6 +168,7 @@ declare global {
   const IconTablerLoop: (typeof import("~icons/tabler/loop.jsx"))["default"]
   const IconTablerMail: typeof import('~icons/tabler/mail.jsx')['default']
   const IconTablerMathAvg: typeof import('~icons/tabler/math-avg.jsx')['default']
+  const IconTablerMathXDivideY: typeof import('~icons/tabler/math-x-divide-y.jsx')['default']
   const IconTablerMaximize: typeof import('~icons/tabler/maximize.jsx')['default']
   const IconTablerMoneybag: typeof import('~icons/tabler/moneybag.jsx')['default']
   const IconTablerMoodDollar: typeof import('~icons/tabler/mood-dollar.jsx')['default']