@adminide-stack/yantra-mobile 12.0.141-alpha.1 → 12.0.142-alpha.0

package/lib/features/notion/database/DatabaseDateLayouts.js

@@ -0,0 +1,792 @@
+import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useMemo,useState,useRef,useEffect}from'react';import {useWindowDimensions,View,StyleSheet,Text,ScrollView,Pressable}from'react-native';import {Ionicons}from'@expo/vector-icons';import Svg,{Circle}from'react-native-svg';import {textColorOf}from'../notionRichText.js';import {ui}from'../notionUi.js';import {rowTitle,CellValue}from'./DatabaseCells.js';import {ChoiceSheet}from'./DatabaseSheets.js';import {calendarDateProperty,readCalendarSettings,monthOf,bucketRowsByDay,weekdayLabels,weekOf,monthGrid,weekLabel,monthLabel,isSameMonth,dayLabel,dayNumber,shiftMonth,isWeekend}from'./databaseCalendar.js';import {localDayKey,shiftDayKey}from'./databaseFilter.js';import {splitRowsBySpan,timelineRange,axisTicks,dayOffset,DAY_WIDTH,TIMELINE_ZOOMS,barGeometry}from'./databaseTimeline.js';import {readChartViewSettings,chartViewItems,chartGroupColumns,chartValueColumns,CHART_VIEW_KINDS,CHART_VIEW_SORTS}from'./chartView.js';import {formatChartValue as fmt,defaultChartColor}from'./chartData.js';var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+function Segmented({
+  palette,
+  items,
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsx(View, { style: [styles.segmented, {
+    backgroundColor: palette.fill
+  }], children: items.map((it) => {
+    const on = it.id === value;
+    return /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", accessibilityState: {
+      selected: on
+    }, onPress: () => onChange(it.id), style: [styles.segment, on && {
+      backgroundColor: palette.card
+    }], children: /* @__PURE__ */ jsx(Text, { style: [styles.segmentText, {
+      color: on ? palette.text : palette.textMuted
+    }], children: it.label }) }, it.id);
+  }) });
+}
+function RowLine({
+  p,
+  row
+}) {
+  const {
+    palette
+  } = p;
+  return /* @__PURE__ */ jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: `Open ${rowTitle(row) || "Untitled"}`, onPress: () => p.onOpenRow(row), onLongPress: () => p.onRowMenu(row), style: ({
+    pressed
+  }) => [styles.rowLine, {
+    backgroundColor: pressed ? palette.pressed : palette.card,
+    borderColor: palette.hairline
+  }], children: [
+    /* @__PURE__ */ jsx(Ionicons, { name: "document-text-outline", size: 17, color: palette.textMuted }),
+    /* @__PURE__ */ jsxs(View, { style: ui.flex, children: [
+      /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles.rowTitle, {
+        color: rowTitle(row) ? palette.text : palette.textFaint
+      }], children: rowTitle(row) || "Untitled" }),
+      p.rowProps.length ? /* @__PURE__ */ jsx(View, { style: styles.rowProps, children: p.rowProps.map((c) => /* @__PURE__ */ jsx(CellValue, { row, column: c, getValue: p.getValue, isDark: p.isDark, palette }, c.name)) }) : null
+    ] })
+  ] });
+}
+function NoDateProperty({
+  palette,
+  what
+}) {
+  return /* @__PURE__ */ jsxs(View, { style: styles.emptyLayout, children: [
+    /* @__PURE__ */ jsx(Ionicons, { name: "calendar-outline", size: 34, color: palette.textFaint }),
+    /* @__PURE__ */ jsx(Text, { style: [styles.emptyTitle, {
+      color: palette.text
+    }], children: `A ${what} needs a Date property` }),
+    /* @__PURE__ */ jsx(Text, { style: [styles.emptyText, {
+      color: palette.textMuted
+    }], children: "Add a Date property under Properties, then pick it in View options." })
+  ] });
+}
+function CalendarLayout(p) {
+  var _a;
+  const {
+    palette
+  } = p;
+  const column = useMemo(() => calendarDateProperty(p.allColumns, p.groupBy), [p.allColumns, p.groupBy]);
+  const cal = readCalendarSettings(p.settings);
+  const today = localDayKey(/* @__PURE__ */ new Date());
+  const [month, setMonth] = useState(() => monthOf(/* @__PURE__ */ new Date()));
+  const [day, setDay] = useState(today);
+  const buckets = useMemo(() => column ? bucketRowsByDay(p.rows, column, p.getValue) : null, [column, p.getValue, p.rows]);
+  if (!column || !buckets) return /* @__PURE__ */ jsx(NoDateProperty, { palette, what: "calendar" });
+  const weekdays = weekdayLabels(cal.weekStartsOn, "narrow");
+  const weeks = cal.mode === "week" ? [weekOf(day, cal.weekStartsOn)] : monthGrid(month, cal.weekStartsOn);
+  const keep = (d) => cal.showWeekends || !isWeekend(d);
+  const dayRows = (_a = buckets.byDay.get(day)) != null ? _a : [];
+  const editable = column.type === "date";
+  const go = (delta) => {
+    if (cal.mode === "week") {
+      const next = shiftDayKey(day, delta * 7);
+      setDay(next);
+      setMonth(monthOf(/* @__PURE__ */ new Date(`${next}T12:00:00`)));
+    } else setMonth((m) => shiftMonth(m, delta));
+  };
+  return /* @__PURE__ */ jsxs(ScrollView, { contentContainerStyle: styles.calendar, children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.calHead, children: [
+      /* @__PURE__ */ jsx(Text, { style: [styles.calTitle, {
+        color: palette.text
+      }], children: cal.mode === "week" ? weekLabel(weeks[0]) : monthLabel(month) }),
+      /* @__PURE__ */ jsx(View, { style: ui.flex }),
+      /* @__PURE__ */ jsx(Pressable, { accessibilityLabel: "Previous", onPress: () => go(-1), hitSlop: 8, style: styles.navBtn, children: /* @__PURE__ */ jsx(Ionicons, { name: "chevron-back", size: 20, color: palette.text }) }),
+      /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", onPress: () => {
+        setMonth(monthOf(/* @__PURE__ */ new Date()));
+        setDay(today);
+      }, style: [styles.todayBtn, {
+        backgroundColor: palette.fill
+      }], children: /* @__PURE__ */ jsx(Text, { style: [styles.todayText, {
+        color: palette.text
+      }], children: "Today" }) }),
+      /* @__PURE__ */ jsx(Pressable, { accessibilityLabel: "Next", onPress: () => go(1), hitSlop: 8, style: styles.navBtn, children: /* @__PURE__ */ jsx(Ionicons, { name: "chevron-forward", size: 20, color: palette.text }) })
+    ] }),
+    /* @__PURE__ */ jsx(View, { style: styles.modeRow, children: /* @__PURE__ */ jsx(Segmented, { palette, items: [{
+      id: "month",
+      label: "Month"
+    }, {
+      id: "week",
+      label: "Week"
+    }], value: cal.mode, onChange: (mode) => p.onChangeSettings({
+      calendarMode: mode === "week" ? "week" : void 0
+    }) }) }),
+    /* @__PURE__ */ jsx(View, { style: styles.weekRow, children: weeks[0].map((d, i) => ({
+      d,
+      i
+    })).filter(({
+      d
+    }) => keep(d)).map(({
+      i
+    }) => /* @__PURE__ */ jsx(Text, { style: [styles.weekday, {
+      color: palette.textMuted
+    }], children: weekdays[i] }, i)) }),
+    weeks.map((week) => /* @__PURE__ */ jsx(View, { style: styles.weekRow, children: week.filter((d) => keep(d)).map((d) => {
+      var _a2;
+      const rows = (_a2 = buckets.byDay.get(d)) != null ? _a2 : [];
+      const on = d === day;
+      const isToday = d === today;
+      const dim = cal.mode === "month" && !isSameMonth(d, month);
+      return /* @__PURE__ */ jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: `${dayLabel(d)}, ${rows.length} ${rows.length === 1 ? "row" : "rows"}`, accessibilityState: {
+        selected: on
+      }, onPress: () => setDay(d), style: [styles.dayCell, on && {
+        backgroundColor: palette.primarySoft
+      }], children: [
+        /* @__PURE__ */ jsx(View, { style: [styles.dayNum, isToday && {
+          backgroundColor: palette.primary
+        }], children: /* @__PURE__ */ jsx(Text, { style: [styles.dayNumText, {
+          color: isToday ? palette.onPrimary : dim ? palette.textFaint : palette.text
+        }], children: dayNumber(d) }) }),
+        /* @__PURE__ */ jsx(View, { style: styles.dots, children: rows.slice(0, 3).map((r) => /* @__PURE__ */ jsx(View, { style: [styles.dot, {
+          backgroundColor: palette.primary
+        }] }, r.id)) }),
+        rows.length > 3 ? /* @__PURE__ */ jsx(Text, { style: [styles.more, {
+          color: palette.textMuted
+        }], children: `+${rows.length - 3}` }) : null
+      ] }, d);
+    }) }, week[0])),
+    /* @__PURE__ */ jsxs(View, { style: styles.dayHead, children: [
+      /* @__PURE__ */ jsx(Text, { style: [styles.dayTitle, {
+        color: palette.text
+      }], children: dayLabel(day) }),
+      editable ? /* @__PURE__ */ jsxs(Pressable, { accessibilityRole: "button", onPress: () => p.onAddRowWith({
+        [column.name]: day
+      }), style: [styles.addSmall, {
+        backgroundColor: palette.primarySoft
+      }], children: [
+        /* @__PURE__ */ jsx(Ionicons, { name: "add", size: 16, color: palette.primary }),
+        /* @__PURE__ */ jsx(Text, { style: [styles.addSmallText, {
+          color: palette.primary
+        }], children: "New" })
+      ] }) : null
+    ] }),
+    dayRows.length ? dayRows.map((r) => /* @__PURE__ */ jsx(RowLine, { p, row: r }, r.id)) : /* @__PURE__ */ jsx(Text, { style: [styles.none, {
+      color: palette.textMuted
+    }], children: "Nothing on this day." }),
+    buckets.undated.length ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Text, { style: [styles.section, {
+        color: palette.textMuted
+      }], children: `No ${column.name} \xB7 ${buckets.undated.length}` }),
+      buckets.undated.map((r) => /* @__PURE__ */ jsx(RowLine, { p, row: r }, r.id))
+    ] }) : null
+  ] });
+}
+const BAR_HEIGHT = 30;
+const LANE = 42;
+function TimelineLayout(p) {
+  const {
+    palette
+  } = p;
+  const {
+    width
+  } = useWindowDimensions();
+  const column = useMemo(() => calendarDateProperty(p.allColumns, p.groupBy), [p.allColumns, p.groupBy]);
+  const [zoom, setZoom] = useState("week");
+  const today = localDayKey(/* @__PURE__ */ new Date());
+  const split = useMemo(() => column ? splitRowsBySpan(p.rows, column, p.getValue) : null, [column, p.getValue, p.rows]);
+  const range = useMemo(() => {
+    var _a;
+    return timelineRange((_a = split == null ? void 0 : split.dated.map((d) => d.span)) != null ? _a : [], today, zoom);
+  }, [split, today, zoom]);
+  const dw = DAY_WIDTH[zoom];
+  const ticks = useMemo(() => axisTicks(range, zoom), [range, zoom]);
+  const scroller = useRef(null);
+  useEffect(() => {
+    const x = Math.max(0, dayOffset(range, today) * dw - width / 3);
+    const t = setTimeout(() => {
+      var _a;
+      return (_a = scroller.current) == null ? void 0 : _a.scrollTo({
+        x,
+        animated: false
+      });
+    }, 0);
+    return () => clearTimeout(t);
+  }, [dw, range, today, width]);
+  if (!column || !split) return /* @__PURE__ */ jsx(NoDateProperty, { palette, what: "timeline" });
+  const contentWidth = range.days * dw;
+  const todayX = dayOffset(range, today) * dw;
+  return /* @__PURE__ */ jsxs(ScrollView, { contentContainerStyle: styles.timelineWrap, children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.modeRow, children: [
+      /* @__PURE__ */ jsx(Segmented, { palette, items: TIMELINE_ZOOMS, value: zoom, onChange: setZoom }),
+      /* @__PURE__ */ jsx(View, { style: ui.flex }),
+      /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", onPress: () => {
+        var _a;
+        return (_a = scroller.current) == null ? void 0 : _a.scrollTo({
+          x: Math.max(0, todayX - width / 3),
+          animated: true
+        });
+      }, style: [styles.todayBtn, {
+        backgroundColor: palette.fill
+      }], children: /* @__PURE__ */ jsx(Text, { style: [styles.todayText, {
+        color: palette.text
+      }], children: "Today" }) })
+    ] }),
+    /* @__PURE__ */ jsx(ScrollView, { ref: scroller, horizontal: true, showsHorizontalScrollIndicator: false, children: /* @__PURE__ */ jsxs(View, { style: {
+      width: contentWidth
+    }, children: [
+      /* @__PURE__ */ jsx(View, { style: [styles.axis, {
+        borderBottomColor: palette.hairline
+      }], children: ticks.map((t) => /* @__PURE__ */ jsxs(View, { style: [styles.tick, {
+        left: t.offset * dw
+      }], children: [
+        t.major ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles.tickMajor, {
+          color: palette.text
+        }], children: t.major }) : /* @__PURE__ */ jsx(View, { style: styles.tickSpacer }),
+        /* @__PURE__ */ jsx(Text, { style: [styles.tickLabel, {
+          color: palette.textMuted
+        }], children: t.label })
+      ] }, t.day)) }),
+      /* @__PURE__ */ jsxs(View, { style: {
+        height: Math.max(split.dated.length * LANE + 16, 120)
+      }, children: [
+        /* @__PURE__ */ jsx(View, { style: [styles.todayLine, {
+          left: todayX,
+          backgroundColor: palette.primary
+        }] }),
+        split.dated.map(({
+          row,
+          span
+        }, i) => {
+          const g = barGeometry(range, span, dw);
+          const title = rowTitle(row) || "Untitled";
+          const inside = g.width > 90;
+          return /* @__PURE__ */ jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: `Open ${title}`, onPress: () => p.onOpenRow(row), onLongPress: () => p.onRowMenu(row), style: [styles.barLane, {
+            top: 8 + i * LANE,
+            left: g.left
+          }], children: [
+            /* @__PURE__ */ jsx(View, { style: [styles.bar, {
+              width: Math.max(g.width, 8),
+              backgroundColor: palette.primarySoft,
+              borderColor: palette.primary
+            }], children: inside ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles.barText, {
+              color: palette.text
+            }], children: title }) : null }),
+            !inside ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles.barOutside, {
+              color: palette.text
+            }], children: title }) : null
+          ] }, row.id);
+        })
+      ] })
+    ] }) }),
+    split.undated.length ? /* @__PURE__ */ jsxs(View, { style: styles.undated, children: [
+      /* @__PURE__ */ jsx(Text, { style: [styles.section, {
+        color: palette.textMuted
+      }], children: `No ${column.name} \xB7 ${split.undated.length}` }),
+      split.undated.map((r) => /* @__PURE__ */ jsx(RowLine, { p, row: r }, r.id))
+    ] }) : null
+  ] });
+}
+function chartColor(color, index, isDark) {
+  if (color && color.startsWith("#")) return color;
+  return color && textColorOf(color, isDark) || defaultChartColor(index);
+}
+function ChartLayout(p) {
+  var _a, _b, _c, _d;
+  const {
+    palette
+  } = p;
+  const {
+    width
+  } = useWindowDimensions();
+  const s = readChartViewSettings(p.settings, p.allColumns);
+  const items = useMemo(() => chartViewItems(p.rows, p.allColumns, p.getValue, s), [p.allColumns, p.getValue, p.rows, s]);
+  const groups = chartGroupColumns(p.allColumns);
+  const values = chartValueColumns(p.allColumns);
+  const [picker, setPicker] = useState(null);
+  const set = (patch) => {
+    var _a2;
+    return p.onChangeSettings({
+      chart: __spreadValues(__spreadValues(__spreadValues({}, (_a2 = p.settings.chart) != null ? _a2 : {}), s), patch)
+    });
+  };
+  const max = Math.max(1, ...items.map((i) => i.value));
+  const total = items.reduce((n, i) => n + i.value, 0);
+  const control = (label, value, which) => /* @__PURE__ */ jsxs(Pressable, { accessibilityRole: "button", onPress: () => setPicker(which), style: [styles.control, {
+    backgroundColor: palette.fill
+  }], children: [
+    /* @__PURE__ */ jsx(Text, { style: [styles.controlLabel, {
+      color: palette.textMuted
+    }], children: label }),
+    /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles.controlValue, {
+      color: palette.text
+    }], children: value }),
+    /* @__PURE__ */ jsx(Ionicons, { name: "chevron-down", size: 13, color: palette.textMuted })
+  ] });
+  if (!groups.length) {
+    return /* @__PURE__ */ jsxs(View, { style: styles.emptyLayout, children: [
+      /* @__PURE__ */ jsx(Ionicons, { name: "bar-chart-outline", size: 34, color: palette.textFaint }),
+      /* @__PURE__ */ jsx(Text, { style: [styles.emptyTitle, {
+        color: palette.text
+      }], children: "Nothing to chart yet" }),
+      /* @__PURE__ */ jsx(Text, { style: [styles.emptyText, {
+        color: palette.textMuted
+      }], children: "A chart groups rows by a Select, Status, Person, Date or Checkbox property." })
+    ] });
+  }
+  const plotWidth = width - 32;
+  const donut = 180;
+  const r = 70;
+  const circ = 2 * Math.PI * r;
+  let acc = 0;
+  return /* @__PURE__ */ jsxs(ScrollView, { contentContainerStyle: styles.chart, children: [
+    /* @__PURE__ */ jsxs(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.controls, children: [
+      control("Chart", (_b = (_a = CHART_VIEW_KINDS.find((k) => k.kind === s.kind)) == null ? void 0 : _a.label) != null ? _b : s.kind, "kind"),
+      control("Group by", s.groupBy || "None", "group"),
+      control("Value", s.aggregate === "sum" && s.valueProperty ? `Sum of ${s.valueProperty}` : "Count", "measure"),
+      control("Sort", (_d = (_c = CHART_VIEW_SORTS.find((x) => x.sort === s.sort)) == null ? void 0 : _c.label) != null ? _d : "", "sort")
+    ] }),
+    !items.length ? /* @__PURE__ */ jsx(Text, { style: [styles.none, {
+      color: palette.textMuted
+    }], children: "No rows to chart." }) : s.kind === "donut" ? /* @__PURE__ */ jsxs(View, { style: styles.donutWrap, children: [
+      /* @__PURE__ */ jsxs(View, { children: [
+        /* @__PURE__ */ jsxs(Svg, { width: donut, height: donut, children: [
+          /* @__PURE__ */ jsx(Circle, { cx: donut / 2, cy: donut / 2, r, stroke: palette.fill, strokeWidth: 26, fill: "none" }),
+          items.map((it, i) => {
+            const len = total ? it.value / total * circ : 0;
+            const el = /* @__PURE__ */ jsx(Circle, { cx: donut / 2, cy: donut / 2, r, stroke: chartColor(it.color, i, p.isDark), strokeWidth: 26, fill: "none", strokeDasharray: `${len} ${circ - len}`, strokeDashoffset: -acc, rotation: -90, origin: `${donut / 2}, ${donut / 2}` }, it.label);
+            acc += len;
+            return el;
+          })
+        ] }),
+        /* @__PURE__ */ jsxs(View, { style: styles.donutCenter, pointerEvents: "none", children: [
+          /* @__PURE__ */ jsx(Text, { style: [styles.donutTotal, {
+            color: palette.text
+          }], children: fmt(total) }),
+          /* @__PURE__ */ jsx(Text, { style: [styles.donutLabel, {
+            color: palette.textMuted
+          }], children: s.aggregate === "sum" ? "Total" : "Rows" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(View, { style: styles.legend, children: items.map((it, i) => /* @__PURE__ */ jsxs(View, { style: styles.legendRow, children: [
+        /* @__PURE__ */ jsx(View, { style: [styles.swatch, {
+          backgroundColor: chartColor(it.color, i, p.isDark)
+        }] }),
+        /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles.legendLabel, {
+          color: palette.text
+        }], children: it.label }),
+        /* @__PURE__ */ jsx(Text, { style: [styles.legendValue, {
+          color: palette.textMuted
+        }], children: fmt(it.value) })
+      ] }, it.label)) })
+    ] }) : s.kind === "bar" ? /* @__PURE__ */ jsx(View, { style: styles.bars, children: items.map((it, i) => /* @__PURE__ */ jsxs(View, { style: styles.hBarRow, children: [
+      /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles.hBarLabel, {
+        color: palette.text
+      }], children: it.label }),
+      /* @__PURE__ */ jsx(View, { style: [styles.hBarTrack, {
+        backgroundColor: palette.fill
+      }], children: /* @__PURE__ */ jsx(View, { style: [styles.hBarFill, {
+        width: `${it.value / max * 100}%`,
+        backgroundColor: chartColor(it.color, i, p.isDark)
+      }] }) }),
+      /* @__PURE__ */ jsx(Text, { style: [styles.hBarValue, {
+        color: palette.textMuted
+      }], children: fmt(it.value) })
+    ] }, it.label)) }) : /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, children: /* @__PURE__ */ jsx(View, { style: [styles.columns, {
+      minWidth: plotWidth
+    }], children: items.map((it, i) => /* @__PURE__ */ jsxs(View, { style: styles.column, children: [
+      /* @__PURE__ */ jsx(Text, { style: [styles.colValue, {
+        color: palette.textMuted
+      }], children: fmt(it.value) }),
+      /* @__PURE__ */ jsx(View, { style: [styles.colBar, {
+        height: Math.max(4, it.value / max * 200),
+        backgroundColor: chartColor(it.color, i, p.isDark)
+      }] }),
+      /* @__PURE__ */ jsx(Text, { numberOfLines: 2, style: [styles.colLabel, {
+        color: palette.text
+      }], children: it.label })
+    ] }, it.label)) }) }),
+    /* @__PURE__ */ jsx(ChoiceSheet, { visible: picker === "kind", title: "Chart", palette, value: s.kind, choices: CHART_VIEW_KINDS.map((k) => ({
+      value: k.kind,
+      label: k.label
+    })), onClose: () => setPicker(null), onPick: (kind) => {
+      setPicker(null);
+      set({
+        kind
+      });
+    } }),
+    /* @__PURE__ */ jsx(ChoiceSheet, { visible: picker === "group", title: "Group by", palette, value: s.groupBy, choices: groups.map((c) => ({
+      value: c.name,
+      label: c.name
+    })), onClose: () => setPicker(null), onPick: (groupBy) => {
+      setPicker(null);
+      set({
+        groupBy
+      });
+    } }),
+    /* @__PURE__ */ jsx(ChoiceSheet, { visible: picker === "measure", title: "Value", palette, value: s.aggregate === "sum" && s.valueProperty ? `sum:${s.valueProperty}` : "count", choices: [{
+      value: "count",
+      label: "Count rows"
+    }, ...values.map((c) => ({
+      value: `sum:${c.name}`,
+      label: `Sum of ${c.name}`
+    }))], onClose: () => setPicker(null), onPick: (v) => {
+      setPicker(null);
+      if (v === "count") set({
+        aggregate: "count"
+      });
+      else set({
+        aggregate: "sum",
+        valueProperty: v.slice(4)
+      });
+    } }),
+    /* @__PURE__ */ jsx(ChoiceSheet, { visible: picker === "sort", title: "Sort", palette, value: s.sort, choices: CHART_VIEW_SORTS.map((x) => ({
+      value: x.sort,
+      label: x.label
+    })), onClose: () => setPicker(null), onPick: (sort) => {
+      setPicker(null);
+      set({
+        sort
+      });
+    } })
+  ] });
+}
+const styles = StyleSheet.create({
+  segmented: {
+    flexDirection: "row",
+    borderRadius: 10,
+    padding: 2
+  },
+  segment: {
+    paddingHorizontal: 12,
+    height: 30,
+    borderRadius: 8,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  segmentText: {
+    fontSize: 13,
+    fontWeight: "600"
+  },
+  calendar: {
+    padding: 12,
+    paddingBottom: 48
+  },
+  calHead: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    marginBottom: 8
+  },
+  calTitle: {
+    fontSize: 19,
+    fontWeight: "800"
+  },
+  navBtn: {
+    padding: 6
+  },
+  todayBtn: {
+    paddingHorizontal: 12,
+    height: 32,
+    borderRadius: 10,
+    justifyContent: "center"
+  },
+  todayText: {
+    fontSize: 14,
+    fontWeight: "600"
+  },
+  modeRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 10
+  },
+  weekRow: {
+    flexDirection: "row"
+  },
+  weekday: {
+    flex: 1,
+    textAlign: "center",
+    fontSize: 12,
+    fontWeight: "600",
+    paddingVertical: 4
+  },
+  dayCell: {
+    flex: 1,
+    alignItems: "center",
+    paddingVertical: 6,
+    minHeight: 56,
+    borderRadius: 10
+  },
+  dayNum: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  dayNumText: {
+    fontSize: 15,
+    fontWeight: "600"
+  },
+  dots: {
+    flexDirection: "row",
+    gap: 3,
+    marginTop: 4,
+    height: 6
+  },
+  dot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3
+  },
+  more: {
+    fontSize: 10,
+    marginTop: 1
+  },
+  dayHead: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginTop: 16,
+    marginBottom: 8
+  },
+  dayTitle: {
+    fontSize: 16,
+    fontWeight: "700"
+  },
+  addSmall: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    paddingHorizontal: 10,
+    height: 30,
+    borderRadius: 9
+  },
+  addSmallText: {
+    fontSize: 14,
+    fontWeight: "700"
+  },
+  none: {
+    fontSize: 14,
+    paddingVertical: 12,
+    textAlign: "center"
+  },
+  section: {
+    fontSize: 13,
+    fontWeight: "700",
+    marginTop: 18,
+    marginBottom: 8,
+    textTransform: "uppercase",
+    letterSpacing: 0.4
+  },
+  rowLine: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    padding: 12,
+    borderRadius: 12,
+    borderWidth: StyleSheet.hairlineWidth,
+    marginBottom: 8
+  },
+  rowTitle: {
+    fontSize: 15,
+    fontWeight: "600"
+  },
+  rowProps: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 6,
+    marginTop: 4
+  },
+  emptyLayout: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 32,
+    gap: 8
+  },
+  emptyTitle: {
+    fontSize: 17,
+    fontWeight: "700",
+    textAlign: "center"
+  },
+  emptyText: {
+    fontSize: 14,
+    textAlign: "center",
+    lineHeight: 20
+  },
+  timelineWrap: {
+    paddingVertical: 12,
+    paddingBottom: 48
+  },
+  axis: {
+    height: 44,
+    borderBottomWidth: StyleSheet.hairlineWidth
+  },
+  tick: {
+    position: "absolute",
+    top: 2
+  },
+  tickMajor: {
+    fontSize: 12,
+    fontWeight: "700",
+    width: 120
+  },
+  tickSpacer: {
+    height: 16
+  },
+  tickLabel: {
+    fontSize: 11,
+    marginTop: 2
+  },
+  todayLine: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    width: 2,
+    opacity: 0.6
+  },
+  barLane: {
+    position: "absolute",
+    flexDirection: "row",
+    alignItems: "center",
+    height: BAR_HEIGHT
+  },
+  bar: {
+    height: BAR_HEIGHT,
+    borderRadius: 8,
+    borderWidth: 1,
+    justifyContent: "center",
+    paddingHorizontal: 8
+  },
+  barText: {
+    fontSize: 13,
+    fontWeight: "600"
+  },
+  barOutside: {
+    fontSize: 13,
+    fontWeight: "600",
+    marginLeft: 6,
+    maxWidth: 220
+  },
+  undated: {
+    paddingHorizontal: 12
+  },
+  chart: {
+    padding: 16,
+    paddingBottom: 48,
+    gap: 16
+  },
+  controls: {
+    gap: 8
+  },
+  control: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingHorizontal: 10,
+    height: 34,
+    borderRadius: 10
+  },
+  controlLabel: {
+    fontSize: 12,
+    fontWeight: "600"
+  },
+  controlValue: {
+    fontSize: 14,
+    fontWeight: "600",
+    maxWidth: 160
+  },
+  donutWrap: {
+    alignItems: "center",
+    gap: 16
+  },
+  donutCenter: __spreadProps(__spreadValues({}, StyleSheet.absoluteFillObject), {
+    alignItems: "center",
+    justifyContent: "center"
+  }),
+  donutTotal: {
+    fontSize: 24,
+    fontWeight: "800"
+  },
+  donutLabel: {
+    fontSize: 12
+  },
+  legend: {
+    alignSelf: "stretch",
+    gap: 8
+  },
+  legendRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10
+  },
+  swatch: {
+    width: 12,
+    height: 12,
+    borderRadius: 3
+  },
+  legendLabel: {
+    flex: 1,
+    fontSize: 15
+  },
+  legendValue: {
+    fontSize: 14,
+    fontVariant: ["tabular-nums"]
+  },
+  bars: {
+    gap: 12
+  },
+  hBarRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10
+  },
+  hBarLabel: {
+    width: 96,
+    fontSize: 14
+  },
+  hBarTrack: {
+    flex: 1,
+    height: 22,
+    borderRadius: 6,
+    overflow: "hidden"
+  },
+  hBarFill: {
+    height: "100%",
+    borderRadius: 6
+  },
+  hBarValue: {
+    width: 48,
+    textAlign: "right",
+    fontSize: 13,
+    fontVariant: ["tabular-nums"]
+  },
+  columns: {
+    flexDirection: "row",
+    alignItems: "flex-end",
+    gap: 14,
+    height: 260,
+    paddingTop: 12
+  },
+  column: {
+    width: 56,
+    alignItems: "center",
+    justifyContent: "flex-end"
+  },
+  colValue: {
+    fontSize: 12,
+    marginBottom: 4,
+    fontVariant: ["tabular-nums"]
+  },
+  colBar: {
+    width: 36,
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8
+  },
+  colLabel: {
+    fontSize: 12,
+    marginTop: 6,
+    textAlign: "center"
+  }
+});export{CalendarLayout,ChartLayout,TimelineLayout};//# sourceMappingURL=DatabaseDateLayouts.js.map