Polish docs combo toggles and realtime preview

iexitdev · iexitdev · commit 7da12c2f7721 · 2026-06-18T18:15:00.000-04:00
diff --git a/apps/site/src/previews/proPreviewComponents.tsx b/apps/site/src/previews/proPreviewComponents.tsx
@@ -571,7 +571,6 @@ export const RealtimeBarChartPreview = ({
         barRadius={3}
         barWidthRatio={0.82}
         data={rows}
-        defaultSelectedBar={{ dataIndex: rows.length - 1, seriesKey: "users" }}
         formatXLabel={formatXLabel}
         formatYLabel={(value: number) => String(Math.round(value))}
         height={150}
@@ -635,13 +634,21 @@ export const ComboTogglePreview = ({
 
   return (
     <View style={{ width: chartWidth }}>
-      <View style={toggleStyles.toggleRow}>
+      <View
+        style={[
+          toggleStyles.toggleRow,
+          mode === "dark"
+            ? toggleStyles.toggleRowDark
+            : toggleStyles.toggleRowLight
+        ]}
+      >
         {items.map((item) => {
           const active = visibleSeriesKeys.includes(item.key);
 
           return (
             <Pressable
               key={item.key}
+              aria-pressed={active}
               accessibilityRole="button"
               onPress={() => {
                 setVisibleSeriesKeys((currentKeys) => {
@@ -660,7 +667,11 @@ export const ComboTogglePreview = ({
                 active && {
                   backgroundColor: item.tint,
                   borderColor: item.color
-                }
+                },
+                active &&
+                  (mode === "dark"
+                    ? toggleStyles.toggleActiveDark
+                    : toggleStyles.toggleActiveLight)
               ]}
             >
               <View
diff --git a/apps/site/src/previews/toggleStyles.ts b/apps/site/src/previews/toggleStyles.ts
@@ -4,44 +4,68 @@ export const toggleStyles = {
     borderRadius: 999,
     borderStyle: "solid" as const,
     borderWidth: 1,
+    display: "flex" as const,
     flexDirection: "row" as const,
-    gap: 6,
+    gap: 5,
     height: 28,
     justifyContent: "center" as const,
+    minWidth: 88,
     paddingBottom: 0,
-    paddingHorizontal: 10,
-    paddingLeft: 10,
-    paddingRight: 10,
+    paddingHorizontal: 11,
+    paddingLeft: 11,
+    paddingRight: 11,
     paddingTop: 0
   },
   toggleDark: {
-    backgroundColor: "rgba(255, 255, 255, 0.03)",
-    borderColor: "rgba(255, 255, 255, 0.12)"
+    backgroundColor: "transparent",
+    borderColor: "transparent"
   },
   toggleLight: {
-    backgroundColor: "rgba(16, 18, 23, 0.03)",
-    borderColor: "rgba(16, 18, 23, 0.12)"
+    backgroundColor: "transparent",
+    borderColor: "transparent"
+  },
+  toggleActiveDark: {
+    boxShadow: "0 6px 16px rgba(0, 0, 0, 0.18)"
+  },
+  toggleActiveLight: {
+    boxShadow: "0 5px 14px rgba(7, 23, 51, 0.07)"
   },
   toggleRow: {
     alignItems: "center" as const,
+    alignSelf: "flex-start" as const,
+    borderRadius: 999,
+    borderStyle: "solid" as const,
+    borderWidth: 1,
+    display: "flex" as const,
     flexDirection: "row" as const,
-    flexWrap: "wrap" as const,
-    gap: 8,
-    marginBottom: 12
+    gap: 2,
+    marginBottom: 10,
+    padding: 2
+  },
+  toggleRowDark: {
+    backgroundColor: "rgba(255, 255, 255, 0.045)",
+    borderColor: "rgba(255, 255, 255, 0.12)"
+  },
+  toggleRowLight: {
+    backgroundColor: "rgba(7, 23, 51, 0.045)",
+    borderColor: "rgba(7, 23, 51, 0.1)"
   },
   toggleSwatch: {
+    borderColor: "rgba(255, 255, 255, 0.48)",
+    borderStyle: "solid" as const,
+    borderWidth: 1,
     borderRadius: 999,
-    height: 7,
-    width: 7
+    height: 6,
+    width: 6
   },
   toggleSwatchInactive: {
     opacity: 0.34
   },
   toggleText: {
-    fontSize: 12,
-    fontWeight: "600" as const,
+    fontSize: 11,
+    fontWeight: "700" as const,
     letterSpacing: 0,
-    lineHeight: 14
+    lineHeight: 13
   },
   toggleTextActiveDark: {
     color: "#f7f8f8"
diff --git a/docs/charts/combo.md b/docs/charts/combo.md
@@ -111,6 +111,10 @@ same x-axis.
 import { useState } from "react";
 import { Pressable, Text, View } from "react-native";
 import { ComboChart } from "@chart-kit/pro";
+import {
+  resolveCartesianChartThemeConfig,
+  useChartKitTheme
+} from "react-native-chart-kit/v2";
 
 const money = (value: number) => `$${Math.round(value)}k`;
 const percent = (value: number) => `${Math.round(value)}%`;
@@ -130,10 +134,21 @@ const toggleItems = [
   { key: "line-margin", label: "Margin" }
 ];
 
+const colorWithAlpha = (color: string, alpha: string) =>
+  color.startsWith("#") && color.length === 7 ? `${color}${alpha}` : color;
+
 export function ChannelPlan() {
   const [visibleSeriesKeys, setVisibleSeriesKeys] = useState(
     toggleItems.map((item) => item.key)
   );
+  const chartKitTheme = useChartKitTheme();
+  const resolvedTheme = resolveCartesianChartThemeConfig({
+    mode: chartKitTheme.mode,
+    preset: chartKitTheme.preset,
+    presets: chartKitTheme.presets,
+    theme: chartKitTheme.theme
+  });
+  const isLight = chartKitTheme.mode === "light";
 
   const toggleSeries = (key: string) => {
     setVisibleSeriesKeys((currentKeys) => {
@@ -145,26 +160,73 @@ export function ChannelPlan() {
     });
   };
 
+  const seriesToggles = toggleItems.map((item, index) => ({
+    ...item,
+    color: resolvedTheme.series[index] ?? "#2563eb"
+  }));
+
   return (
-    <View>
-      <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 8 }}>
-        {toggleItems.map((item) => {
+    <View style={{ width: 410 }}>
+      <View
+        style={{
+          alignSelf: "flex-start",
+          backgroundColor: isLight
+            ? "rgba(7, 23, 51, 0.045)"
+            : "rgba(255, 255, 255, 0.055)",
+          borderColor: resolvedTheme.grid,
+          borderRadius: 999,
+          borderWidth: 1,
+          display: "flex",
+          flexDirection: "row",
+          gap: 2,
+          marginBottom: 10,
+          padding: 2
+        }}
+      >
+        {seriesToggles.map((item) => {
           const active = visibleSeriesKeys.includes(item.key);
 
           return (
             <Pressable
               key={item.key}
+              aria-pressed={active}
               accessibilityRole="button"
               onPress={() => toggleSeries(item.key)}
               style={{
-                borderColor: active ? "#2563eb" : "rgba(100, 116, 139, 0.32)",
+                alignItems: "center",
+                display: "flex",
+                backgroundColor: active
+                  ? colorWithAlpha(item.color, isLight ? "10" : "18")
+                  : "transparent",
+                borderColor: active ? item.color : "transparent",
                 borderRadius: 999,
                 borderWidth: 1,
-                paddingHorizontal: 10,
-                paddingVertical: 5
+                flexDirection: "row",
+                gap: 5,
+                height: 28,
+                justifyContent: "center",
+                minWidth: 88,
+                paddingHorizontal: 11
               }}
             >
-              <Text style={{ color: active ? "#2563eb" : "#64748b" }}>
+              <View
+                style={{
+                  backgroundColor: item.color,
+                  borderRadius: 999,
+                  height: 6,
+                  opacity: active ? 1 : 0.36,
+                  width: 6
+                }}
+              />
+              <Text
+                numberOfLines={1}
+                style={{
+                  color: active ? resolvedTheme.text : resolvedTheme.mutedText,
+                  fontSize: 11,
+                  fontWeight: "700",
+                  lineHeight: 13
+                }}
+              >
                 {item.label}
               </Text>
             </Pressable>
diff --git a/docs/charts/realtime.md b/docs/charts/realtime.md
@@ -66,7 +66,6 @@ export function ActiveUsersStream() {
       liveKey="pointIndex"
       windowSize={30}
       animation={{ duration: updateMs, mode: "slide" }}
-      defaultSelectedBar={{ dataIndex: rows.length - 1, seriesKey: "users" }}
       interaction="tap"
       series={[{ yKey: "users", label: "Users", color: "#2563eb" }]}
       formatXLabel={(value) => {
@@ -101,8 +100,9 @@ Use `liveKey` whenever the incoming array is a rolling window. Selection keys ar
 based on that identity, so a selected bar can move left while its tooltip value
 stays attached to the same row.
 
-`defaultSelectedBar` seeds the initial visible tooltip. `interaction="tap"` lets
-the user move selection without adding controlled state.
+Omit `defaultSelectedBar` when the stream should open idle. Add it only when the
+chart should seed an initial visible tooltip. `interaction="tap"` lets the user
+move selection without adding controlled state.
 
 `tooltip={{ placement: "top" }}` pins the tooltip to the top of the chart while
 the x-position follows the selected bar.
