Merge pull request #816 from nteract/integration-7

Improve temporal custom charts

Author: emeeks

.clinerules

@@ -326,6 +326,11 @@ Charts render with `role="group"` (outer interactive wrapper, keyboard/focus) an
 
 ## Performance
 
+- **scalePadding**: Pixel inset on scale ranges to prevent glyph clipping at chart edges. Insets both X and Y ranges — edge data points map to N pixels from the chart boundary instead of 0px. Domain and tick values unchanged (rendered positions shift inward with the range). On `StreamXYFrame`, use `scalePadding` directly; on HOC charts, pass via `frameProps`:
+  ```jsx
+  <StreamXYFrame chartType="candlestick" scalePadding={12} ... />
+  <Scatterplot data={data} pointRadius={8} frameProps={{ scalePadding: 12 }} />
+  ```
 - **Range/dumbbell plot**: Use `chartType="candlestick"` on StreamXYFrame with only `highAccessor` + `lowAccessor` (omit `openAccessor`/`closeAccessor`). Auto-detects range mode: no body rect, endpoint dots, single `rangeColor` via `candlestickStyle={{ rangeColor: "#6366f1" }}`. When `bodyWidth === 0`, body rect is skipped entirely (no invisible DOM elements).
 
 ## Performance

.cursorrules

@@ -326,6 +326,11 @@ Charts render with `role="group"` (outer interactive wrapper, keyboard/focus) an
 
 ## Performance
 
+- **scalePadding**: Pixel inset on scale ranges to prevent glyph clipping at chart edges. Insets both X and Y ranges — edge data points map to N pixels from the chart boundary instead of 0px. Domain and tick values unchanged (rendered positions shift inward with the range). On `StreamXYFrame`, use `scalePadding` directly; on HOC charts, pass via `frameProps`:
+  ```jsx
+  <StreamXYFrame chartType="candlestick" scalePadding={12} ... />
+  <Scatterplot data={data} pointRadius={8} frameProps={{ scalePadding: 12 }} />
+  ```
 - **Range/dumbbell plot**: Use `chartType="candlestick"` on StreamXYFrame with only `highAccessor` + `lowAccessor` (omit `openAccessor`/`closeAccessor`). Auto-detects range mode: no body rect, endpoint dots, single `rangeColor` via `candlestickStyle={{ rangeColor: "#6366f1" }}`. When `bodyWidth === 0`, body rect is skipped entirely (no invisible DOM elements).
 
 ## Performance

.github/copilot-instructions.md

@@ -326,6 +326,11 @@ Charts render with `role="group"` (outer interactive wrapper, keyboard/focus) an
 
 ## Performance
 
+- **scalePadding**: Pixel inset on scale ranges to prevent glyph clipping at chart edges. Insets both X and Y ranges — edge data points map to N pixels from the chart boundary instead of 0px. Domain and tick values unchanged (rendered positions shift inward with the range). On `StreamXYFrame`, use `scalePadding` directly; on HOC charts, pass via `frameProps`:
+  ```jsx
+  <StreamXYFrame chartType="candlestick" scalePadding={12} ... />
+  <Scatterplot data={data} pointRadius={8} frameProps={{ scalePadding: 12 }} />
+  ```
 - **Range/dumbbell plot**: Use `chartType="candlestick"` on StreamXYFrame with only `highAccessor` + `lowAccessor` (omit `openAccessor`/`closeAccessor`). Auto-detects range mode: no body rect, endpoint dots, single `rangeColor` via `candlestickStyle={{ rangeColor: "#6366f1" }}`. When `bodyWidth === 0`, body rect is skipped entirely (no invisible DOM elements).
 
 ## Performance

.windsurfrules

@@ -326,6 +326,11 @@ Charts render with `role="group"` (outer interactive wrapper, keyboard/focus) an
 
 ## Performance
 
