@graphysdk/theme-chalkboard 0.0.0-stage → 0.1.1-beta.1791459323341

package/LICENSE.md

@@ -0,0 +1,17 @@
+# License
+
+This software is available under any of the following licenses, at your option,
+depending on which one's conditions you meet:
+
+- **PolyForm Noncommercial 1.0.0** — for noncommercial use (personal,
+  charitable, educational, research, government).
+  See [licenses/PolyForm-NonCommercial-1.0.0.md](licenses/PolyForm-NonCommercial-1.0.0.md)
+
+- **PolyForm Small Business 1.0.0** — free commercial use for organizations
+  under the size thresholds defined in the license.
+  See [licenses/PolyForm-Small-Business-1.0.0.md](licenses/PolyForm-Small-Business-1.0.0.md)
+
+- **PolyForm Free Trial 1.0.0** — a 32-day evaluation for anyone else.
+  See [licenses/PolyForm-Free-Trial-1.0.0.md](licenses/PolyForm-Free-Trial-1.0.0.md)
+
+For commercial use beyond these terms, contact [hello@graphy.dev](mailto:hello@graphy.dev) or visit [https://graphy.dev](https://graphy.dev).

package/README.md

@@ -1,3 +1,60 @@
-# Temporary Holding Version
+# @graphysdk/theme-chalkboard
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+> **Beta.** This theme is on a `0.x` version line: a minor release may change its look. Use a caret range (`^0.1.0`) to take only patches.
+
+A chalkboard theme for the Graphy charting SDK: graphs drawn in coloured chalk on a green-grey school board.
+
+Learn more at [graphy.dev](https://graphy.dev).
+
+## Install
+
+```bash
+npm install @graphysdk/theme-chalkboard @graphysdk/react
+```
+
+Requires React 19. Its only peer is `@graphysdk/react`.
+
+## Usage
+
+Pass the theme to `createGraphyKit` and import its fonts once. Every graph drawn through the kit's `GraphProvider` takes the theme; specs are written as usual.
+
+```tsx
+import { createGraphyKit, GraphRenderer } from '@graphysdk/react';
+import { chalkboard } from '@graphysdk/theme-chalkboard';
+import '@graphysdk/theme-chalkboard/fonts.css';
+
+const kit = createGraphyKit({ theme: chalkboard });
+
+const spec = kit.pipe(
+  kit.createSpec({ x: 'quarter', y: 'revenue', color: 'region' }),
+  kit.geom.bar({ position: 'dodge' }),
+  kit.scale.x(),
+  kit.scale.y()
+);
+
+export function Revenue({ data }) {
+  return (
+    <kit.GraphProvider spec={spec} data={data}>
+      <GraphRenderer />
+    </kit.GraphProvider>
+  );
+}
+```
+
+A spec's own `styles()`, scales and `config()` sit above the theme, so a graph can still change anything. The theme is drawn for a graph about 600 pixels wide; `style.graph({ textScale: 1.5 })` scales its type for a larger one.
+
+`fonts.css` loads Gochi Hand from Google Fonts. To host the font yourself, leave the import out and load a family named `Gochi Hand` before the first graph is drawn. The face has one weight.
+
+## Docs
+
+- [Chalkboard](https://docs.graphy.dev/sdk-next/themes/chalkboard)
+
+## Feedback
+
+This theme is released early to hear what works. Tell us on [Discord](https://discord.gg/yGmYCjkSr).
+
+## Licence
+
+This package is available under PolyForm Noncommercial, Small Business, or a 32-day Free Trial. Free Trial is local or internal evaluation only — it does not cover a public page. See [what you can do under the trial](https://docs.graphy.dev/licence/evaluation).
+
+For a commercial licence, [talk to us](https://graphy.dev/license).

package/dist/board.d.ts

@@ -0,0 +1,18 @@
+export interface BoardColors {
+    /** The frame's wood, with a lighter edge where the light catches it and a darker one in shadow. */
+    wood: string;
+    woodLight: string;
+    woodDark: string;
+    /** The felt of the duster. */
+    felt: string;
+    /** The dust that falls from the board and settles on the ledge. */
+    dust: string;
+    /** The stubs of chalk lying on the ledge, the colours of the box. */
+    chalks: readonly string[];
+}
+/** How broad the frame is round the board, in pixels. */
+export declare const FRAME_WIDTH = 8;
+/** How tall the ledge along the foot of the board is, in pixels; the graph keeps this clear below it. */
+export declare const LEDGE_HEIGHT = 13;
+/** The frame and the ledge, as a data URI for the graph's `overlay`. */
+export declare const buildBoard: (colors: BoardColors) => string;

package/dist/chalkboard.d.ts

@@ -0,0 +1,16 @@
+import { Theme } from '@graphysdk/react';
+/**
+ * Graphs as a teacher draws them on a classroom board: a green-grey board with the smears of a wiped
+ * duster, in a wooden frame with stubs of chalk and a duster on the ledge along its foot. A bar is
+ * outlined twice in chalk and shaded with the side of the stick, each chalk at its own angle; a pie is
+ * a circle drawn in one sweep that runs past its start, with spokes ruled out to it; a line is a chalk
+ * stroke through a cross at each reading; a point is a small chalk ring. The grain of the chalk is drawn,
+ * as strokes that skip, never laid on as noise. Groups take the chalks of the box: white, yellow, pink,
+ * sky blue, green and orange. Chalk is matte, so nothing casts a shadow. Drawn for the dark scheme only.
+ *
+ * The face is Gochi Hand. Import `@graphysdk/theme-chalkboard/fonts.css` once to load it.
+ *
+ * @example
+ *   const kit = createGraphyKit({ theme: chalkboard });
+ */
+export declare const chalkboard: Theme;

package/dist/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});let C=require("react"),n=require("@graphysdk/react"),c=require("react/jsx-runtime");var we=/[a-df-zA-DF-Z]|[-+]?(?:\d+\.?\d*|\.\d+)(?:[eE][-+]?\d+)?/gu,Re=/^[a-zA-Z]$/u,Ee=(e,r)=>e==="H"?"x":e==="V"?"y":r%2===0?"x":"y",Z=(e,r)=>{let t="",a=0;return(e.match(we)??[]).map(o=>{if(Re.test(o))return t=o.toUpperCase(),a=0,o;const h=Ee(t,a);return a+=1,String(Number(o)*(h==="x"?r.width:r.height))}).join(" ")},z=(e,r)=>{const t=(0,n.getX)(e),a=(0,n.getY)(e)??(0,n.getYMax)(e);return t===null||a===null?null:{x:(0,n.toViewBoxX)(t)*r.width,y:(0,n.toViewBoxY)(a)*r.height}},K=(e,r)=>{const t=(0,n.getX)(e),a=(0,n.getY)(e)??(0,n.getRadiusExtent)(e).outerRadius;if(t===null||a===null)return null;const o=(0,n.polarToUnit)(t,a),h=Math.min(r.width,r.height)/2;return{x:r.width/2+o.x*h,y:r.height/2-o.y*h}},_e=e=>({x:0,y:0,width:e.width,height:e.height}),$e=e=>`${e.map((r,t)=>`${t===0?"M":"L"}${r.x},${r.y}`).join(" ")} Z`;var Ie=34,U=8,j=72,J=11,D=6,Me=(e,r,t)=>`<svg x="${e}" y="${r}" width="1" height="1" overflow="visible">${t}</svg>`,Ce=({wood:e,woodLight:r,woodDark:t})=>{const a=(o,h,d,i=1)=>`<rect x="${o}" y="${o}" rx="3" style="width:calc(100% - ${o*2}px);height:calc(100% - ${o*2}px)" fill="none" stroke="${d}" stroke-width="${h}" stroke-opacity="${i}"/>`;return a(8/2,8,e)+a(.5,1,t)+a(8-.5,1,r,.7)+a(9,2,"#000000",.18)},He=({wood:e,woodLight:r,woodDark:t,dust:a})=>`<svg x="0" y="100%" width="100%" height="1" overflow="visible"><rect x="0" y="-13" width="100%" height="13" fill="${e}"/><rect x="0" y="-13" width="100%" height="1.5" fill="${r}"/><rect x="0" y="-1" width="100%" height="1" fill="${t}"/><rect x="12" y="-13" style="width:calc(100% - 24px)" height="1.5" fill="${a}" fill-opacity="0.45"/></svg>`,Pe=({wood:e,woodDark:r,felt:t,dust:a,chalks:o})=>{let d=-34-j;return`<rect x="${d}" y="${-13-D}" width="${j}" height="${D}" rx="1" fill="${t}"/><rect x="${d+1}" y="${-13-D}" width="${j-2}" height="1.5" fill="${a}" fill-opacity="0.35"/><rect x="${d}" y="${-13-D-J}" width="${j}" height="${J}" rx="2.5" fill="${e}" stroke="${r}" stroke-width="0.75"/>`+o.map((i,l)=>{const u=Ie-l*6;return d-=u+14,`<rect x="${d}" y="${-13-U}" width="${u}" height="${U}" rx="${U/2}" fill="${i}"/><rect x="${d+2}" y="-20" width="${u-4}" height="1.2" fill="#FFFFFF" fill-opacity="0.35"/>`}).join("")},be=e=>`data:image/svg+xml,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">'+Ce(e)+He(e)+Me("100%","100%",Pe(e))+"</svg>")}`,v={board:"#27362F",wiped:"#1F2C26",chalk:"#F4F1E8",dusty:"#C9D1C8",grid:"rgba(244, 241, 232, 0.24)",edge:"rgba(244, 241, 232, 0.45)",axis:"rgba(244, 241, 232, 0.85)",wood:"#86643F",woodLight:"#A88456",woodDark:"#4F3923",felt:"#5E5A55"},Te="'Gochi Hand', 'Comic Sans MS', cursive",w={white:"#F4F1E8",yellow:"#F7DC6F",pink:"#F49AC2",blue:"#8FD3F4",green:"#A8E6A1",orange:"#F9A65A"},ye=[w.white,w.yellow,w.pink,w.blue,w.green,w.orange],Oe=["#668F99",w.blue,w.white],je=(e,r)=>`data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="${e}" height="${e}" viewBox="0 0 ${e} ${e}">${r}</svg>`)}`,L=480,De={image:je(L,`<filter id="smear" x="0" y="0" width="100%" height="100%"><feTurbulence type="fractalNoise" baseFrequency="0.004 0.021" numOctaves="4" seed="11" stitchTiles="stitch"/><feColorMatrix values="0 0 0 0 0.96  0 0 0 0 0.95  0 0 0 0 0.91  0.3 0 0 0 -0.1"/></filter><rect width="${L}" height="${L}" filter="url(#smear)"/>`),size:L,fallback:v.board},Le={image:be({wood:v.wood,woodLight:v.woodLight,woodDark:v.woodDark,felt:v.felt,dust:v.chalk,chalks:[w.white,w.yellow,w.pink]}),fit:"stretch",fallback:"transparent"},W=22,We=6,Ge=.82,Q=2.4,M={fontWeight:400,textColor:v.chalk},P={fontWeight:400,textColor:v.dusty},ee={dashArray:[],lineCap:"round",lineJoin:"round"},G={...M,fontSize:16,textOutlineColor:v.board,textOutlineWidth:4,fill:"transparent",stroke:"transparent",strokeWidth:0,cornerRadius:0,paddingInline:3,paddingBlock:0,shadow:"none"},Ne={tokens:{graphBackground:v.board,graphBorder:v.edge,geom:w.white,geomBorder:v.axis,textPrimary:v.chalk,textSecondary:v.dusty,ruleLine:v.chalk,gridLine:v.grid,hoverAffordance:v.board,hoverGuideFill:"rgba(244, 241, 232, 0.07)",hoverGuideLine:v.edge,tooltipBackground:v.wiped,tooltipBorder:v.edge,tooltipPrimaryRow:"rgba(244, 241, 232, 0.1)",annotationShape:w.yellow,annotationArrow:v.chalk,differenceLabelBackground:v.wiped},defaults:[n.style.graph({fill:De,overlay:Le,strokeWidth:0,cornerRadius:4,fontFamily:Te,padding:{top:W,right:W,bottom:W+13+We,left:W}}),n.style.geom({shadow:"none"}),n.style.geom({shadow:"none"},{state:"hovered"}),n.style.geom.bar({fillAlpha:Ge,stroke:v.chalk,strokeWidth:Q,cornerRadius:2}),n.style.geom.bar({fillAlpha:1,stroke:v.chalk,strokeWidth:3,shadow:"none"},{state:"hovered"}),n.style.geom.line({strokeWidth:4,...ee}),n.style.geom.area({fillAlpha:.72,strokeWidth:3,...ee}),n.style.geom.point({size:14,stroke:v.board,strokeWidth:1.5}),n.style.geom.tile({fillAlpha:.9,cornerRadius:2,stroke:v.board,strokeWidth:3}),n.style.geom.tile({fillAlpha:1,stroke:v.chalk,strokeWidth:Q},{state:"hovered"}),n.style.geom.rule({strokeWidth:2.5,dashArray:[2,7],lineCap:"round"}),n.style.geom.rule.label({...M,fontSize:15}),n.style.gridLine({dashArray:[7,7]}),n.style.gridLine.y({strokeWidth:1.5}),n.style.panelBorder({strokeWidth:0}),n.style.panelBorder.left({stroke:v.axis,strokeWidth:2.5,dashArray:[]}),n.style.panelBorder.bottom({stroke:v.axis,strokeWidth:2.5,dashArray:[]}),n.style.tickLine({strokeWidth:0}),n.style.tickLabel({...P,fontSize:15,lineHeight:1}),n.style.axisLabel({...P,fontSize:16,lineHeight:1}),n.style.heading({...M}),n.style.heading.h1({fontSize:27,lineHeight:1}),n.style.heading.h2({...P,fontSize:18,lineHeight:1.1}),n.style.header({margin:{bottom:16}}),n.style.caption({...P,fontSize:14}),n.style.source({...P,fontSize:14}),n.style.dataLabel({...M,fontSize:15,lineHeight:1,fill:"transparent",paddingBlock:1,paddingInline:3}),n.style.legendItem({...M,fontSize:16,fill:"transparent",stroke:"transparent"}),n.style.directLabel({fontWeight:400,fontSize:16}),n.style.tooltip({strokeWidth:2,cornerRadius:3,paddingInline:12,paddingBlock:9,shadow:"none"}),n.style.tooltip.heading({...M,fontSize:17,lineHeight:1.15}),n.style.tooltip.label({...P,fontSize:15,lineHeight:1.25}),n.style.tooltip.value({...M,fontSize:15,lineHeight:1.25}),n.style.annotation.text({...G,paddingInline:6,paddingBlock:2,fontSize:17,lineHeight:1.15}),n.style.annotation.pinnedNumber({fill:v.chalk,stroke:v.board}),n.style.annotation.pinnedNumber.label({...G}),n.style.annotation.comment({fill:v.chalk,stroke:v.board}),n.style.annotation.comment.label({...G}),n.style.annotation.differenceArrow({stroke:v.chalk,strokeWidth:2.5}),n.style.annotation.differenceArrow.label({...G}),n.style.annotation.arrow({stroke:v.chalk,strokeWidth:3,dashArray:[]}),n.style.annotation.shape({fill:v.chalk,fillAlpha:.1,strokeWidth:0}),n.style.tickLabel({textOutlineColor:v.board,textOutlineWidth:3},{coord:"polar"}),n.style.panelBorder.left({strokeWidth:0},{coord:"polar"}),n.style.panelBorder.bottom({strokeWidth:0},{coord:"polar"})]},E=e=>{let r=2166136261;for(let t=0;t<e.length;t+=1)r^=e.charCodeAt(t),r=Math.imul(r,16777619);return r>>>0},b=e=>{let r=e||1;return()=>{r=r+1831565813|0;let t=Math.imul(r^r>>>15,1|r);return t=t+Math.imul(t^t>>>7,61|t)^t,((t^t>>>14)>>>0)/4294967296}},Be=e=>{const r=[.035,.07,.13].map((a,o)=>({frequency:a*(.7+e()*.6),phase:e()*Math.PI*2,weight:1/(o+1)})),t=r.reduce((a,o)=>a+o.weight,0);return a=>r.reduce((o,h)=>o+h.weight*Math.sin(a*h.frequency+h.phase),0)/t},I=(e,{wander:r,seed:t,closed:a=!1,step:o=9,cornered:h=!1})=>{if(e.length<2)return"";const d=Be(b(t)),i=a?[...e,e[0]]:[...e],l=[],u=[];let g=0;for(let y=0;y<i.length-1;y+=1){const s=i[y],p=i[y+1],x=Math.hypot(p.x-s.x,p.y-s.y);if(x===0)continue;const m={x:-(p.y-s.y)/x,y:(p.x-s.x)/x},R=Math.max(1,Math.ceil(x/o)),S=[];for(let f=0;f<=R;f+=1){const A=f/R,$=r*Math.sin(Math.PI*A)*d(g+A*x);S.push({x:s.x+(p.x-s.x)*A+m.x*$,y:s.y+(p.y-s.y)*A+m.y*$})}u.push(S),l.push(...S.slice(0,-1)),g+=x}return h?`${u.map(y=>te(y,!1)).map((y,s)=>s===0?y:y.replace(/^M/u,"L")).join(" ")}${a?" Z":""}`:(a||l.push(i[i.length-1]),te(l,a))},k=e=>(Math.round(e*100)/100).toString(),te=(e,r)=>{const t=e.length,a=i=>r?e[(i+t)%t]:e[Math.max(0,Math.min(t-1,i))],o=a(0),h=[`M${k(o.x)},${k(o.y)}`],d=r?t:t-1;for(let i=0;i<d;i+=1){const[l,u,g,y]=[a(i-1),a(i),a(i+1),a(i+2)],s={x:u.x+(g.x-l.x)/6,y:u.y+(g.y-l.y)/6},p={x:g.x-(y.x-u.x)/6,y:g.y-(y.y-u.y)/6};h.push(`C${k(s.x)},${k(s.y)} ${k(p.x)},${k(p.y)} ${k(g.x)},${k(g.y)}`)}return`${h.join(" ")}${r?" Z":""}`},Fe=9,T=({run:e,skip:r},t)=>{const a=b(t),o=([h,d])=>k(h+a()*(d-h));return Array.from({length:Fe},()=>`${o(e)} ${o(r)}`).join(" ")},Ke=.07,Ue=40,ze=(e,{angle:r,spacing:t,seed:a})=>{const o=b(a),h={x:e.x+e.width/2,y:e.y+e.height/2},d=Math.hypot(e.width,e.height)/2+t,i=[];for(let l=-d;l<=d;l+=t*(.75+o()*.5)){const u=r+(o()-.5)*Math.min(Ke,t/d),g={x:Math.cos(u),y:Math.sin(u)},y={x:-Math.sin(r),y:Math.cos(r)},s={x:h.x+y.x*l,y:h.y+y.y*l},p=d+o()*Ue;i.push(I([{x:s.x-g.x*p,y:s.y-g.y*p},{x:s.x+g.x*d,y:s.y+g.y*d}],{wander:1.1,seed:a+i.length+1,step:14}))}return i.join(" ")},Ye=(e,r,t)=>{const a=(b(t)()-.5)*.25,o=h=>{const d={x:Math.cos(h)*r,y:Math.sin(h)*r};return`M${k(e.x-d.x)},${k(e.y-d.y)} L${k(e.x+d.x)},${k(e.y+d.y)}`};return`${o(Math.PI/4+a)} ${o(-Math.PI/4-a)}`},Y=(e,r,{seed:t,overshoot:a,wander:o,drift:h=0})=>{const d=b(t)()*Math.PI*2,i=Math.PI*2+a,l=Math.max(8,Math.ceil(i*r/10)),u=Array.from({length:l+1},(g,y)=>{const s=i*y/l,p=Math.max(0,s-Math.PI*2)/Math.max(a,1e-6),x=r+h*p*p,m=d+s;return{x:e.x+Math.cos(m)*x,y:e.y+Math.sin(m)*x}});return I(u,{wander:o,seed:t+1,step:6})},Xe=.4,Ve=.85,qe={run:[14,46],skip:[1.5,4]},Ze=.35,Je={run:[1.5,6],skip:[2,7]},re={x:.45,y:-.35},B={x:-.6,y:.55},Qe={run:[18,70],skip:[1.5,5]},et={run:[1,4],skip:[3,9]},tt=.55,rt=.16,ae=[-Math.PI/4,Math.PI/4,-Math.PI/2.6,Math.PI/2.6,-Math.PI/8,Math.PI/8],X=(e,r=0)=>{const t=ye.indexOf(e);return ae[(t<0?r:t)%ae.length]},ve=e=>`${e}-${(0,C.useId)().replace(/[^a-zA-Z0-9]/gu,"")}`,_=({path:e,color:r,width:t,seed:a,opacity:o=1})=>(0,c.jsxs)("g",{opacity:o,fill:"none",stroke:r,strokeLinejoin:"round",children:[(0,c.jsx)("path",{d:e,strokeWidth:t,strokeOpacity:Xe,strokeLinecap:"round"}),(0,c.jsx)("path",{d:e,strokeWidth:t*Ve,strokeDasharray:T(qe,a),transform:`translate(${re.x} ${re.y})`}),(0,c.jsx)("path",{d:e,strokeWidth:Math.max(.8,t*Ze),strokeDasharray:T(Je,a+1),transform:`translate(${B.x} ${B.y})`})]}),V=({region:e,bounds:r,color:t,angle:a,spacing:o,width:h,seed:d,pressure:i})=>{const l=ve("shade"),u=ze(r,{angle:a,spacing:o,seed:d});return(0,c.jsxs)("g",{children:[(0,c.jsx)("clipPath",{id:l,children:(0,c.jsx)("path",{d:e})}),(0,c.jsx)("path",{d:e,fill:v.board,fillOpacity:tt}),(0,c.jsx)("path",{d:e,fill:t,fillOpacity:i*rt}),(0,c.jsxs)("g",{clipPath:`url(#${l})`,fill:"none",stroke:t,children:[(0,c.jsx)("path",{d:u,strokeWidth:h,strokeOpacity:i*.72,strokeDasharray:T(Qe,d+2)}),(0,c.jsx)("path",{d:u,strokeWidth:h*.4,strokeOpacity:i,strokeDasharray:T(et,d+3),transform:`translate(${B.x} ${B.y})`})]})]})},H=e=>{const r=(0,n.useGeomStyleReader)(e);return(t,a)=>({color:(0,n.toPaintColor)(r.get("fill",t,a)),opacity:r.get("alpha",t,a),fillOpacity:r.get("fillAlpha",t,a),edge:r.get("stroke",t,a),edgeWidth:r.get("strokeWidth",t,a)})},xe=e=>{const r=(0,n.useGeomStyleReader)(e);return(t,a)=>{const o=r.get("strokeWidth",t,a);return{color:r.get("stroke",t,a),opacity:r.get("alpha",t,a)*r.get("strokeAlpha",t,a),width:o,dashArray:(0,n.toStrokeDasharray)(r.get("dashArray",t,a),o)}}},at=10,ot=2.2,nt=.5,oe=(e,r)=>{const t=(0,n.createStableKeyGenerator)(e.data,e.mapping,e.id),a=[];return e.data.groupBy(n.GROUP_VARIABLES.group).forEach(o=>{const h=[...o],[d]=h,i=r(h);d===void 0||i===null||a.push({key:t(d),observation:d,path:i})}),a},it=(e,r)=>{const t=e.flatMap(a=>{const o=(0,n.getX)(a),h=K(a,r);return o===null||h===null?[]:[{angle:o,point:h}]}).sort((a,o)=>a.angle-o.angle).map(({point:a})=>a);return t.length===0?null:$e(t)},q=({geom:e,observation:r,panel:t,project:a,color:o,opacity:h,radius:d=at})=>{const i=a(r,t);return i===null?null:(0,c.jsx)("g",{"data-geom":e,children:(0,c.jsx)(_,{path:Y(i,d,{seed:19,overshoot:nt,wander:.5}),color:o,width:ot,seed:23,opacity:h})})},st=1.3,lt=3.2,ht=8,dt=/^[ML\d\s.,eE+-]+$/u,ct=/[-+]?(?:\d+\.?\d*|\.\d+)(?:[eE][-+]?\d+)?/gu,ut=e=>{if(!dt.test(e))return null;const r=(e.match(ct)??[]).map(Number),t=[];for(let a=0;a+1<r.length;a+=2)t.push({x:r[a],y:r[a+1]});return t},ne=(e,r,t)=>{const a=ut(e.replace(/\s*Z\s*$/u,""));return a===null||a.length<2?e:I(a,{wander:st,seed:r,closed:t})},fe=({layer:e,coordSystem:r,panel:t})=>{const a=H(e),o=(0,C.useMemo)(()=>{if(r===void 0)return oe(e,l=>it(l,t)).map(l=>({...l,fill:l.path,edge:ne(l.path,E(l.key),!0)}));const{areaGenerator:h,lineGenerator:d}=(0,n.createAreaPathGenerators)(r,e.params),i=new Map;return oe(e,l=>{const u=(0,n.prepareAreaObservations)(l,e.params.missingValues),g=h(u),y=d(u);if(!g)return null;const s=Z(g,t);return y&&i.set(s,Z(y,t)),s}).map(l=>({...l,fill:l.path,edge:ne(i.get(l.path)??"",E(l.key),!1)}))},[e,r,t]);return t.width<=0||t.height<=0?null:(0,c.jsx)("g",{"data-geom":"area",children:o.map(({key:h,observation:d,fill:i,edge:l},u)=>{const g=a(d),y=E(h);return(0,c.jsxs)("g",{opacity:g.opacity,children:[(0,c.jsx)(V,{region:i,bounds:_e(t),color:g.color,angle:X(g.color,u),spacing:ht,width:lt,seed:y,pressure:g.fillOpacity}),l!==""&&(0,c.jsx)(_,{path:l,color:g.color,width:g.edgeWidth,seed:y})]},h)})})},me=({layer:e,observation:r,panel:t,project:a})=>{const o=H(e)(r,"hovered");return(0,c.jsx)(q,{geom:"area",observation:r,panel:t,project:a,color:o.color,opacity:o.opacity})},gt=(0,n.defineGeomRenderer)("area",{coord:"cartesian",guideMode:"crosshair",swatchShape:"area",render:({layer:e,coordSystem:r,panelRect:t})=>r.type!=="cartesian"?null:(0,c.jsx)(fe,{layer:e,coordSystem:r,panel:t}),renderHover:({layer:e,primary:r,panelRect:t})=>(0,c.jsx)(me,{layer:e,observation:r.observation,panel:t,project:z}),renderHoverCompanions:()=>null}),pt=(0,n.defineGeomRenderer)("area",{coord:"polar",guideMode:"crosshair",swatchShape:"area",render:({layer:e,panelRect:r})=>(0,c.jsx)(fe,{layer:e,panel:r}),renderHover:({layer:e,primary:r,panelRect:t})=>(0,c.jsx)(me,{layer:e,observation:r.observation,panel:t,project:K}),renderHoverCompanions:()=>null}),yt=1.6,vt=.55,xt=.6,ft=3.8,ie=7.5,mt=.55,At=3,St={solo:{base:!0,value:!0},floor:{base:!0,value:!1},ceiling:{base:!1,value:!0},middle:{base:!1,value:!1}},kt={top:"bottom",bottom:"top",left:"right",right:"left"},wt=(e,r)=>r==="x"?((0,n.getYMax)(e)??(0,n.getY)(e)??0)>=((0,n.getYMin)(e)??0)?"top":"bottom":((0,n.getXMax)(e)??0)>=((0,n.getXMin)(e)??0)?"right":"left",Rt=(e,r,t)=>{const a=Math.max(0,e.width-t),o=Math.max(0,e.height-t);return r==="top"?{...e,y:e.y+e.height-o,height:o}:r==="bottom"?{...e,height:o}:r==="left"?{...e,x:e.x+e.width-a,width:a}:{...e,width:a}},Et=e=>[{x:e.x,y:e.y+e.height},{x:e.x,y:e.y},{x:e.x+e.width,y:e.y},{x:e.x+e.width,y:e.y+e.height}],_t=({layer:e,observation:r,seedKey:t,mainAxis:a,panel:o,state:h})=>{const d=H(e),i=(0,n.getBarRectBounds)(a,r);if(!i||i.width<=0||i.height<=0)return null;const l=d(r,h),u=St[(0,n.getStackRole)(r)],g=wt(r,a),y={x:i.x*o.width,y:i.y*o.height,width:i.width*o.width,height:i.height*o.height},s=[u.value?[]:[g],u.base?[]:[kt[g]]].flat().reduce(($,O)=>Rt($,O,At/2),y);if(s.width<=0||s.height<=0)return null;const p=E(t),x=Et(s),m=Math.min(yt,s.width/10,s.height/10),R=I(x,{wander:m,seed:p,closed:!0,cornered:!0}),S=I(x,{wander:m,seed:p+7,closed:!0,cornered:!0}),f=h==="hovered",A=X(l.color)+(a==="x"?0:Math.PI/2);return(0,c.jsxs)("g",{opacity:l.opacity,children:[(0,c.jsx)(V,{region:R,bounds:s,color:l.color,angle:A,spacing:f?ie*mt:ie,width:ft,seed:p,pressure:l.fillOpacity}),(0,c.jsx)(_,{path:R,color:f?l.edge:l.color,width:l.edgeWidth,seed:p}),(0,c.jsx)(_,{path:S,color:l.color,width:l.edgeWidth*xt,seed:p+3,opacity:vt})]})},se=({layer:e,observations:r,mainAxis:t,panel:a,state:o})=>{const h=(0,C.useMemo)(()=>(0,n.createStableKeyGenerator)(e.data,e.mapping,e.id),[e.data,e.mapping,e.id]);return a.width<=0||a.height<=0?null:(0,c.jsx)("g",{"data-geom":"bar",children:Array.from(r,d=>{const i=h(d);return(0,c.jsx)(_t,{layer:e,observation:d,seedKey:i,mainAxis:t,panel:a,state:o},i)})})},$t=(0,n.defineGeomRenderer)("bar",{coord:"cartesian",guideMode:"band",swatchShape:"square",render:({layer:e,coordSystem:r,panelRect:t})=>(0,c.jsx)(se,{layer:e,observations:e.data,mainAxis:(0,n.readMainAxis)(r),panel:t}),renderHover:({layer:e,coordSystem:r,primary:t,panelRect:a})=>(0,c.jsx)(se,{layer:e,observations:[t.observation],mainAxis:(0,n.readMainAxis)(r),panel:a,state:"hovered"}),renderHoverCompanions:()=>null}),It=1.3,Mt=5,Ct=2.2,Ht=16,Pt=(e,r,t,a)=>{const o=(0,n.createStableKeyGenerator)(e.data,e.mapping,e.id),h=[];return e.data.groupBy(n.GROUP_VARIABLES.group).forEach(d=>{const i=[...d],[l]=i;if(l===void 0)return;const u=(t==="polar"?i.sort((y,s)=>((0,n.getX)(y)??0)-((0,n.getX)(s)??0)):i).flatMap(y=>{const s=a(y,r);return s===null?[]:[s]});if(u.length<2)return;const g=o(l);h.push({key:g,observation:l,points:u,stroke:I(u,{wander:It,seed:E(g),closed:t==="polar"})})}),h},bt=e=>e.every((r,t)=>t===0||Math.hypot(r.x-e[t-1].x,r.y-e[t-1].y)>=Ht),Tt=({layer:e,panel:r,coord:t,project:a})=>{const o=xe(e),h=(0,C.useMemo)(()=>Pt(e,r,t,a),[e,r,t,a]);return r.width<=0||r.height<=0?null:(0,c.jsx)("g",{"data-geom":"line",children:h.map(({key:d,observation:i,stroke:l,points:u})=>{const g=o(i),y=E(d),s=bt(u)?u.map((p,x)=>Ye(p,Mt,y+x)).join(" "):"";return(0,c.jsxs)("g",{opacity:g.opacity,children:[(0,c.jsx)(_,{path:l,color:g.color,width:g.width,seed:y}),s!==""&&(0,c.jsx)(_,{path:s,color:g.color,width:Ct,seed:y+1})]},d)})})},Ot=({layer:e,observation:r,panel:t,project:a})=>{const o=xe(e)(r,"hovered");return(0,c.jsx)(q,{geom:"line",observation:r,panel:t,project:a,color:o.color,opacity:o.opacity})},Ae=(e,r)=>(0,n.defineGeomRenderer)("line",{coord:e,guideMode:"crosshair",swatchShape:"line",render:({layer:t,panelRect:a})=>(0,c.jsx)(Tt,{layer:t,panel:a,coord:e,project:r}),renderHover:({layer:t,primary:a,panelRect:o})=>(0,c.jsx)(Ot,{layer:t,observation:a.observation,panel:o,project:r}),renderHoverCompanions:()=>null,getOverlayAnchor:({observation:t})=>{const a=(0,n.getX)(t),o=(0,n.getY)(t);return a===null||o===null?null:{x:a,y:o}}}),jt=Ae("cartesian",z),Dt=Ae("polar",K),Lt=.35,Wt=.35,Gt=2,Nt=.3,Bt=5,Ft=({layer:e,observations:r,panel:t,project:a,state:o})=>{const h=(0,n.useGeomStyleReader)(e),d=H(e),i=(0,C.useMemo)(()=>(0,n.createStableKeyGenerator)(e.data,e.mapping,e.id),[e.data,e.mapping,e.id]);return(0,c.jsx)("g",{"data-geom":"point",children:Array.from(r,l=>{const u=a(l,t);if(u===null)return null;const g=i(l),y=E(g),s=d(l,o),p=h.get("size",l,o)/2;return(0,c.jsxs)("g",{opacity:s.opacity,children:[(0,c.jsx)("circle",{cx:u.x,cy:u.y,r:p,fill:s.color,fillOpacity:s.fillOpacity*Nt}),(0,c.jsx)(_,{path:Y(u,p,{seed:y,overshoot:Wt,wander:Lt}),color:s.color,width:Gt,seed:y+1})]},g)})})},Kt=({layer:e,observation:r,panel:t,project:a})=>{const o=H(e)(r,"hovered"),h=(0,n.useGeomStyleReader)(e).get("size",r,"hovered");return(0,c.jsx)(q,{geom:"point",observation:r,panel:t,project:a,color:o.color,opacity:o.opacity,radius:h/2+Bt})},Se=(e,r)=>(0,n.defineGeomRenderer)("point",{coord:e,swatchShape:"circle",render:({layer:t,panelRect:a})=>(0,c.jsx)(Ft,{layer:t,observations:t.data,panel:a,project:r}),renderHover:({layer:t,primary:a,panelRect:o})=>(0,c.jsx)(Kt,{layer:t,observation:a.observation,panel:o,project:r}),renderHoverCompanions:()=>null}),Ut=Se("cartesian",z),zt=Se("polar",K),Yt=Math.PI/40,Xt=1.2,Vt=3.4,le=8,qt=.55,Zt=3,Jt=.42,Qt=5,er=1.1,tr=3,rr=2.2,he=v.chalk,F=(e,r,t)=>{const a=(0,n.polarToUnit)(r,1);return{x:e.width/2+a.x*t,y:e.height/2-a.y*t}},de=(e,r,t,a)=>{const o=Math.max(1,Math.ceil(Math.abs(t-r)/Yt));return Array.from({length:o+1},(h,d)=>F(e,r+(t-r)*d/o,a))},ce=(e,r,t,a)=>{const{startAngle:o,endAngle:h}=(0,n.getAngleExtent)(e),{innerRadius:d,outerRadius:i}=(0,n.getRadiusExtent)(e);if(o===null||h===null||d===null||i===null)return null;const l=Math.min(t.width,t.height)/2,u=i*l,g=d*l;if(u<=0)return null;const y=Math.max(0,h-o),s=y>=2*Math.PI-1e-6?0:Math.min(a/2/u,y/4),p=o+s,x=h-s,m=de(t,p,x,u),R=g>0?de(t,x,p,g):[F(t,0,0)],S=[...m,...R];return{key:r,observation:e,region:`${S.map((f,A)=>`${A===0?"M":"L"}${f.x},${f.y}`).join(" ")} Z`,outline:I(S,{wander:Xt,seed:E(r),closed:!0,step:12}),bounds:{x:t.width/2-u,y:t.height/2-u,width:u*2,height:u*2},startAngle:o,inner:g,outer:u}},ar=e=>e.length>1&&e.every(({inner:r,outer:t})=>Math.abs(t-(e[0]?.outer??0))<.5&&Math.abs(r-(e[0]?.inner??0))<.5),ue=({layer:e,observations:r,panel:t,state:a})=>{const o=H(e),h=(0,C.useMemo)(()=>(0,n.createStableKeyGenerator)(e.data,e.mapping,e.id),[e.data,e.mapping,e.id]);if(t.width<=0||t.height<=0)return null;const d=a==="hovered",i=Array.from(r,s=>({key:h(s),observation:s})),l=i.flatMap(({key:s,observation:p})=>ce(p,s,t,0)??[]),u=!d&&ar(l),g=u?l:i.flatMap(({key:s,observation:p})=>ce(p,s,t,Zt)??[]),y={x:t.width/2,y:t.height/2};return(0,c.jsxs)("g",{"data-geom":"bar",children:[g.map(({key:s,observation:p,region:x,outline:m,bounds:R},S)=>{const f=o(p,a),A=E(s);return(0,c.jsxs)("g",{opacity:f.opacity,children:[(0,c.jsx)(V,{region:x,bounds:R,color:f.color,angle:X(f.color,S)+(S%2===0?0:Math.PI/2),spacing:d?le*qt:le,width:Vt,seed:A,pressure:f.fillOpacity}),!u&&(0,c.jsx)(_,{path:m,color:d?f.edge:f.color,width:f.edgeWidth,seed:A})]},s)}),u&&(0,c.jsxs)("g",{children:[g.map(({key:s,startAngle:p,inner:x,outer:m})=>(0,c.jsx)(_,{path:I([F(t,p,x),F(t,p,m)],{wander:.8,seed:E(s)+5,step:14}),color:he,width:rr,seed:E(s)+6},s)),[g[0]?.outer??0,g[0]?.inner??0].filter(s=>s>0).map((s,p)=>(0,c.jsx)(_,{path:Y(y,s,{seed:31+p*17,overshoot:Jt,wander:er,drift:p===0?Qt:-5}),color:he,width:tr,seed:41+p},s))]})]})},or=(0,n.defineGeomRenderer)("bar",{coord:"polar",guideMode:"band",swatchShape:"slice",render:({layer:e,panelRect:r})=>(0,c.jsx)(ue,{layer:e,observations:e.data,panel:r}),renderHover:({layer:e,primary:r,panelRect:t})=>(0,c.jsx)(ue,{layer:e,observations:[r.observation],panel:t,state:"hovered"}),renderHoverCompanions:()=>null}),N=4,nr=1,ir=.82,ge=3,sr=.28,lr={run:[16,60],skip:[2,7]},hr=50,dr=({layer:e,observation:r,seedKey:t,panel:a,state:o})=>{const h=H(e),d=ve("cell"),i=(0,n.getPaintedTileRect)(r);if(i===null)return null;const l=h(r,o),u=i.x*a.width+N/2,g=i.y*a.height+N/2,y=i.width*a.width-N,s=i.height*a.height-N;if(y<=0||s<=0)return null;const p=E(t),x=b(p),m=I([{x:u,y:g},{x:u+y,y:g},{x:u+y,y:g+s},{x:u,y:g+s}],{wander:Math.min(nr,y/10,s/10),seed:p,closed:!0,cornered:!0}),R=s/ge,S=Array.from({length:ge},(A,$)=>{const O=g+R*($+.5),ke=x()*hr;return I([{x:u-2-ke,y:O+(x()-.5)*2},{x:u+y+2,y:O+(x()-.5)*2}],{wander:1.2,seed:p+$+1,step:16})}),f=o==="hovered";return(0,c.jsxs)("g",{opacity:l.opacity,children:[(0,c.jsx)("clipPath",{id:d,children:(0,c.jsx)("path",{d:m})}),(0,c.jsx)("path",{d:m,fill:l.color,fillOpacity:l.fillOpacity*ir}),(0,c.jsx)("g",{clipPath:`url(#${d})`,fill:"none",stroke:l.color,strokeOpacity:sr,children:S.map((A,$)=>(0,c.jsx)("path",{d:A,strokeWidth:R*.8,strokeDasharray:T(lr,p+$)},$))}),f&&(0,c.jsx)(_,{path:m,color:l.edge,width:l.edgeWidth,seed:p})]})},pe=({layer:e,observations:r,panel:t,state:a})=>{const o=(0,C.useMemo)(()=>(0,n.createStableCellKeyGenerator)(e.data,e.mapping,e.id),[e.data,e.mapping,e.id]);return t.width<=0||t.height<=0?null:(0,c.jsx)("g",{"data-geom":"tile",children:Array.from(r,h=>{const d=o(h);return(0,c.jsx)(dr,{layer:e,observation:h,seedKey:d,panel:t,state:a},d)})})},cr=(0,n.defineGeomRenderer)("tile",{coord:"cartesian",guideMode:null,swatchShape:"square",render:({layer:e,panelRect:r})=>(0,c.jsx)(pe,{layer:e,observations:e.data,panel:r}),renderHover:({layer:e,primary:r,panelRect:t})=>(0,c.jsx)(pe,{layer:e,observations:[r.observation],panel:t,state:"hovered"}),renderHoverCompanions:()=>null}),ur=[$t,or,cr,jt,Dt,gt,pt,Ut,zt],gr=.3,pr=2,yr=({fill:e,fillOpacity:r,...t})=>(0,c.jsx)(n.DefaultGeomCircle,{...t,fill:e,fillOpacity:gr,stroke:e,strokeWidth:pr}),vr={Circle:yr},xr={name:"chalkboard",styles:Ne,palette:ye,colormap:Oe,config:{axes:{y:{position:"left"}},legend:{position:"top",align:"start"}},colorScheme:"dark",plugins:ur,shapes:vr};exports.chalkboard=xr;

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { chalkboard } from './chalkboard';