@graphysdk/theme-shiny 0.0.0-stage → 0.1.0

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-shiny
 
-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 holographic theme for the Graphy charting SDK: a dark starred card inside a foil border, every shape one clean flat colour, slices and stacked bars parted by a hairline of the card, and lines with a soft glow.
+
+Learn more at [graphy.dev](https://graphy.dev).
+
+## Install
+
+```bash
+npm install @graphysdk/theme-shiny @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 { shiny } from '@graphysdk/theme-shiny';
+import '@graphysdk/theme-shiny/fonts.css';
+
+const kit = createGraphyKit({ theme: shiny });
+
+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 Inter Tight and JetBrains Mono from Google Fonts. To host the fonts yourself, leave the import out and load families named `Inter Tight` and `JetBrains Mono` before the first graph is drawn.
+
+## Docs
+
+- [Shiny](https://docs.graphy.dev/sdk-next/themes/shiny)
+
+## 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/card.d.ts

@@ -0,0 +1,8 @@
+export interface CardColors {
+    ground: string;
+    star: string;
+    /** The holographic colours the corner bloom runs through, from its heart outwards. */
+    bloom: readonly string[];
+}
+/** The card as a data URI, for the graph's `fill`. */
+export declare const buildCard: ({ ground, star, bloom }: CardColors) => string;

package/dist/frame.d.ts

@@ -0,0 +1,9 @@
+/** The band of foil, this many pixels wide, running round the card's edge. */
+export declare const FRAME_BAND_WIDTH = 9;
+export interface FrameColors {
+    foil: readonly string[];
+    shade: string;
+    light: string;
+}
+/** The foil border as a data URI, for the graph's `overlay`, rounded to the graph's `cornerRadius`. */
+export declare const buildFoilFrame: (cornerRadius: number, { foil, shade, light }: FrameColors) => string;

package/dist/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});let n=require("@graphysdk/react"),O=require("react"),i=require("react/jsx-runtime");var xe=90,ve=41,ye=.12,me=.38,Ae=.4,$e=.8,Re=.16,je=e=>{let t=e;return()=>{t=t+1831565813|0;let r=Math.imul(t^t>>>15,1|t);return r=r+Math.imul(r^r>>>7,61|r)^r,((r^r>>>14)>>>0)/4294967296}},Se=({ground:e,star:t,bloom:r})=>{const a=je(ve),s=Array.from({length:xe},()=>{const l=a()*100,c=a()*100,p=Ae+a()**3*$e,h=ye+a()*me;return`<circle cx="${l.toFixed(2)}%" cy="${c.toFixed(2)}%" r="${p.toFixed(2)}" fill="${t}" fill-opacity="${h.toFixed(2)}"/>`}),o=r.length-1,d=`<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><defs><radialGradient id="b" cx="1" cy="0" r="0.9">${r.map((l,c)=>{const p=c/o*.7,h=Re*(1-c/r.length);return`<stop offset="${p.toFixed(2)}" stop-color="${l}" stop-opacity="${h.toFixed(3)}"/>`}).join("")}<stop offset="1" stop-color="${e}" stop-opacity="0"/></radialGradient></defs><rect width="100%" height="100%" fill="${e}"/><rect width="100%" height="100%" fill="url(#b)"/>`+s.join("")+"</svg>";return`data:image/svg+xml,${encodeURIComponent(d)}`};var N=.32,k=6,we=.22,D=.08,Ce=.55,Oe=1.75,Ee=1.25,_e=.3,Te=.7,Le=e=>e.map((t,r)=>`<stop offset="${(r/(e.length-1)).toFixed(3)}" stop-color="${t}"/>`).join(""),P=(e,t,r)=>`<rect x="${e}" y="${e}" rx="${Math.max(0,t-e)}" style="width:calc(100% - ${e*2}px);height:calc(100% - ${e*2}px)" fill="none" ${r}/>`,ke=(e,{foil:t,shade:r,light:a})=>{const o=k/2,d=`<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><defs><linearGradient id="foil" x1="0" y1="0" x2="${N}" y2="${N}" spreadMethod="reflect">${Le(t)}</linearGradient><linearGradient id="streak" x1="0" y1="1" x2="${D}" y2="${1-D}" spreadMethod="repeat"><stop offset="0" stop-color="${a}" stop-opacity="0"/><stop offset="0.12" stop-color="${a}" stop-opacity="${Ce}"/><stop offset="0.24" stop-color="${a}" stop-opacity="0"/><stop offset="1" stop-color="${a}" stop-opacity="0"/></linearGradient><pattern id="plate" width="${k}" height="${k}" patternUnits="userSpaceOnUse"><path d="M${o},0 L${k},${o} L${o},${k} L0,${o} Z" fill="${a}" fill-opacity="${we}"/></pattern><linearGradient id="catch" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="${a}" stop-opacity="0.95"/><stop offset="${_e}" stop-color="${a}" stop-opacity="0"/></linearGradient></defs>`+P(4.5,e,'stroke="url(#foil)" stroke-width="9"')+P(4.5,e,'stroke="url(#plate)" stroke-width="9"')+P(4.5,e,'stroke="url(#streak)" stroke-width="9"')+P(Oe,e,`stroke="url(#catch)" stroke-width="${Ee}"`)+P(9.5,e,`stroke="${r}" stroke-opacity="${Te}" stroke-width="1"`)+"</svg>";return`data:image/svg+xml,${encodeURIComponent(d)}`},v={pulse:"#E94FF3",nebula:"#EC9BFF",starlight:"#FFFBFF",sirius:"#9AF2FF",lagoon:"#9F98FF",void:"#0C0B0F",obsidian:"#1A1721"},E=["#B9A2FF","#FF9DE4","#8DEEFF","#9FFCCD","#C6ADFF"],$={ground:v.obsidian,window:"#121017",text:v.starlight,secondary:"#B3ABC4",edge:"rgba(255, 251, 255, 0.12)",grid:"rgba(236, 155, 255, 0.11)",baseline:"rgba(255, 251, 255, 0.32)",star:v.starlight,accent:v.pulse,accentEdge:"rgba(233, 79, 243, 0.6)"};var Pe="'Inter Tight', 'Inter', ui-sans-serif, system-ui, sans-serif",ie="'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace",Ge="#A8F5C9",Ie=[v.pulse,v.sirius,v.lagoon,v.nebula,Ge,v.starlight],He=["#33205C","#8C3FD2",v.pulse,"#FFD9FB"],Me=.88,Fe=.4,Y={fontFamily:Pe},m={fontFamily:ie},We={gradient:"linear",angle:135,stops:E.map((e,t)=>({offset:t/(E.length-1),color:e}))},be={card:Se({ground:$.ground,star:$.star,bloom:E}),ground:$.ground,edge:$.edge,text:$.text,secondary:$.secondary,grid:$.grid,baseline:$.baseline,accent:$.accent,accentEdge:$.accentEdge,window:$.window,windowGlow:"rgba(233, 79, 243, 0.18)",hoverGuideFill:"rgba(236, 155, 255, 0.07)",tooltipPrimaryRow:"rgba(233, 79, 243, 0.12)",washAlpha:.16},Be=(e,t)=>{const r={textColor:e.text},a={textColor:e.secondary},s={offsetX:0,offsetY:8,blur:24,color:e.windowGlow},o={...r,...m,fontWeight:500,fontSize:12,fill:e.window,stroke:e.accentEdge,strokeWidth:1,cornerRadius:8,shadow:s};return{tokens:{graphBackground:e.ground,graphBorder:e.edge,geom:v.pulse,geomBorder:e.secondary,textPrimary:e.text,textSecondary:e.secondary,ruleLine:e.accent,gridLine:e.grid,hoverAffordance:e.text,hoverGuideFill:e.hoverGuideFill,hoverGuideLine:e.accentEdge,tooltipBackground:e.window,tooltipBorder:e.accentEdge,tooltipPrimaryRow:e.tooltipPrimaryRow,annotationShape:v.nebula,annotationArrow:e.accent,differenceLabelBackground:e.window},defaults:[n.style.graph({fill:{image:e.card,fit:"stretch",fallback:e.ground},stroke:e.edge,strokeWidth:1,cornerRadius:20,fontFamily:ie,padding:28}),n.style.geom({shadow:"none"}),n.style.geom({shadow:"none"},{state:"hovered"}),n.style.geom.bar({strokeWidth:0,cornerRadius:"none"}),n.style.geom.line({strokeWidth:t.lineWidth,dashArray:[],lineCap:"round",lineJoin:"round"}),n.style.geom.area({fillAlpha:Me,strokeWidth:0,dashArray:[],lineJoin:"round"}),n.style.geom.point({size:t.pointSize,strokeWidth:0}),n.style.geom.tile({cornerRadius:3,strokeWidth:0}),n.style.geom.rule({stroke:e.accent,strokeWidth:1.5,dashArray:[5,4]}),n.style.geom.rule.label({...m,fontWeight:600,fontSize:11.5,textTransform:"uppercase"}),n.style.gridLine({dashArray:[]}),n.style.gridLine.x({strokeWidth:0}),n.style.gridLine.y({strokeWidth:1}),n.style.panelBorder({strokeWidth:0}),n.style.panelBorder.bottom({stroke:e.baseline,strokeWidth:1,dashArray:[]}),n.style.tickLine({strokeWidth:0}),n.style.tickLabel({...a,...m,fontWeight:400,fontSize:11.5,lineHeight:1}),n.style.axisLabel({...m,textColor:e.accent,fontWeight:600,fontSize:11,lineHeight:1,letterSpacing:.6,textTransform:"uppercase"}),n.style.heading({...r,...Y}),n.style.heading.h1({fontWeight:800,fontSize:25,lineHeight:1.1,letterSpacing:-.5}),n.style.heading.h2({...a,fontWeight:500,fontSize:14.5,lineHeight:1.3}),n.style.header({margin:{bottom:18}}),n.style.caption({...a,...m,fontWeight:400,fontSize:11.5}),n.style.source({...a,...m,fontWeight:400,fontSize:11.5}),n.style.source.link({...a,...m,fontWeight:400,fontSize:11.5}),n.style.dataLabel({...r,...m,fontWeight:600,fontSize:11.5,fill:"transparent"}),n.style.legendItem({...r,...m,fontWeight:500,fontSize:12,fill:"transparent",stroke:"transparent"}),n.style.directLabel({...m,fontWeight:600,fontSize:12}),n.style.headlineItem.number({...Y,fontWeight:800,fontSize:32,lineHeight:1.1}),n.style.tooltip({fill:e.window,strokeWidth:1,cornerRadius:10,paddingInline:12,paddingBlock:9,shadow:s}),n.style.tooltip.heading({...m,textColor:e.accent,fontWeight:600,fontSize:12,lineHeight:1.3,textTransform:"uppercase"}),n.style.tooltip.label({...a,...m,fontWeight:400,fontSize:12,lineHeight:1.4}),n.style.tooltip.value({...r,...m,fontWeight:600,fontSize:12,lineHeight:1.4}),n.style.legend.popover({cornerRadius:10,shadow:s}),n.style.annotation.text({...o,paddingInline:11,paddingBlock:7,lineHeight:1.4}),n.style.annotation.pinnedNumber({fill:e.accent,stroke:e.ground,shadow:"none"}),n.style.annotation.pinnedNumber.label({...o,fontWeight:600}),n.style.annotation.comment({fill:e.accent,stroke:e.ground,shadow:"none"}),n.style.annotation.comment.label({...o}),n.style.annotation.differenceArrow({stroke:e.accent,strokeWidth:1.5}),n.style.annotation.differenceArrow.label({...o,textColor:e.accent,fontWeight:700}),n.style.annotation.arrow({stroke:e.accent,strokeWidth:1.5,dashArray:[]}),n.style.annotation.shape({fill:We,fillAlpha:e.washAlpha,stroke:"transparent",strokeWidth:0}),n.style.geom.area({fillAlpha:Fe},{coord:"polar"}),n.style.panelBorder.bottom({strokeWidth:0},{coord:"polar"}),n.style.tickLabel({...r,fontWeight:600,textOutlineColor:e.ground,textOutlineWidth:3},{coord:"polar"})]}},Ne=28,z=Be(be,{lineWidth:3,pointSize:14}),De={...z,defaults:[...z.defaults??[],n.style.graph({strokeWidth:0,padding:9+Ne,overlay:{image:ke(20,{foil:E,shade:v.void,light:v.starlight}),fit:"stretch",fallback:"transparent"}})]},Ye=2.6,ze=28,Ue=.6,Ve=.4,U=.42,Ke=.62,Ze=.95,Xe=.42,qe=.45,j=v.starlight,V=v.void,S=e=>`${e}-${(0,O.useId)().replace(/[^a-zA-Z0-9]/gu,"")}`,w=e=>({foil:`${e}-foil`,rimLight:`${e}-rim-light`,rimShade:`${e}-rim-shade`,gloss:`${e}-gloss`,catchlight:`${e}-catchlight`,reflection:`${e}-reflection`}),C=({ids:e,panel:t})=>{const r=ze*Math.PI/180,a=Math.hypot(t.width,t.height)/Ye,s=E.length-1;return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)("linearGradient",{id:e.foil,gradientUnits:"userSpaceOnUse",spreadMethod:"reflect",x1:0,y1:0,x2:Math.cos(r)*a,y2:Math.sin(r)*a,children:E.map((o,d)=>(0,i.jsx)("stop",{offset:d/s,stopColor:o},o))}),(0,i.jsxs)("linearGradient",{id:e.rimLight,x1:0,y1:0,x2:1,y2:1,children:[(0,i.jsx)("stop",{offset:0,stopColor:j,stopOpacity:Ue}),(0,i.jsx)("stop",{offset:.45,stopColor:j,stopOpacity:0})]}),(0,i.jsxs)("linearGradient",{id:e.rimShade,x1:0,y1:0,x2:1,y2:1,children:[(0,i.jsx)("stop",{offset:.5,stopColor:V,stopOpacity:0}),(0,i.jsx)("stop",{offset:1,stopColor:V,stopOpacity:Ve})]}),(0,i.jsxs)("radialGradient",{id:e.gloss,cx:.22,cy:.12,r:Ke,children:[(0,i.jsx)("stop",{offset:0,stopColor:j,stopOpacity:U}),(0,i.jsx)("stop",{offset:.6,stopColor:j,stopOpacity:U/5}),(0,i.jsx)("stop",{offset:1,stopColor:j,stopOpacity:0})]}),(0,i.jsxs)("linearGradient",{id:e.catchlight,x1:0,y1:0,x2:1,y2:1,children:[(0,i.jsx)("stop",{offset:0,stopColor:j,stopOpacity:Ze}),(0,i.jsx)("stop",{offset:Xe,stopColor:j,stopOpacity:0})]}),(0,i.jsxs)("linearGradient",{id:e.reflection,x1:0,y1:0,x2:1,y2:1,children:[(0,i.jsx)("stop",{offset:.6,stopColor:j,stopOpacity:0}),(0,i.jsx)("stop",{offset:1,stopColor:j,stopOpacity:qe})]})]})},oe=({x:e,y:t,width:r,height:a},s)=>{const o=Math.max(0,Math.min(s,r/2,a/2));if(o===0)return`M${e},${t} H${e+r} V${t+a} H${e} Z`;const d=(l,c)=>`A${o},${o} 0 0 1 ${l},${c}`;return[`M${e+o},${t}`,`H${e+r-o}`,d(e+r,t+o),`V${t+a-o}`,d(e+r-o,t+a),`H${e+o}`,d(e,t+a-o),`V${t+o}`,d(e+o,t),"Z"].join(" ")},_=(e,t,r)=>`M${e-r},${t} A${r},${r} 0 1 0 ${e+r},${t} A${r},${r} 0 1 0 ${e-r},${t} Z`,Je=2,Qe=2.5,et=.35,tt=1.5,rt=.9,at=({id:e,path:t,paint:r,state:a})=>(0,i.jsxs)("g",{opacity:r.opacity,children:[(0,i.jsx)("defs",{children:(0,i.jsx)("clipPath",{id:e,children:(0,i.jsx)("path",{d:t})})}),(0,i.jsx)("path",{d:t,fill:r.color,fillOpacity:r.fillOpacity}),(0,i.jsxs)("g",{fill:"none",clipPath:`url(#${e})`,strokeLinejoin:"round",children:[(0,i.jsx)("path",{d:t,stroke:$.ground,strokeWidth:Je}),a==="hovered"&&(0,i.jsx)("path",{d:t,stroke:j,strokeOpacity:rt,strokeWidth:tt*2})]})]}),nt=({path:e,paint:t,glowId:r})=>(0,i.jsxs)("g",{opacity:t.opacity,fill:"none",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:t.dashArray,children:[(0,i.jsx)("path",{d:e,stroke:t.color,strokeOpacity:et,strokeWidth:t.width*Qe,filter:`url(#${r})`}),(0,i.jsx)("path",{d:e,stroke:t.color,strokeWidth:t.width})]}),it={Cell:at,Tube:nt,rims:{bar:()=>0,barCorner:()=>3,tile:()=>0,tileCorner:3,tileGap:0,bead:()=>0,ringSlice:()=>0,petal:()=>0,areaSide:0,areaValue:0},pin:{hasBezel:!1,hasGlow:!1,hole:null}},ot=/[a-df-zA-DF-Z]|[-+]?(?:\d+\.?\d*|\.\d+)(?:[eE][-+]?\d+)?/gu,st=/^[a-zA-Z]$/u,dt=(e,t)=>e==="H"?"x":e==="V"?"y":t%2===0?"x":"y",M=(e,t)=>{let r="",a=0;return(e.match(ot)??[]).map(s=>{if(st.test(s))return r=s.toUpperCase(),a=0,s;const o=dt(r,a);return a+=1,String(Number(s)*(o==="x"?t.width:t.height))}).join(" ")},F=(e,t)=>{const r=(0,n.getX)(e),a=(0,n.getY)(e)??(0,n.getYMax)(e);return r===null||a===null?null:{x:(0,n.toViewBoxX)(r)*t.width,y:(0,n.toViewBoxY)(a)*t.height}},I=(e,t)=>{const r=(0,n.getX)(e),a=(0,n.getY)(e)??(0,n.getRadiusExtent)(e).outerRadius;if(r===null||a===null)return null;const s=(0,n.polarToUnit)(r,a),o=Math.min(t.width,t.height)/2;return{x:t.width/2+s.x*o,y:t.height/2-s.y*o}},lt=e=>`${e.map((t,r)=>`${r===0?"M":"L"}${t.x},${t.y}`).join(" ")} Z`,T=e=>{const t=(0,n.useGeomStyleReader)(e);return(r,a)=>({color:(0,n.toPaintColor)(t.get("fill",r,a)),opacity:t.get("alpha",r,a),fillOpacity:t.get("fillAlpha",r,a),edge:t.get("stroke",r,a),edgeWidth:t.get("strokeWidth",r,a)})},se=e=>{const t=(0,n.useGeomStyleReader)(e);return(r,a)=>{const s=t.get("strokeWidth",r,a);return{color:t.get("stroke",r,a),opacity:t.get("alpha",r,a)*t.get("strokeAlpha",r,a),width:s,dashArray:(0,n.toStrokeDasharray)(t.get("dashArray",r,a),s)}}},G=(e,t)=>{const r=(0,n.createStableKeyGenerator)(e.data,e.mapping,e.id),a=[];return e.data.groupBy(n.GROUP_VARIABLES.group).forEach(s=>{const o=[...s],[d]=o,l=t(o);d===void 0||l===null||a.push({key:r(d),observation:d,path:l})}),a},ct=(e,t)=>e.flatMap(r=>{const a=(0,n.getX)(r),s=I(r,t);return a===null||s===null?[]:[{angle:a,point:s}]}).sort((r,a)=>r.angle-a.angle).map(({point:r})=>r),de=(e,t)=>{const r=ct(e,t);return r.length===0?null:lt(r)},K=14,le=({finish:e,layer:t,coordSystem:r,panel:a})=>{const s=T(t),o=S("shiny-area"),d=(0,O.useMemo)(()=>{if(r===void 0)return G(t,u=>de(u,a)).map(u=>({...u,fill:u.path,edge:u.path}));const{areaGenerator:h,lineGenerator:g}=(0,n.createAreaPathGenerators)(r,t.params),x=new Map;return G(t,u=>{const f=(0,n.prepareAreaObservations)(u,t.params.missingValues),R=h(f),y=g(f);if(!R)return null;const A=M(R,a);return y&&x.set(A,M(y,a)),A}).map(u=>({...u,fill:u.path,edge:x.get(u.path)??""}))},[t,r,a]);if(a.width<=0||a.height<=0)return null;const l=w(o),{Cell:c,rims:p}=e;return(0,i.jsxs)("g",{"data-geom":"area",children:[(0,i.jsx)("defs",{children:(0,i.jsx)(C,{ids:l,panel:a})}),d.map(({key:h,observation:g,fill:x,edge:u},f)=>(0,i.jsx)(c,{id:`${o}-${f}`,ids:l,path:x,rimWidth:p.areaSide,cap:u===""?void 0:u,capWidth:p.areaValue,paint:s(g)},h))]})},ce=({finish:e,layer:t,observation:r,panel:a,project:s})=>{const o=T(t)(r,"hovered"),d=S("shiny-area-reading"),l=s(r,a);if(l===null)return null;const c=w(d),{Cell:p,rims:h}=e;return(0,i.jsxs)("g",{"data-geom":"area",children:[(0,i.jsx)("defs",{children:(0,i.jsx)(C,{ids:c,panel:a})}),(0,i.jsx)(p,{id:`${d}-point`,ids:c,path:_(l.x,l.y,K/2),rimWidth:h.bead(K),paint:{...o,fillOpacity:1},state:"hovered"})]})},ht=e=>(0,n.defineGeomRenderer)("area",{coord:"cartesian",guideMode:"crosshair",swatchShape:"area",render:({layer:t,coordSystem:r,panelRect:a})=>r.type!=="cartesian"?null:(0,i.jsx)(le,{finish:e,layer:t,coordSystem:r,panel:a}),renderHover:({layer:t,primary:r,panelRect:a})=>(0,i.jsx)(ce,{finish:e,layer:t,observation:r.observation,panel:a,project:F}),renderHoverCompanions:()=>null}),pt=e=>(0,n.defineGeomRenderer)("area",{coord:"polar",guideMode:"crosshair",swatchShape:"area",render:({layer:t,panelRect:r})=>(0,i.jsx)(le,{finish:e,layer:t,panel:r}),renderHover:({layer:t,primary:r,panelRect:a})=>(0,i.jsx)(ce,{finish:e,layer:t,observation:r.observation,panel:a,project:I}),renderHoverCompanions:()=>null}),ut=(e,t)=>t==="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",gt=({x:e,y:t,width:r,height:a},s)=>s==="top"?`M${e},${t} H${e+r}`:s==="bottom"?`M${e},${t+a} H${e+r}`:s==="left"?`M${e},${t} V${t+a}`:`M${e+r},${t} V${t+a}`,ft=(e,t,r)=>{const a=(0,n.getBarRectBounds)(t,e);return!a||a.width<=0||a.height<=0?null:{x:a.x*r.width,y:a.y*r.height,width:a.width*r.width,height:a.height*r.height}},Z=({finish:e,layer:t,observations:r,mainAxis:a,panel:s,state:o})=>{const d=T(t),l=S("shiny-bar"),c=(0,O.useMemo)(()=>(0,n.createStableKeyGenerator)(t.data,t.mapping,t.id),[t.data,t.mapping,t.id]);if(s.width<=0||s.height<=0)return null;const p=w(l),{Cell:h,rims:g}=e;return(0,i.jsxs)("g",{"data-geom":"bar",children:[(0,i.jsx)("defs",{children:(0,i.jsx)(C,{ids:p,panel:s})}),Array.from(r,(x,u)=>{const f=ft(x,a,s);if(f===null)return null;const R=a==="x"?f.width:f.height,y=(0,n.getStackRole)(x),A=y==="solo"||y==="ceiling";return(0,i.jsx)(h,{id:`${l}-${u}`,ids:p,path:oe(f,g.barCorner(R)),rimWidth:g.bar(R),valueEnd:A?gt(f,ut(x,a)):void 0,paint:d(x,o),state:o},c(x))})]})},xt=e=>(0,n.defineGeomRenderer)("bar",{coord:"cartesian",guideMode:"band",swatchShape:"square",render:({layer:t,coordSystem:r,panelRect:a})=>(0,i.jsx)(Z,{finish:e,layer:t,observations:t.data,mainAxis:(0,n.readMainAxis)(r),panel:a}),renderHover:({layer:t,coordSystem:r,primary:a,panelRect:s})=>(0,i.jsx)(Z,{finish:e,layer:t,observations:[a.observation],mainAxis:(0,n.readMainAxis)(r),panel:s,state:"hovered"}),renderHoverCompanions:()=>null}),vt=4,yt=4,mt=({finish:e,layer:t,panel:r,coord:a})=>{const s=se(t),o=S("shiny-line"),d=(0,O.useMemo)(()=>{if(a==="polar")return G(t,g=>de(g,r));const h=(0,n.createLinePathGenerator)(t.params);return G(t,g=>{const x=h((0,n.prepareLineObservations)(g,t.params.missingValues));return x?M(x,r):null})},[t,r,a]);if(r.width<=0||r.height<=0)return null;const l=w(o),c=`${o}-glow`,{Tube:p}=e;return(0,i.jsxs)("g",{"data-geom":"line",children:[(0,i.jsxs)("defs",{children:[(0,i.jsx)(C,{ids:l,panel:r}),(0,i.jsx)("filter",{id:c,x:"-20%",y:"-20%",width:"140%",height:"140%",children:(0,i.jsx)("feGaussianBlur",{stdDeviation:vt})})]}),d.map(({key:h,path:g,observation:x},u)=>(0,i.jsx)(p,{id:`${o}-${u}`,ids:l,path:g,paint:s(x),panel:r,glowId:c},h))]})},At=({finish:e,layer:t,observation:r,panel:a,project:s})=>{const o=se(t)(r,"hovered"),d=S("shiny-line-reading"),l=s(r,a);if(l===null)return null;const c=w(d),p=o.width*yt,{Cell:h,rims:g}=e;return(0,i.jsxs)("g",{"data-geom":"line",children:[(0,i.jsx)("defs",{children:(0,i.jsx)(C,{ids:c,panel:a})}),(0,i.jsx)(h,{id:`${d}-point`,ids:c,path:_(l.x,l.y,p/2),rimWidth:g.bead(p),paint:{color:o.color,opacity:o.opacity,fillOpacity:1,edge:o.color,edgeWidth:0},state:"hovered"})]})},he=(e,t,r)=>(0,n.defineGeomRenderer)("line",{coord:t,guideMode:"crosshair",swatchShape:"line",render:({layer:a,panelRect:s})=>(0,i.jsx)(mt,{finish:e,layer:a,panel:s,coord:t}),renderHover:({layer:a,primary:s,panelRect:o})=>(0,i.jsx)(At,{finish:e,layer:a,observation:s.observation,panel:o,project:r}),renderHoverCompanions:()=>null,getOverlayAnchor:({observation:a})=>{const s=(0,n.getX)(a),o=(0,n.getY)(a);return s===null||o===null?null:{x:s,y:o}}}),$t=e=>he(e,"cartesian",F),Rt=e=>he(e,"polar",I),jt=4,X=({finish:e,layer:t,observations:r,panel:a,project:s,state:o})=>{const d=(0,n.useGeomStyleReader)(t),l=T(t),c=S("shiny-point"),p=(0,O.useMemo)(()=>(0,n.createStableKeyGenerator)(t.data,t.mapping,t.id),[t.data,t.mapping,t.id]);if(a.width<=0||a.height<=0)return null;const h=w(c),g=o==="hovered"?jt:0,{Cell:x,rims:u}=e;return(0,i.jsxs)("g",{"data-geom":"point",children:[(0,i.jsx)("defs",{children:(0,i.jsx)(C,{ids:h,panel:a})}),Array.from(r,(f,R)=>{const y=s(f,a);if(y===null)return null;const A=(d.get("size",f,o)+g)/2;return A<=0?null:(0,i.jsx)(x,{id:`${c}-${R}`,ids:h,path:_(y.x,y.y,A),rimWidth:u.bead(A*2),paint:l(f,o),state:o},p(f))})]})},pe=(e,t,r)=>(0,n.defineGeomRenderer)("point",{coord:t,swatchShape:"circle",render:({layer:a,panelRect:s})=>(0,i.jsx)(X,{finish:e,layer:a,observations:a.data,panel:s,project:r}),renderHover:({layer:a,primary:s,panelRect:o})=>(0,i.jsx)(X,{finish:e,layer:a,observations:[s.observation],panel:o,project:r,state:"hovered"}),renderHoverCompanions:()=>null}),St=e=>pe(e,"cartesian",F),wt=e=>pe(e,"polar",I),Ct=3,q=1e-6,Ot=.16,Et=5,_t=10,J=120,Tt=.45,Lt=2.5,kt=7,Pt=.55,Q=[v.pulse,"#8E5CFF","#5A8CFF"],ee=4,te=(e,t)=>[...e].flatMap(r=>{const{startAngle:a,endAngle:s}=(0,n.getAngleExtent)(r),{innerRadius:o,outerRadius:d}=(0,n.getRadiusExtent)(r);return a===null||s===null||o===null||d===null?[]:s<=a||d<=0?[]:[{key:`${t(r)}-${a}`,observation:r,startAngle:a,endAngle:s,innerRadius:o,outerRadius:d}]}),Gt=e=>{const[t]=e;return t===void 0?!1:e.every(r=>Math.abs(r.innerRadius-t.innerRadius)<q&&Math.abs(r.outerRadius-t.outerRadius)<q)},re=(e,t,r)=>{const a=(0,n.polarToUnit)(t,r);return{x:e.centre.x+a.x,y:e.centre.y-a.y}},It=(e,t)=>(0,n.buildPolarBarArcPath)({startAngle:e.startAngle,endAngle:e.endAngle,innerRadius:e.innerRadius,outerRadius:e.outerRadius},{centerX:t.centre.x,centerY:t.centre.y,radius:t.radius,digits:Ct}),Ht=({id:e,circle:t,outer:r,bezel:a})=>{const s=Math.PI*2/J,o=Array.from({length:J/2},(d,l)=>{const c=l*2*s,p=c+s,h=re(t,c,r+ee),g=re(t,p,r+ee);return`M${t.centre.x},${t.centre.y} L${h.x},${h.y} L${g.x},${g.y} Z`}).join(" ");return(0,i.jsxs)("g",{children:[(0,i.jsx)("defs",{children:(0,i.jsx)("clipPath",{id:e,children:(0,i.jsx)("path",{d:`${_(t.centre.x,t.centre.y,r)} ${_(t.centre.x,t.centre.y,r-a)}`,clipRule:"evenodd"})})}),(0,i.jsx)("path",{d:o,fill:j,fillOpacity:Tt,clipPath:`url(#${e})`})]})},Mt=({pin:e,id:t,circle:r,inner:a,outer:s,bezel:o})=>{const d=r.radius;return(0,i.jsxs)("g",{children:[(0,i.jsxs)("defs",{children:[(0,i.jsx)("linearGradient",{id:`${t}-glow-colors`,gradientUnits:"userSpaceOnUse",x1:r.centre.x-d,y1:r.centre.y-d,x2:r.centre.x+d,y2:r.centre.y+d,children:Q.map((l,c)=>(0,i.jsx)("stop",{offset:c/(Q.length-1),stopColor:l},l))}),(0,i.jsx)("filter",{id:`${t}-glow`,x:"-50%",y:"-50%",width:"200%",height:"200%",children:(0,i.jsx)("feGaussianBlur",{stdDeviation:kt})})]}),e.hasGlow&&(0,i.jsx)("circle",{cx:r.centre.x,cy:r.centre.y,r:s-o/2,fill:"none",stroke:`url(#${t}-glow-colors)`,strokeWidth:o*Lt,strokeOpacity:Pt,filter:`url(#${t}-glow)`}),a>0&&e.hole!==null&&(0,i.jsx)("circle",{cx:r.centre.x,cy:r.centre.y,r:a,fill:e.hole})]})},ae=({finish:e,layer:t,observations:r,panel:a,isRadialBar:s,state:o})=>{const d=T(t),l=S("shiny-slice"),c=(0,O.useMemo)(()=>(0,n.createStableKeyGenerator)(t.data,t.mapping,t.id),[t.data,t.mapping,t.id]);if(a.width<=0||a.height<=0)return null;const p={centre:{x:a.width/2,y:a.height/2},radius:Math.min(a.width,a.height)/2},h=w(l),g=te(r,c),x=o===void 0?g:te(t.data,c),[u]=x,f=!s&&u!==void 0&&Gt(x),R=(u?.innerRadius??0)*p.radius,y=(u?.outerRadius??0)*p.radius,A=Math.min(_t,Math.max(Et,(y-R)*Ot)),W=f&&o===void 0,{Cell:ue,rims:b,pin:H}=e,ge=f&&H.hasBezel;return(0,i.jsxs)("g",{"data-geom":"bar",children:[(0,i.jsx)("defs",{children:(0,i.jsx)(C,{ids:h,panel:a})}),W&&(0,i.jsx)(Mt,{pin:H,id:`${l}-pin`,circle:p,inner:R,outer:y,bezel:A}),g.map((L,fe)=>{const B=It(L,p);return B===void 0?null:(0,i.jsx)(ue,{id:`${l}-${fe}`,ids:h,path:B,cap:ge?_(p.centre.x,p.centre.y,y):void 0,capWidth:A,rimWidth:f?b.ringSlice(y-R):b.petal((L.outerRadius-L.innerRadius)*p.radius),paint:d(L.observation,o),state:o},L.key)}),W&&H.hasBezel&&(0,i.jsx)(Ht,{id:`${l}-rays`,circle:p,outer:y,bezel:A})]})},Ft=e=>(0,n.defineGeomRenderer)("bar",{coord:"polar",guideMode:"band",swatchShape:"slice",render:({layer:t,coordSystem:r,panelRect:a})=>(0,i.jsx)(ae,{finish:e,layer:t,observations:t.data,panel:a,isRadialBar:r.type==="polar"&&r.bandAxis==="y"}),renderHover:({layer:t,coordSystem:r,primary:a,panelRect:s})=>(0,i.jsx)(ae,{finish:e,layer:t,observations:[a.observation],panel:s,isRadialBar:r.type==="polar"&&r.bandAxis==="y",state:"hovered"}),renderHoverCompanions:()=>null}),ne=({finish:e,layer:t,observations:r,panel:a,state:s})=>{const o=T(t),d=S("shiny-tile"),l=(0,O.useMemo)(()=>(0,n.createStableCellKeyGenerator)(t.data,t.mapping,t.id),[t.data,t.mapping,t.id]);if(a.width<=0||a.height<=0)return null;const c=w(d),{Cell:p,rims:h}=e;return(0,i.jsxs)("g",{"data-geom":"tile",children:[(0,i.jsx)("defs",{children:(0,i.jsx)(C,{ids:c,panel:a})}),Array.from(r,(g,x)=>{const u=(0,n.getPaintedTileRect)(g);if(u===null)return null;const f={x:u.x*a.width+h.tileGap/2,y:u.y*a.height+h.tileGap/2,width:u.width*a.width-h.tileGap,height:u.height*a.height-h.tileGap};return f.width<=0||f.height<=0?null:(0,i.jsx)(p,{id:`${d}-${x}`,ids:c,path:oe(f,h.tileCorner),rimWidth:h.tile(Math.min(f.width,f.height)),isEven:!0,paint:o(g,s),state:s},l(g))})]})},Wt=e=>(0,n.defineGeomRenderer)("tile",{coord:"cartesian",guideMode:null,swatchShape:"square",render:({layer:t,panelRect:r})=>(0,i.jsx)(ne,{finish:e,layer:t,observations:t.data,panel:r}),renderHover:({layer:t,primary:r,panelRect:a})=>(0,i.jsx)(ne,{finish:e,layer:t,observations:[r.observation],panel:a,state:"hovered"}),renderHoverCompanions:()=>null}),bt=e=>[xt(e),Ft(e),Wt(e),$t(e),Rt(e),ht(e),pt(e),St(e),wt(e)],Bt=bt(it),Nt={name:"shiny",styles:De,palette:Ie,colormap:He,colorScheme:"dark",plugins:Bt};exports.shiny=Nt;

package/dist/index.d.ts

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