+- **scalePadding**: Pixel inset on scale ranges to prevent glyph clipping at chart edges. Insets both X and Y ranges — edge data points map to N pixels from the chart boundary instead of 0px. Domain and tick values unchanged (rendered positions shift inward with the range). On `StreamXYFrame`, use `scalePadding` directly; on HOC charts, pass via `frameProps`:
+  ```jsx
+  <StreamXYFrame chartType="candlestick" scalePadding={12} ... />
+  <Scatterplot data={data} pointRadius={8} frameProps={{ scalePadding: 12 }} />
+  ```
 - **Range/dumbbell plot**: Use `chartType="candlestick"` on StreamXYFrame with only `highAccessor` + `lowAccessor` (omit `openAccessor`/`closeAccessor`). Auto-detects range mode: no body rect, endpoint dots, single `rangeColor` via `candlestickStyle={{ rangeColor: "#6366f1" }}`. When `bodyWidth === 0`, body rect is skipped entirely (no invisible DOM elements).
 
 ## Performance

CLAUDE.md

@@ -326,6 +326,11 @@ Charts render with `role="group"` (outer interactive wrapper, keyboard/focus) an
 
 ## Performance
 
+- **scalePadding**: Pixel inset on scale ranges to prevent glyph clipping at chart edges. Insets both X and Y ranges — edge data points map to N pixels from the chart boundary instead of 0px. Domain and tick values unchanged (rendered positions shift inward with the range). On `StreamXYFrame`, use `scalePadding` directly; on HOC charts, pass via `frameProps`:
+  ```jsx
+  <StreamXYFrame chartType="candlestick" scalePadding={12} ... />
+  <Scatterplot data={data} pointRadius={8} frameProps={{ scalePadding: 12 }} />
+  ```
 - **Range/dumbbell plot**: Use `chartType="candlestick"` on StreamXYFrame with only `highAccessor` + `lowAccessor` (omit `openAccessor`/`closeAccessor`). Auto-detects range mode: no body rect, endpoint dots, single `rangeColor` via `candlestickStyle={{ rangeColor: "#6366f1" }}`. When `bodyWidth === 0`, body rect is skipped entirely (no invisible DOM elements).
 
 ## Performance

docs/public/llms-full.txt

@@ -326,6 +326,11 @@ Charts render with `role="group"` (outer interactive wrapper, keyboard/focus) an
 
 ## Performance
 
+- **scalePadding**: Pixel inset on scale ranges to prevent glyph clipping at chart edges. Insets both X and Y ranges — edge data points map to N pixels from the chart boundary instead of 0px. Domain and tick values unchanged (rendered positions shift inward with the range). On `StreamXYFrame`, use `scalePadding` directly; on HOC charts, pass via `frameProps`:
+  ```jsx
+  <StreamXYFrame chartType="candlestick" scalePadding={12} ... />
+  <Scatterplot data={data} pointRadius={8} frameProps={{ scalePadding: 12 }} />
+  ```
 - **Range/dumbbell plot**: Use `chartType="candlestick"` on StreamXYFrame with only `highAccessor` + `lowAccessor` (omit `openAccessor`/`closeAccessor`). Auto-detects range mode: no body rect, endpoint dots, single `rangeColor` via `candlestickStyle={{ rangeColor: "#6366f1" }}`. When `bodyWidth === 0`, body rect is skipped entirely (no invisible DOM elements).
 
 ## Performance

docs/src/examples/CandlestickChart.js

