@awesomephant/reactcake 1.0.0 → 1.1.1

package/Readme.md

@@ -2,7 +2,7 @@
 
 A headless chart framework for React inspired by [Layercake](https://layercake.graphics/). See [documentation](https://reactcake.maxkohler.com/) for usage and motivation.
 
-[![release](https://github.com/awesomephant/reactcake/actions/workflows/release.yml/badge.svg)](https://github.com/awesomephant/reactcake/actions/workflows/release.yml)
+![NPM Version](https://img.shields.io/npm/v/%40awesomephant%2Freactcake) [![release](https://github.com/awesomephant/reactcake/actions/workflows/release.yml/badge.svg)](https://github.com/awesomephant/reactcake/actions/workflows/release.yml)
 
 ## Contributing
 

package/lib/Html/index.tsx

@@ -1,21 +1,24 @@
 import { type ReactNode } from "react";
+import { useReactCake } from "../ReactCake";
+import { LayoutProps } from "../types";
 
-interface HtmlProps {
+interface HtmlProps extends LayoutProps {
   children?: ReactNode;
 }
 
-const Html = ({ children }: HtmlProps) => {
+const Html = ({ overflow = "visible", children }: HtmlProps) => {
+  const { padding } = useReactCake();
+
   return (
     <div
       className="reactcake-html"
       style={{
         position: "absolute",
-        height: "100%",
-        width: "100%",
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
+        top: `${padding.top}px`,
+        left: `${padding.left}px`,
+        right: `${padding.right}px`,
+        bottom: `${padding.bottom}px`,
+        overflow,
       }}
     >
       {children}

package/lib/ScaledSvg/index.tsx

@@ -1,8 +1,8 @@
 import { type ReactNode } from "react";
 import { useReactCake } from "../ReactCake";
+import { LayoutProps } from "../types";
 
-interface SvgProps {
-  overflow?: "visible" | "hidden";
+interface SvgProps extends LayoutProps {
   children?: ReactNode;
 }
 

package/lib/Svg/index.tsx

@@ -1,8 +1,8 @@
 import { type ReactNode } from "react";
 import { useReactCake } from "../ReactCake";
+import { LayoutProps } from "../types";
 
-interface SvgProps {
-  overflow?: "visible" | "hidden";
+interface SvgProps extends LayoutProps {
   children?: ReactNode;
 }
 

package/lib/types.ts

@@ -37,3 +37,7 @@ export interface ContextValue {
   zGet?: (d: unknown) => number | string;
   padding: Padding;
 }
+
+export interface LayoutProps {
+  overflow?: "hidden" | "visible"
+}

package/notes.md

@@ -1 +1,11 @@
 - Anything you draw past the edges shows up in the padding, the way it does on the other layouts. (https://layercake.graphics/guide#canvas)
+
+from: https://layercake.graphics/guide
+
+- it reverses the default range from [0, height] to [height, 0] in order to match the DOM coordinate system and make drawing easier out of the box.
+- The default ranges for each dimension are:
+
+x: [0, width]
+y: [height, 0], unless using a scaleBand or scalePoint and it is [0, height]
+r: [1, 25]. The min is 1 and not zero because this is a scaleSqrt by default and 0 is not allowed in that type of chart.
+z: [0, width]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@awesomephant/reactcake",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "A headless chart framework for React inspired by Layercake",
   "keywords": [
     "react",

package/site/astro.config.mjs

@@ -1,5 +1,6 @@
 // @ts-check
 import { defineConfig } from 'astro/config';
+import {transformerRenderIndentGuides, transformerRenderLineNumber} from "@shikijs/transformers"
 
 import mdx from '@astrojs/mdx';
 
@@ -7,9 +8,14 @@ import react from '@astrojs/react';
 
 export default defineConfig({
   markdown: {
-  shikiConfig: {
-    theme: 'github-light-high-contrast',
-    }
+    shikiConfig: {
+      theme: 'css-variables',
+      defaultColor: false,
+      transformers:[transformerRenderLineNumber(), transformerRenderIndentGuides()]
+    },
+    syntaxHighlight: {
+      type: 'shiki',
+  },
   },
 
   integrations: [mdx(), react()]

package/site/package.json

@@ -21,6 +21,7 @@
     "react-dom": "^19.3.1"
   },
   "devDependencies": {
+    "@shikijs/transformers": "^4.6.0",
     "@types/d3-scale": "^4.0.9",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0"

package/site/src/components/Example.astro

@@ -11,6 +11,7 @@ const {height, width = "100%"} = Astro.props
 <style>
   .container {
     margin: 1rem 0;
-    border: 1px solid #2b598a;
+    border: 1px solid var(--blue-50);
+    font-family: sans-serif;
   }
 </style>

package/site/src/examples/AxisX/AxisX.tsx

@@ -0,0 +1,106 @@
+import { Fragment } from "react";
+import { useReactCake } from "../../../../lib";
+import styles from "./styles.module.css";
+
+interface AxisProps {
+  position?: "top" | "bottom";
+  count?: number;
+  format?: (d: unknown) => string;
+  label?: string;
+  ticksValues?: number | DatumValue[] | ((ticks: unknown[]) => unknown[]);
+  showBaseline?: boolean;
+  grid?: boolean;
+  snapLabels?: boolean;
+  tickLength?: number;
+}
+
+const AxisX = ({
+  ticks,
+  showBaseline = true,
+  position = "bottom",
+  grid = false,
+  format = (d) => String(d),
+  tickLength = 8,
+}: AxisProps) => {
+  const { xScale } = useReactCake();
+
+  if (!xScale) return <></>;
+
+  const isBandwidth = typeof xScale.bandwidth === "function";
+
+  const tickVals = Array.isArray(ticks)
+    ? ticks
+    : isBandwidth
+      ? xScale.domain()
+      : typeof ticks === "function"
+        ? ticks(xScale.ticks())
+        : xScale.ticks(ticks);
+
+  const halfBand = isBandwidth ? xScale.bandwidth() / 2 : 0;
+
+  const tickEls = tickVals.map((v) => {
+    const x = xScale(v);
+
+    return (
+      <Fragment key={`tick-${v.toString()}`}>
+        {grid && (
+          <div
+            className={styles.gridline}
+            style={{
+              top: 0,
+              bottom: 0,
+              left: `${x + halfBand}%`,
+            }}
+          />
+        )}
+        <div
+          className={styles.tick}
+          style={{
+            left: `${x + halfBand}%`,
+            bottom: position === "bottom" ? -tickLength : "auto",
+            top: position === "top" ? -tickLength + 1 : "auto",
+            height: `${tickLength}px`,
+          }}
+        >
+          <span style={{ height: `${tickLength}px` }} className={styles.tick__mark}></span>
+          <span
+            className={styles.tick__text}
+            style={{
+              top: position === "bottom" ? `${tickLength}px` : "auto",
+              left: 0,
+              bottom: position === "top" ? `${tickLength + 2}px` : "auto",
+              transform: `translateX(-50%) ${position === "top" ? "translateY(-50%)" : ""}`,
+            }}
+          >
+            {format(v)}
+          </span>
+        </div>
+      </Fragment>
+    );
+  });
+
+  return (
+    <div
+      className={styles.axis}
+      style={{
+        bottom: position === "bottom" ? 0 : "auto",
+        top: position === "top" ? 0 : "auto",
+      }}
+    >
+      {tickEls}
+      {showBaseline && (
+        <div
+          className={styles.baseline}
+          style={{
+            bottom: position === "bottom" ? 0 : "auto",
+            top: position === "top" ? 0 : "auto",
+            left: 0,
+            right: 0,
+          }}
+        ></div>
+      )}
+    </div>
+  );
+};
+
+export default AxisX;

package/site/src/examples/AxisX/styles.module.css

@@ -0,0 +1,36 @@
+.axis {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+
+.tick {
+  position: absolute;
+}
+
+.tick__mark {
+  border-left: 1px solid var(--blue-50);
+  position: absolute;
+  transform: translateX(-50%);
+}
+
+.gridline {
+  bottom: 0;
+  position: absolute;
+  border-left: 1px dotted var(--blue-50);
+}
+
+
+.baseline {
+  position: absolute;
+  border-bottom: 1px solid var(--blue-50);
+  width: 100%;
+}
+
+.tick__text {
+  display: block;
+  font-size: var(--ms--1);
+  color: var(--blue-50);
+  position: relative;
+  white-space: nowrap;
+}

package/site/src/examples/AxisY/index.tsx

@@ -0,0 +1,76 @@
+import { Fragment } from "react";
+import { useReactCake } from "../../../../lib";
+import styles from "./styles.module.css";
+
+interface AxisYProps {
+  position?: "left" | "right";
+  format?: (d: unknown) => string;
+  label?: string;
+  ticks?: number | DatumValue[] | ((ticks: unknown[]) => unknown[]);
+  showBaseline?: boolean;
+  grid?: boolean;
+  showTicks?: boolean;
+  snapLabels?: boolean;
+  tickLength?: number;
+}
+
+const AxisY = ({
+  ticks,
+  showBaseline = true,
+  grid = true,
+  showTicks = true,
+  tickLength = 8,
+  tickGutter = 3,
+  format = (d) => String(d),
+}: AxisYProps) => {
+  const { yScale, padding } = useReactCake();
+  const isBandwidth = typeof yScale.bandwidth === "function";
+
+  const tickVals = Array.isArray(ticks)
+    ? ticks
+    : isBandwidth
+      ? yScale.domain()
+      : typeof ticks === "function"
+        ? ticks(yScale.ticks())
+        : yScale.ticks(ticks);
+
+  const halfBand = isBandwidth ? yScale.bandwidth() / 2 : 0;
+
+  const tickEls = tickVals.map((v, i) => {
+    const y = yScale(v);
+    return (
+      <Fragment key={`tick-${i}`}>
+        {grid && y + halfBand > 0 && (
+          <div className={styles.gridline} style={{ bottom: `${y + halfBand}%`, left: 0 }}></div>
+        )}
+        {format(v) !== "" && (
+          <div
+            className={styles.tick}
+            style={{
+              width: `${tickLength}px`,
+              bottom: `${y + halfBand}%`,
+              left: -tickLength,
+            }}
+          >
+            {showTicks && <span className={styles.mark}></span>}
+            <span
+              className={styles.text}
+              style={{ position: "absolute", right: `calc(100% + ${tickGutter}px)` }}
+            >
+              {format(v)}
+            </span>
+          </div>
+        )}
+      </Fragment>
+    );
+  });
+
+  return (
+    <div className={styles.axis} style={{ bottom: 0, top: 0 }}>
+      {tickEls}
+      {showBaseline && <div className={styles.baseline} style={{ left: 0 }}></div>}
+    </div>
+  );
+};
+
+export default AxisY;

package/site/src/examples/AxisY/styles.module.css

@@ -0,0 +1,33 @@
+.axis {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+
+.tick {
+  position: absolute;
+  border-top: 1px solid var(--blue-50);
+}
+
+
+.gridline {
+  left: 0;
+  right: 0;
+  position: absolute;
+  border-top: 1px dotted var(--blue-50);
+}
+
+
+.baseline {
+  position: absolute;
+  border-left: 1px solid var(--blue-50);
+  height: 100%;
+}
+
+.text {
+  display: block;
+  font-size: var(--ms--1);
+  color: var(--blue-50);
+  white-space: nowrap;
+  transform: translateY(-50%);
+}

package/site/src/examples/ColumnChart.tsx

@@ -1,26 +1,43 @@
 import { ReactCake, ScaledSvg, Html } from "../../../lib";
+import AxisX from "./AxisX/AxisX";
+import AxisY from "./AxisY";
 import Columns from "./Columns";
-import { scaleLinear, scaleBand } from "d3-scale"
+import { scaleLinear, scaleBand } from "d3-scale";
+import { max } from "d3-array";
+import DebugPadding from "./DebugPadding";
 
 const data = [
-  {year: 2022, value: 12},
-  {year: 2023, value: 22},
-  {year: 2024, value: 32},
-  {year: 2025, value: 15},
-  {year: 2026, value: 52}
-]
+  { year: 2021, value: 18 },
+  { year: 2022, value: 12 },
+  { year: 2023, value: 22 },
+  { year: 2024, value: 32 },
+  { year: 2025, value: 15 },
+  { year: 2026, value: 52 },
+];
 
-const xScale = scaleBand().paddingInner(.1)
+const xScale = scaleBand().paddingInner(0.1).paddingOuter(0.2);
+const yKey = "value";
 
 export default function ColumnChart() {
   return (
-    <ReactCake data={data} x="year" y="value" yScale={scaleLinear()} xScale={xScale} percentRange={true} yDomain={[0, null]} padding={{ top: 10, left: 10, right: 10, bottom: 10 }}>
-    <ScaledSvg>
-      <Columns/>
-    </ScaledSvg>
-    <Html>
-
-    </Html>
-  </ReactCake>
-  )
+    <ReactCake
+      data={data}
+      x="year"
+      y={yKey}
+      yScale={scaleLinear()}
+      xScale={xScale}
+      percentRange={true}
+      yDomain={[0, max(data, (d) => d[yKey]) + 5]}
+      padding={{ top: 10, left: 35, right: 10, bottom: 30 }}
+    >
+      <Html overflow="visible">
+        <DebugPadding />
+        <AxisX grid ticks />
+        <AxisY grid ticks={3} />
+      </Html>
+      <ScaledSvg overflow="hidden">
+        <Columns />
+      </ScaledSvg>
+    </ReactCake>
+  );
 }

package/site/src/examples/Columns.tsx

@@ -1,30 +1,28 @@
-import {  useReactCake } from '../../../lib';
+import { useReactCake } from "../../../lib";
 
 export default function Columns() {
   const { data, x, xGet, yGet, xScale } = useReactCake();
 
-  console.log(data)
-
   return (
     <g className="column-group">
       {data?.map((d) => {
+        const valueY = yGet(d);
+        const xGot = xGet(d);
+        const xPos = Array.isArray(xGot) ? xGot[0] : xGot;
+        const colWidth = xScale.bandwidth ? xScale.bandwidth() : 20;
 
-      const valueY = yGet(d)
-      const xGot = xGet(d)
-      const xPos = Array.isArray(xGot) ? xGot[0] : xGot
-      const colWidth = xScale.bandwidth ? xScale.bandwidth() : 20
-
-      return <rect
-        key={x(d)}
-        x={xPos}
-        y={100 - valueY}
-        width={colWidth}
-        height={valueY}
-        stroke="#196c9e"
-        fill="none"
-      />
+        return (
+          <rect
+            key={x(d)}
+            x={xPos}
+            y={100 - valueY}
+            width={colWidth}
+            height={valueY}
+            stroke="var(--blue-50)"
+            fill="none"
+          />
+        );
       })}
     </g>
-
-  )
+  );
 }

package/site/src/examples/DebugPadding.tsx

@@ -0,0 +1,17 @@
+import { useReactCake } from "../../../lib";
+
+export default function DebugPadding() {
+  const { padding } = useReactCake();
+  return (
+    <div
+      style={{
+        position: "absolute",
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        boxShadow: `${padding.right}px 0 var(--blue-20), 0 ${padding.bottom}px  var(--blue-20), 0 ${-padding.top}px  var(--blue-20), -${padding.left}px 0  var(--blue-20)`,
+      }}
+    ></div>
+  );
+}

package/site/src/examples/Gantt.tsx

@@ -0,0 +1,39 @@
+import { useContext } from "react";
+import { Context } from "../ReactCake/";
+import { type ContextValue } from "../ReactCake/types";
+
+export default function GanttChart({ currentStep = null, highlight, maxDate, maxLegalDate }) {
+  const { x2, xGet, yGet, data, xScale, yScale, zGet } = useContext<ContextValue>(Context);
+
+  const scaledData = data.map((d, i) => {
+    const _maxDate =
+      d.kind === "construction" && maxLegalDate ? Math.min(maxLegalDate, maxDate) : maxDate;
+
+    const _x2 = x2(d) > _maxDate ? _maxDate : x2(d);
+
+    const fromStep = d.from_step || i;
+    const isActive = currentStep >= fromStep;
+
+    return {
+      ...d,
+      width: isActive ? xScale(_x2) - xGet(d) : 0,
+    };
+  });
+
+  return scaledData.map((d, i) => {
+    const x1 = xGet(d);
+    const y = yGet(d);
+
+    return (
+      <rect
+        key={`gantt-${i}`}
+        x={x1}
+        y={y}
+        width={d.width}
+        height={yScale.bandwidth()}
+        fill={zGet(d) || "lightgray"}
+        className={`gantt-block ${currentStep > -1 && highlight[currentStep].includes(i) ? "current" : ""}`}
+      ></rect>
+    );
+  });
+}

package/site/src/examples/OrdinalKey/index.tsx

@@ -0,0 +1,55 @@
+import { useContext } from "react";
+import { Context } from "../ReactCake/";
+import { type ContextValue } from "../ReactCake/types";
+
+interface OrdinalKeyProps {
+  shape?: "square" | "circle" | "line";
+  capitalise?: boolean;
+  format?: ((s: string | number) => string) | Record<string | number, string>;
+  align?: "start" | "center" | "end";
+  sort?: string[];
+}
+
+function cap(s: string) {
+  return String(s).replace(/^\w/, (d) => d.toUpperCase());
+}
+
+export default function OrdinalKey({
+  shape = "square",
+  align = "start",
+  sort = [],
+  format,
+  capitalise = true,
+}: OrdinalKeyProps) {
+  const { zDomain, zScale } = useContext<ContextValue>(Context);
+
+  function displayName(val: string | number): string {
+    if (format) {
+      return typeof format === "function" ? format(val) : format[val] || val;
+    }
+    return capitalise === true ? cap(String(val)) : val;
+  }
+
+  return (
+    <div className="ordinal-key" style={{ justifyContent: align === "end" ? "flex-end" : align }}>
+      {zDomain
+        .sort((a, b) => sort.indexOf(b.kind) - sort.indexOf(a.kind))
+        .map((d) => {
+          return (
+            <div className="key-item" key={d}>
+              <div
+                className={`chip chip__${shape}`}
+                style={{
+                  background:
+                    shape === `line`
+                      ? `linear-gradient(-45deg, var(--color-pageFill) 40%, ${zScale(d)} 41%, ${zScale(d)} 59%, var(--color-pageFill) 60%)`
+                      : zScale(d),
+                }}
+              ></div>
+              <p className="name">{displayName(d)}</p>
+            </div>
+          );
+        })}
+    </div>
+  );
+}

package/site/src/examples/OrdinalKey/styles.css

@@ -0,0 +1,47 @@
+.ordinal-key {
+  display: flex;
+  flex-flow: column;
+  color: var(--o3-color-palette-black-80);
+  font-family: var(--o3-font-family-metric);
+  gap: 0.5em;
+  background: var(--o3-color-palette-paper);
+  box-shadow: 0 0 10px 10px var(--o3-color-palette-paper);
+
+  * {
+    margin: 0;
+    padding: 0;
+  }
+
+  .key-item {
+    display: flex;
+    gap: 0.1em;
+    align-items: center;
+  }
+
+  .chip {
+    display: inline-flex;
+    position: relative;
+    width: 12px;
+    height: 12px;
+  }
+
+  .chip__circle {
+    border-radius: 50%;
+  }
+
+  .chip__line:after {
+    content: "";
+    position: absolute;
+    border-width: 3px;
+    width: 14px;
+    transform: rotate(-45deg);
+    transform-origin: 14px 5px;
+  }
+
+  .name {
+    display: inline-block;
+    font-size: var(--o3-font-size-negative-2);
+    margin-left: 0.2em;
+    line-height: 1;
+  }
+}

package/site/src/layouts/Base.astro

@@ -1,3 +1,7 @@
+---
+import "./code.css"
+---
+
 <!doctype html>
 <html lang="en">
 	<head>
@@ -24,22 +28,38 @@
 	body {
 		margin: 0;
 		width: 100%;
-		padding: 2rem 0;
-		font-family: sans-serif;
+		padding: .5rem;
+		font-family: Georgia, 'Times New Roman', Times, serif;
+		--blue-70: hsl(220, 0%, 20%);
+		--blue-50: hsl(220, 0%, 36%);
+		--blue-30: hsl(220, 0%, 76%);
+		--blue-20: hsl(220, 0%, 92%);
+		--blue-10: hsl(220, 0%, 97%);
+		--ms--1: .8rem
+	}
+
+	a, a:visited {
+	  color: var(--blue-70);
 	}
 
 	.content {
+	  border: 1px solid var(--blue-70);
 	  max-width: 40rem;
 	  line-height: 1.4;
-	  margin: 0 auto;
+		padding: 1rem;
+		border-right: 1px solid var(--blue-70);
 	}
 
 	p, li {
 	  letter-spacing: .002em;
 	}
 
+	h1 {
+	  font-weight: 900;
+	}
+
 	h2 {
-	  margin-top: 2rem;
+	  margin-top: 1rem;
 	  margin-bottom: .25rem;
 	}
 	h3 {
@@ -50,20 +70,13 @@
 
 	p, ul, ol {
 	  margin-bottom: 1rem;
+		&:last-child {
+			margin-bottom: 0;
+		}
 	}
 
 	ul, ol {
 	  margin-left: 1em;
 	}
 
-
-	.astro-code {
-	  border-top: 1px solid lightgray;
-	  border-bottom: 1px solid lightgray;
-	  margin: 1rem 0;
-		padding: 1em 0;
-		line-height: 1.25;
-		font-family: monospace;
-	}
-
 </style>

package/site/src/layouts/code.css

@@ -0,0 +1,37 @@
+.astro-code {
+    --astro-code-background: hsl(51, 62.5%, 93.7%);
+    --astro-code-token-comment: #666;
+	  margin: 1em 0;
+		margin-top: .5em;
+		padding: .5em;
+		font-size: 12px;
+		line-height: 1.25;
+		font-family: monospace;
+	}
+
+
+pre.astro-code .indent {
+  display: inline-block;
+  position: relative;
+  left: var(--indent-offset);
+}
+
+pre.astro-code .indent:empty {
+  height: 1lh;
+  vertical-align: bottom;
+}
+
+pre.astro-code .indent::before {
+  content: '';
+  position: absolute;
+  opacity: 0.5;
+  width: 1px;
+  height: 100%;
+  background-color: red;
+}
+
+pre.astro-code .line-number {
+  user-select: none;
+  color: #666;
+  margin-right: 2ch;
+}

package/site/src/pages/index.mdx

@@ -17,13 +17,13 @@ A headless chart framework for React inspired by [Layercake](https://layercake.g
 ## Installation
 
 ```bash
-npm install --save reactcake
+npm install --save @awesomephant/reactcake
 ```
 
 ## Usage
 
 ```tsx
-import { ReactCake, Html, Svg } from "reactcake";
+import { ReactCake, Html, Svg } from "@awesomephant/reactcake";
 import { scaleLinear, scaleBand } from "d3-scale"
 
 // Chart components live in your project
@@ -35,11 +35,11 @@ const data = [
   {year: 2026, value: 52}
 ];
 
-const xKey = "date";
-const yKey = "value";
+// Use any d3 scale
 const xScale = scaleTime();
 const xScale = scaleBand();
 
+// Build charts declaratively
 return (
   <ReactCake data={data} x="year" y="value" xScale={xScale} yScale={yScale}>
     <Html>
@@ -63,7 +63,7 @@ ReactCake is built on [D3](https://d3js.org/what-is-d3).
 
 ### Relationship to Layercake
 
-This project is an attempt to translate the overall approach and development ergonomics of the Layercake framework from Svelte to React. It does not aim for feature parity or identical API surfaces.
+This project is an attempt to carefully translate the overall approach and development ergonomics of the Layercake framework from Svelte to React. It does not aim for feature parity or identical API surfaces.
 
 
 ### Prior work

package/site/tsconfig.json

@@ -11,4 +11,4 @@
     "jsx": "react-jsx",
     "jsxImportSource": "react"
   }
-}
+}

package/site/src/examples/AxisX.tsx

@@ -1 +0,0 @@
-// TKTK