app: add address size in sidebar when needed

CHANGELOG.md

@@ -4,6 +4,8 @@
 
 ### Parser
 
+- CLI
+  - Added an argument parser for improved UX with several options
 - Datasets
   - Added the following datasets for all entities:
     - Value destroyed
@@ -25,8 +27,6 @@
     - Realized Price 1st Percentile
     - Realized Price 0.5th Percentile
     - Realized Price 0.1th Percentile
-- Node
-  - Added an argument parser for improved UX with several options
 - Price
   - Improved error message when price cannot be found
 
@@ -46,6 +46,8 @@
   - Fixed chart starting showing candlesticks and quickly switching to a line when it should've started directly with the line
   - Separated the QRCode generator library from the main chunk and made it imported on click
   - Fixed timescale changing on small screen after changing charts
+- Folders
+  - Added the size in the "filename" of address cohorts grouped by size
 - Favorites
   - Added a 'favorite' and 'unfavorite' button at the bottom
 - Settings

app/package.json

@@ -34,7 +34,7 @@
     "prettier-plugin-tailwindcss": "^0.6.5",
     "pwa-asset-generator": "^6.3.1",
     "rollup-plugin-visualizer": "^5.12.0",
-    "tailwindcss": "^3.4.4",
+    "tailwindcss": "^3.4.5",
     "typescript": "^5.5.3",
     "unplugin-auto-import": "^0.18.0",
     "unplugin-icons": "^0.19.0",

app/src/scripts/datasets/consts/address.ts

