@awesomephant/reactcake 1.0.0 → 1.1.0

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,22 @@
 import { type ReactNode } from "react";
+import { useReactCake } from "../ReactCake";
 
 interface HtmlProps {
   children?: ReactNode;
 }
 
 const Html = ({ 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,
+        left: padding.left,
+        right: padding.right,
+        bottom: padding.bottom,
       }}
     >
       {children}

package/package.json

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

package/site/src/components/Example.astro

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

package/site/src/examples/AxisX/index.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 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,31 @@
+.axis {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+
+.tick {
+  position: absolute;
+  border-left: 1px solid var(--blue-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,41 @@
 import { ReactCake, ScaledSvg, Html } from "../../../lib";
+import AxisX from "./AxisX/index";
+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";
 
 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>
+        <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/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

@@ -26,6 +26,15 @@
 		width: 100%;
 		padding: 2rem 0;
 		font-family: sans-serif;
+		--blue-70: hsl(212, 70%, 26%);
+		--blue-50: hsl(212, 70%, 36%);
+		--blue-30: hsl(212, 50%, 76%);
+		--blue-10: hsl(212, 40%, 97%);
+		--ms--1: .8rem
+	}
+
+	a, a:visited {
+	  color: var(--blue-70);
 	}
 
 	.content {

package/site/src/pages/index.mdx

@@ -35,8 +35,6 @@ const data = [
   {year: 2026, value: 52}
 ];
 
-const xKey = "date";
-const yKey = "value";
 const xScale = scaleTime();
 const xScale = scaleBand();
 

package/site/tsconfig.json

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

package/site/src/examples/AxisX.tsx

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