@@ -86,10 +86,11 @@ const frameProps = {
   lowAccessor: "low",
   closeAccessor: "close",
   candlestickStyle: {
-    upColor: theme[2],
-    downColor: theme[1],
+    upColor: "#4caf50",
+    downColor: "#e45050",
     wickColor: "#999",
   },
+  scalePadding: 12,
   size: [700, 400],
   margin: { left: 80, bottom: 50, right: 10, top: 40 },
   showAxes: true,

docs/src/pages/charts/GaugeChartPage.js

@@ -34,28 +34,60 @@ const gaugeProps = [
 ]
 
 function StreamingGaugeDemo() {
+  // NYT-style election needle: value drifts around 50 with occasional swings
   const [value, setValue] = useState(50)
   useEffect(() => {
     const id = setInterval(() => {
-      setValue(v => Math.max(0, Math.min(100, v + (Math.random() - 0.45) * 8)))
-    }, 500)
+      setValue(v => {
+        const drift = (Math.random() - 0.48) * 3
+        const revert = (52 - v) * 0.02
+        return Math.max(40, Math.min(60, v + drift + revert))
+      })
+    }, 400)
     return () => clearInterval(id)
   }, [])
+
+  const lead = value - 50
+  const absLead = Math.abs(lead)
+  const leaderLabel = absLead < 2 ? "Toss-up" : lead > 0 ? "Candidate B" : "Candidate A"
+  const leaderColor = absLead < 2 ? "#888" : lead > 0 ? "#4575b4" : "#d73027"
+
   return (
-    <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 16 }}>
+    <div style={{ textAlign: "center", marginBottom: 16, display: "flex", flexDirection: "column", alignItems: "center" }}>
+      <div style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: 1, color: "var(--semiotic-text-secondary, #888)", marginBottom: 4 }}>
+        Estimated chance of winning
+      </div>
       <GaugeChart
         value={value}
-        max={100}
+        min={40}
+        max={60}
+        sweep={180}
+        arcWidth={0.15}
+        fillZones={false}
+        showNeedle={true}
+        needleColor="#222"
+        showScaleLabels={false}
         thresholds={[
-          { value: 50, color: "#4caf50", label: "Normal" },
-          { value: 80, color: "#ff9800", label: "Warning" },
-          { value: 100, color: "#f44336", label: "Critical" },
+          { value: 45, color: "#d73027" },
+          { value: 48, color: "#fc8d59" },
+          { value: 52, color: "#ccc" },
+          { value: 55, color: "#91bfdb" },
+          { value: 60, color: "#4575b4" },
         ]}
-        width={250}
+        centerContent={
+          <div style={{ textAlign: "center", lineHeight: 1.1 }}>
+            <div style={{ fontSize: 28, fontWeight: 700, color: leaderColor }}>
+              {absLead < 2 ? "Even" : `+${absLead.toFixed(1)}`}
+            </div>
+            <div style={{ fontSize: 11, color: leaderColor, fontWeight: 600 }}>{leaderLabel}</div>
+          </div>
+        }
+        width={360}
         height={200}
       />
-      <div style={{ fontSize: 12, color: "var(--semiotic-text-secondary, #666)" }}>
-        Live value: <strong>{Math.round(value)}</strong>
+      <div style={{ display: "flex", justifyContent: "space-between", width: 360, fontSize: 11, color: "var(--semiotic-text-secondary, #888)", padding: "4px 40px 0" }}>
+        <span style={{ color: "#d73027", fontWeight: 600 }}>← Candidate A</span>
+        <span style={{ color: "#4575b4", fontWeight: 600 }}>Candidate B →</span>
       </div>
     </div>
   )