@@ -2,17 +2,19 @@ export const addressCohortsBySize = [
   {
     key: "plankton",
     name: "Plankton",
+    size: "1 sat to 0.1 BTC",
   },
   {
     key: "shrimp",
     name: "Shrimp",
+    size: "0.1 sat to 1 BTC",
   },
-  { key: "crab", name: "Crab" },
+  { key: "crab", name: "Crab", size: "1 BTC to 10 BTC" },
-  { key: "fish", name: "Fish" },
+  { key: "fish", name: "Fish", size: "10 BTC to 100 BTC" },
-  { key: "shark", name: "Shark" },
+  { key: "shark", name: "Shark", size: "100 BTC to 1000 BTC" },
-  { key: "whale", name: "Whale" },
+  { key: "whale", name: "Whale", size: "1000 BTC to 10 000 BTC" },
-  { key: "humpback", name: "Humpback" },
+  { key: "humpback", name: "Humpback", size: "10 000 BTC to 100 000 BTC" },
-  { key: "megalodon", name: "Megalodon" },
+  { key: "megalodon", name: "Megalodon", size: "More than 100 000 BTC" },
 ] as const;
 
 export const addressCohortsByType = [

app/src/scripts/presets/addresses/index.ts

@@ -68,11 +68,12 @@ export function createPresets(scale: ResourceScale): PartialPresetFolder {
       },
       {
         name: "By Size",
-        tree: addressCohortsBySize.map(({ key, name }) =>
+        tree: addressCohortsBySize.map(({ key, name, size }) =>
           createAddressPresetFolder({
             scale,
             color: colors[key],
             name,
+            filenameAddon: size,
             datasetId: key,
           }),
         ),
@@ -97,15 +98,17 @@ function createAddressPresetFolder({
   scale,
   color,
   name,
+  filenameAddon,
   datasetId,
 }: {
   scale: ResourceScale;
   name: string;
+  filenameAddon?: string;
   datasetId: AddressCohortId;
   color: Color;
 }): PartialPresetFolder {
   return {
-    name,
+    name: filenameAddon ? `${name} - ${filenameAddon}` : name,
     tree: [
       createAddressCountPreset({ scale, name, datasetId, color }),
       ...createCohortPresetList({

app/src/scripts/presets/templates/ratio.ts

@@ -1,22 +1,6 @@
-// import {
-//   applyMultipleSeries,
-//   colors,
-//   createMomentumPresetFolder,
-//   SeriesType,
-// } from "/src/scripts";
-
 import { colors } from "../../utils/colors";
 import { SeriesType } from "../enums";
 
-// // type HeightRatioKey =
-// //   | `${AnyPossibleCohortKey}RealizedPrice`
-// //   | "activePrice"
-// //   | "vaultedPrice"
-// //   | "trueMarketMean";
-
-// // // type DateRatioKey = HeightRatioKey;
-// // type DateRatioKey = HeightRatioKey | `price${AverageName}MA`;
-
 export function createRatioFolder({
   scale,
   color,
@@ -83,25 +67,22 @@ export function createRatioFolder({
           {
             title: `1Y`,
             color: colors._1y,
-            datasetPath: `${ratioDatasetPath}-1y-sma`,
+            datasetPath: `${ratioDatasetPath}-1y-sma` as any,
           },
           {
             title: `1M`,
             color: colors._1m,
-            datasetPath: `${ratioDatasetPath}-1m-sma`,
+            datasetPath: `${ratioDatasetPath}-1m-sma` as any,
           },
           {
             title: `1W`,
             color: colors._1w,
-            datasetPath: `${ratioDatasetPath}-1w-sma`,
+            datasetPath: `${ratioDatasetPath}-1w-sma` as any,
           },
           {
             title: `Raw`,
             color: colors.white,
-            datasetPath: ratioDatasetPath,
+            datasetPath: ratioDatasetPath as any,
-            options: {
-              base: 1,
-            },
           },
           {
             title: `Even`,
@@ -131,7 +112,8 @@ export function createRatioFolder({
           {
             title: `Momentum`,
             seriesType: SeriesType.Based,
-            datasetPath: `${ratioDatasetPath}-1y-sma-momentum-oscillator`,
+            datasetPath:
+              `${ratioDatasetPath}-1y-sma-momentum-oscillator` as any,
           },
           {
             title: `Base`,
@@ -161,25 +143,22 @@ export function createRatioFolder({
           {
             title: `99.9%`,
             color: colors.extremeMax,
-            datasetPath: `${ratioDatasetPath}-99-9p`,
+            datasetPath: `${ratioDatasetPath}-99-9p` as any,
           },
           {
             title: `99.5%`,
             color: colors.extremeMiddle,
-            datasetPath: `${ratioDatasetPath}-99-5p`,
+            datasetPath: `${ratioDatasetPath}-99-5p` as any,
           },
           {
             title: `99%`,
             color: colors.extremeMin,
-            datasetPath: `${ratioDatasetPath}-99p`,
+            datasetPath: `${ratioDatasetPath}-99p` as any,
           },
           {
             title: `Raw`,
             color: colors.white,
             datasetPath: ratioDatasetPath,
-            options: {
-              base: 1,
-            },
           },
         ],
       },
@@ -200,25 +179,22 @@ export function createRatioFolder({
           {
             title: `1%`,
             color: colors.extremeMin,
-            datasetPath: `${ratioDatasetPath}-1p`,
+            datasetPath: `${ratioDatasetPath}-1p` as any,
           },
           {
             title: `0.5%`,
             color: colors.extremeMiddle,
-            datasetPath: `${ratioDatasetPath}-0-5p`,
+            datasetPath: `${ratioDatasetPath}-0-5p` as any,
           },
           {
             title: `0.1%`,
             color: colors.extremeMax,
-            datasetPath: `${ratioDatasetPath}-0-1p`,
+            datasetPath: `${ratioDatasetPath}-0-1p` as any,
           },
           {
             title: `Raw`,
             color: colors.white,
             datasetPath: ratioDatasetPath,
-            options: {
-              base: 1,
-            },
           },
         ],
       },
@@ -232,17 +208,17 @@ export function createRatioFolder({
           {
             title: `99.9%`,
             color: colors.extremeMax,
-            datasetPath: `${valueDatasetPath}-99-9p`,
+            datasetPath: `${valueDatasetPath}-99-9p` as any,
           },
           {
             title: `99.5%`,
             color: colors.extremeMiddle,
-            datasetPath: `${valueDatasetPath}-99-5p`,
+            datasetPath: `${valueDatasetPath}-99-5p` as any,
           },
           {
             title: `99%`,
             color: colors.extremeMin,
-            datasetPath: `${valueDatasetPath}-99p`,
+            datasetPath: `${valueDatasetPath}-99p` as any,
           },
         ],
       },
@@ -256,17 +232,17 @@ export function createRatioFolder({
           {
             title: `0.1%`,
             color: colors.extremeMax,
-            datasetPath: `${valueDatasetPath}-0-1p`,
+            datasetPath: `${valueDatasetPath}-0-1p` as any,
           },
           {
             title: `0.5%`,
             color: colors.extremeMiddle,
-            datasetPath: `${valueDatasetPath}-0-5p`,
+            datasetPath: `${valueDatasetPath}-0-5p` as any,
           },
           {
             title: `1%`,
             color: colors.extremeMin,
-            datasetPath: `${valueDatasetPath}-1p`,
+            datasetPath: `${valueDatasetPath}-1p` as any,
           },
         ],
       },