global: snapshot part 6

website/scripts/options/shared.js

@@ -268,7 +268,37 @@ export function simplePriceRatioTree({ pattern, title, legend, color }) {
 }
 
 /**
- * Create Price + Ratio charts with percentile bands (no SMAs/z-scores)
+ * @template T
+ * @param {InvestorPercentilesPattern} p
+ * @param {(entry: InvestorPercentileEntry) => T} extract
+ */
+function percentileBands(p, extract) {
+  return [
+    { name: "pct95", prop: extract(p.pct95), color: colors.ratioPct._95 },
+    { name: "pct5", prop: extract(p.pct5), color: colors.ratioPct._5 },
+    { name: "pct98", prop: extract(p.pct98), color: colors.ratioPct._98 },
+    { name: "pct2", prop: extract(p.pct2), color: colors.ratioPct._2 },
+    { name: "pct99", prop: extract(p.pct99), color: colors.ratioPct._99 },
+    { name: "pct1", prop: extract(p.pct1), color: colors.ratioPct._1 },
+  ];
+}
+
+/** @param {{ name: string, prop: AnyPricePattern, color: Color }[]} bands */
+function priceBands(bands) {
+  return bands.map(({ name, prop, color }) =>
+    price({ series: prop, name, color, defaultActive: false, options: { lineStyle: 1 } }),
+  );
+}
+
+/** @param {{ name: string, prop: AnySeriesPattern, color: Color }[]} bands */
+function ratioBands(bands) {
+  return bands.map(({ name, prop, color }) =>
+    line({ series: prop, name, color, defaultActive: false, unit: Unit.ratio, options: { lineStyle: 1 } }),
+  );
+}
+
+/**
+ * Price + Ratio charts with percentile bands
  * @param {Object} args
  * @param {PriceRatioPercentilesPattern} args.pattern
  * @param {string} args.title
@@ -285,22 +315,8 @@ export function priceRatioPercentilesTree({
   priceReferences,
 }) {
   const p = pattern.percentiles;
-  const pctUsd = [
-    { name: "pct95", prop: p.pct95.price, color: colors.ratioPct._95 },
-    { name: "pct5", prop: p.pct5.price, color: colors.ratioPct._5 },
-    { name: "pct98", prop: p.pct98.price, color: colors.ratioPct._98 },
-    { name: "pct2", prop: p.pct2.price, color: colors.ratioPct._2 },
-    { name: "pct99", prop: p.pct99.price, color: colors.ratioPct._99 },
-    { name: "pct1", prop: p.pct1.price, color: colors.ratioPct._1 },
-  ];
-  const pctRatio = [
-    { name: "pct95", prop: p.pct95.ratio, color: colors.ratioPct._95 },
-    { name: "pct5", prop: p.pct5.ratio, color: colors.ratioPct._5 },
-    { name: "pct98", prop: p.pct98.ratio, color: colors.ratioPct._98 },
-    { name: "pct2", prop: p.pct2.ratio, color: colors.ratioPct._2 },
-    { name: "pct99", prop: p.pct99.ratio, color: colors.ratioPct._99 },
-    { name: "pct1", prop: p.pct1.ratio, color: colors.ratioPct._1 },
-  ];
+  const pctUsd = percentileBands(p, (e) => e.price);
+  const pctRatio = percentileBands(p, (e) => e.ratio);
   return [
     {
       name: "Price",
@@ -308,15 +324,7 @@ export function priceRatioPercentilesTree({
       top: [
         price({ series: pattern, name: legend, color }),
         ...(priceReferences ?? []),
-        ...pctUsd.map(({ name, prop, color }) =>
-          price({
-            series: prop,
-            name,
-            color,
-            defaultActive: false,
-            options: { lineStyle: 1 },
-          }),
-        ),
+        ...priceBands(pctUsd),
       ],
     },
     {
@@ -324,15 +332,7 @@ export function priceRatioPercentilesTree({
       title: `${title} Ratio`,
       top: [
         price({ series: pattern, name: legend, color }),
-        ...pctUsd.map(({ name, prop, color }) =>
-          price({
-            series: prop,
-            name,
-            color,
-            defaultActive: false,
-            options: { lineStyle: 1 },
-          }),
-        ),
+        ...priceBands(pctUsd),
       ],
       bottom: [
         baseline({
@@ -341,16 +341,7 @@ export function priceRatioPercentilesTree({
           unit: Unit.ratio,
           base: 1,
         }),
-        ...pctRatio.map(({ name, prop, color }) =>
-          line({
-            series: prop,
-            name,
-            color,
-            defaultActive: false,
-            unit: Unit.ratio,
-            options: { lineStyle: 1 },
-          }),
-        ),
+        ...ratioBands(pctRatio),
       ],
     },
   ];
@@ -723,6 +714,7 @@ export function createPriceRatioCharts({
   priceReferences,
 }) {
   const titleFn = formatCohortTitle(context);
+  const pctUsd = percentileBands(ratio.percentiles, (e) => e.price);
   return [
     {
       name: "Price",
@@ -730,6 +722,7 @@ export function createPriceRatioCharts({
       top: [
         price({ series: pricePattern, name: legend, color }),
         ...(priceReferences ?? []),
+        ...priceBands(pctUsd),
       ],
     },
     createRatioChart({