@@ -284,24 +316,46 @@ export default function GaugeChartPage() {
         language="jsx"
       />
 
-      <h3 id="streaming">Streaming Updates</h3>
+      <h3 id="streaming">Streaming — Election Needle</h3>
       <p>
-        Update the <code>value</code> prop to animate the gauge. The example
-        below simulates a live metric that fluctuates every 500ms.
+        The gauge below simulates a live election forecast in the style of the
+        NYT needle. The value drifts around 50% with a slight lean,
+        updating every 400ms. The diverging color scheme runs from red
+        (Candidate A) through a grey toss-up zone to blue (Candidate B).
+        Only the needle moves — the threshold zones stay fixed.
       </p>
 
       <StreamingGaugeDemo />
 
       <CodeBlock
-        code={`function LiveGauge() {
+        code={`function ElectionNeedle() {
   const [value, setValue] = useState(50)
   useEffect(() => {
     const id = setInterval(() => {
-      setValue(v => Math.max(0, Math.min(100, v + (Math.random() - 0.45) * 8)))
-    }, 500)
+      setValue(v => {
+        const drift = (Math.random() - 0.48) * 3
+        const revert = (52 - v) * 0.02
+        return Math.max(40, Math.min(60, v + drift + revert))
+      })
+    }, 400)
     return () => clearInterval(id)
   }, [])
-  return <GaugeChart value={value} thresholds={[...]} />
+
+  return (
+    <GaugeChart
+      value={value} min={40} max={60} sweep={180}
+      arcWidth={0.15} needleColor="#222"
+      fillZones={false}  // zones stay fixed, only needle moves
+      thresholds={[
+        { value: 45, color: "#d73027" },   // strong A (dark red)
+        { value: 48, color: "#fc8d59" },   // lean A (light red)
+        { value: 52, color: "#ccc" },      // toss-up (grey)
+        { value: 55, color: "#91bfdb" },   // lean B (light blue)
+        { value: 60, color: "#4575b4" },   // strong B (dark blue)
+      ]}
+      centerContent={...}  // +{abs(value-50)} colored by leader
+    />
+  )
 }`}
         language="jsx"
       />

docs/src/pages/cookbook/CandlestickChartPage.js

@@ -95,8 +95,8 @@ function StreamingCandlestickDemo({ width }) {
       lowAccessor="low"
       closeAccessor="close"
       candlestickStyle={{
-        upColor: "#4daf4a",
-        downColor: "#e41a1c",
+        upColor: "#4caf50",
+        downColor: "#e45050",
         wickColor: "#999",
       }}
       windowSize={40}
@@ -160,9 +160,10 @@ export default function CandlestickChartPage() {
   highAccessor="high"
   lowAccessor="low"
   closeAccessor="close"
+  scalePadding={12}         // prevents edge candles from clipping
   candlestickStyle={{
-    upColor: "#4daf4a",   // close >= open
-    downColor: "#e41a1c", // close < open
+    upColor: "#4caf50",     // close >= open
+    downColor: "#e45050",  // close < open
     wickColor: "#999",
   }}
 />`}
@@ -262,6 +263,15 @@ export default function CandlestickChartPage() {
         range mode: no body rect, endpoint dots, and a single{" "}
         <code>rangeColor</code> instead of up/down coloring.
       </p>
+      <p>
+        Both examples on this page use <code>scalePadding</code> to prevent
+        the edge glyphs (candle bodies, dumbbell dots) from being clipped at
+        the chart boundary. <code>scalePadding={`{12}`}</code> insets the X and Y
+        scale ranges by 12 pixels on each side — the data domain and tick
+        values are unchanged, but their rendered positions shift inward
+        because the pixel range is inset, so marks at the min/max data
+        values have room to render fully.
+      </p>
 
       <div style={{ marginBottom: 24 }}>
         <StreamXYFrame
@@ -281,6 +291,7 @@ export default function CandlestickChartPage() {
           xAccessor="day"
           highAccessor="high"
           lowAccessor="low"
+          scalePadding={12}
           candlestickStyle={{ rangeColor: "#6366f1", wickWidth: 2 }}
           showAxes={true}
           enableHover={true}
@@ -304,6 +315,7 @@ export default function CandlestickChartPage() {
   xAccessor="day"
   highAccessor="high"
   lowAccessor="low"
+  scalePadding={12}  // prevents edge glyph clipping
   candlestickStyle={{ rangeColor: "#6366f1", wickWidth: 2 }}
   showAxes enableHover
   tooltipContent={d => (

docs/src/process.js

@@ -152,6 +152,7 @@ export const processNodes = [
       "amplitude",
       "runtimeMode",
       "extentPadding",
+      "scalePadding",
       "nodeIDAccessor",
       "nodeIdAccessor",
       "sourceAccessor",