@graphysdk/theme-comic 0.1.1-beta.1793017273153 → 0.1.1-beta.1793027249956

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,6 +1,6 @@
1
1
  /**
2
- * The paper as a data URI, for the graph's `fill`: `paper` all over, with a tone of `ink` dots
2
+ * The paper as a data URI, for the graph's `fill`: `paper` all over, with a tone of `dotColor` dots
3
3
  * fading out of its bottom right corner. The title and the legend sit in the top corners, one on
4
4
  * each side as the writing direction turns, so the tone stays off both.
5
5
  */
6
- export declare const buildHalftonePaper: (paper: string, ink: string, inkOpacity: number) => string;
6
+ export declare const buildHalftonePaper: (paper: string, dotColor: string, dotOpacity: number) => string;
package/dist/index.cjs CHANGED
@@ -1,4 +1,4 @@
1
- Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});let N=require("react"),e=require("@graphysdk/react"),h=require("react/jsx-runtime");var Y=(t,r)=>{const a=(0,e.getX)(t),l=(0,e.getY)(t)??(0,e.getYMax)(t);return a===null||l===null?null:{x:(0,e.toViewBoxX)(a)*r.width,y:(0,e.toViewBoxY)(l)*r.height}},X=(t,r)=>{const a=(0,e.getX)(t),l=(0,e.getY)(t)??(0,e.getRadiusExtent)(t).outerRadius;if(a===null||l===null)return null;const n=(0,e.polarToUnit)(a,l),i=Math.min(r.width,r.height)/2;return{x:r.width/2+n.x*i,y:r.height/2-n.y*i}},P=8,$=.6,G=Math.PI*2,F=2,j=({x:t,y:r})=>`${t.toFixed(F)},${r.toFixed(F)}`,U=(t,r)=>{const a=G/(P*2);return`M${Array.from({length:P*2},(l,n)=>{const i=(n%2===0?1:$)*(r/2);return{x:t.x+Math.sin(n*a)*i,y:t.y-Math.cos(n*a)*i}}).map(j).join(" L")} Z`},K=t=>{const r=(0,e.useGeomStyleReader)(t);return(a,l)=>{const n=r.get("shadow",a,l);return{color:(0,e.toPaintColor)(r.get("fill",a,l)),opacity:r.get("alpha",a,l),fillOpacity:r.get("fillAlpha",a,l),outline:r.get("stroke",a,l),outlineWidth:r.get("strokeWidth",a,l),shadow:n==="none"?null:{offsetX:n.offsetX,offsetY:n.offsetY,color:n.color}}}},q=1.35,V=`
1
+ Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});let N=require("react"),e=require("@graphysdk/react"),h=require("react/jsx-runtime");var Y=(t,r)=>{const a=(0,e.getX)(t),l=(0,e.getY)(t)??(0,e.getYMax)(t);return a===null||l===null?null:{x:(0,e.toViewBoxX)(a)*r.width,y:(0,e.toViewBoxY)(l)*r.height}},X=(t,r)=>{const a=(0,e.getX)(t),l=(0,e.getY)(t)??(0,e.getRadiusExtent)(t).outerRadius;if(a===null||l===null)return null;const n=(0,e.polarToUnit)(a,l),i=Math.min(r.width,r.height)/2;return{x:r.width/2+n.x*i,y:r.height/2-n.y*i}},P=8,$=.6,G=Math.PI*2,L=2,j=({x:t,y:r})=>`${t.toFixed(L)},${r.toFixed(L)}`,U=(t,r)=>{const a=G/(P*2);return`M${Array.from({length:P*2},(l,n)=>{const i=(n%2===0?1:$)*(r/2);return{x:t.x+Math.sin(n*a)*i,y:t.y-Math.cos(n*a)*i}}).map(j).join(" L")} Z`},K=t=>{const r=(0,e.useGeomStyleReader)(t);return(a,l)=>{const n=r.get("shadow",a,l);return{color:(0,e.toPaintColor)(r.get("fill",a,l)),opacity:r.get("alpha",a,l),fillOpacity:r.get("fillAlpha",a,l),outline:r.get("stroke",a,l),outlineWidth:r.get("strokeWidth",a,l),shadow:n==="none"?null:{offsetX:n.offsetX,offsetY:n.offsetY,color:n.color}}}},q=1.35,V=`
2
2
  @keyframes comic-pop { from { transform: scale(0); } to { transform: none; } }
3
3
  .comic-pop { animation: comic-pop var(--comic-pop-duration) cubic-bezier(0.34, 1.56, 0.64, 1) var(--comic-pop-delay) both; }
4
- `,z=t=>t*q,J=(t,r,a)=>{const[l]=(0,N.useState)(()=>t?.type==="grow"&&t.growAxis==="size"?{plan:t,keys:new Set(Array.from(r,a))}:null);return l},Z=(t,r,a)=>({transformOrigin:`${t.x}px ${t.y}px`,"--comic-pop-duration":`${r.durationSeconds}s`,"--comic-pop-delay":`${r.delayByKey[a]??0}s`}),L=({layer:t,observations:r,panel:a,project:l,state:n,intro:i,animateTransitions:d=!1})=>{const f=(0,e.useGeomStyleReader)(t),m=K(t),p=(0,N.useMemo)(()=>(0,e.createStableKeyGenerator)(t.data,t.mapping,t.id),[t.data,t.mapping,t.id]),y=J(i,r,p);return(0,h.jsxs)("g",{"data-geom":"point",children:[y!==null&&(0,h.jsx)("style",{children:V}),Array.from(r,b=>{const x=l(b,a);if(x===null)return null;const A=p(b),c=m(b,n),W=U(x,z(f.get("size",b,n))),_=y!==null&&y.keys.has(A);return(0,h.jsxs)("g",{opacity:c.opacity,strokeLinejoin:"round",className:_?"comic-pop":void 0,style:_?Z(x,y.plan,A):void 0,children:[c.shadow!==null&&(0,h.jsx)("g",{transform:`translate(${c.shadow.offsetX} ${c.shadow.offsetY})`,children:(0,h.jsx)(e.DefaultGeomPath,{d:W,source:t,fill:c.shadow.color,animateTransitions:d})}),(0,h.jsx)(e.DefaultGeomPath,{d:W,source:t,fill:c.color,fillOpacity:c.fillOpacity,stroke:c.outline,strokeWidth:c.outlineWidth,animateTransitions:d})]},A)})]})},B=(t,r)=>(0,e.defineGeomRenderer)("point",{coord:t,swatchShape:"circle",render:({layer:a,panelRect:l,intro:n,animateTransitions:i})=>(0,h.jsx)(L,{layer:a,observations:a.data,panel:l,project:r,intro:n,animateTransitions:i}),renderHover:({layer:a,primary:l,panelRect:n})=>(0,h.jsx)(L,{layer:a,observations:[l.observation],panel:n,project:r,state:"hovered"}),renderHoverCompanions:()=>null,getEditOutlineShapes:({layer:a,panelRect:l,styleReaders:n})=>(0,e.buildDotsEditOutlineShapes)([...a.data].flatMap(i=>{const d=r(i,l),f=n.get("size",i);if(d===null||f===void 0)return[];const m=n.get("shadow",i),p=m==="none"?{x:0,y:0}:{x:m.offsetX,y:m.offsetY},y=z(f)+(n.get("strokeWidth",i)??0);return[{center:{x:d.x+p.x/2,y:d.y+p.y/2},size:y+Math.hypot(p.x,p.y)}]}))}),Q=B("cartesian",Y),ee=B("polar",X),te=[Q,ee],k=10,oe=.42,I=220,re=.6,T=1,ae=()=>{const t=Math.ceil(I/k),r=[];for(let a=0;a<=t;a+=1){const l=a%2===0?0:k/2;for(let n=0;n<=23;n+=1){const i=-(n*k+l),d=-a*k,f=k*oe*(1-Math.hypot(i,d)/I);f>=re&&r.push(`<circle cx="${i.toFixed(T)}" cy="${d.toFixed(T)}" r="${f.toFixed(T)}"/>`)}}return r.join("")},le=(t,r,a)=>{const l=`<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect width="100%" height="100%" fill="${t}"/><svg x="100%" y="100%" width="1" height="1" overflow="visible"><g fill="${r}" fill-opacity="${a}">${ae()}</g></svg></svg>`;return`data:image/svg+xml,${encodeURIComponent(l)}`},o={paper:"#FBF3DF",bubble:"#FFFDF6",black:"#141414",secondary:"#4A4338",grid:"rgba(20, 20, 20, 0.2)",deepRed:"#C4161C"},w="'Bangers', 'Comic Neue', 'Comic Sans MS', cursive",ne="'Comic Neue', 'Comic Sans MS', 'Chalkboard SE', cursive",s={vermillion:"#D9401F",cyan:"#0B85C8",yellow:"#FFD60A",magenta:"#D6247A",green:"#15964B",purple:"#7A3DC8"},ie=[s.vermillion,s.cyan,s.yellow,s.magenta,s.green,s.purple],se=["#FFE45C","#F58A1F","#C4161C"],de=[s.cyan,"#ECE5D4",s.vermillion],R={offsetX:4,offsetY:4,blur:0,color:o.black},ce={offsetX:6,offsetY:6,blur:0,color:o.black},v={offsetX:2,offsetY:2,blur:0,color:o.black},D={offsetX:4,offsetY:4,blur:0,color:o.black},he={offsetX:6,offsetY:6,blur:0,color:o.black},fe={offsetX:2,offsetY:2,blur:0,color:s.yellow},pe={pattern:"dots",color:"rgba(20, 20, 20, 0.24)",size:7},ge={image:le(o.paper,s.vermillion,.18),fit:"stretch",fallback:o.paper},ue={fontFamily:w,fontWeight:400,fontSize:16,lineHeight:1.05,letterSpacing:1,textTransform:"uppercase",textColor:o.black},M={fill:s.yellow,stroke:o.black,strokeWidth:3,cornerRadius:0,paddingInline:7,paddingBlock:4,shadow:{offsetX:5,offsetY:5,blur:0,color:s.vermillion}},E={fontFamily:w,fontWeight:400,fontSize:16,lineHeight:1.05,letterSpacing:1,textTransform:"uppercase",textColor:o.black},C={...M,strokeWidth:2.5,paddingInline:7,paddingBlock:3,shadow:{offsetX:3,offsetY:3,blur:0,color:s.vermillion}},O={fontFamily:w,fontWeight:400,letterSpacing:1,textTransform:"uppercase"},g={stroke:o.black,strokeAlpha:1},H={dashArray:[],lineCap:"round",lineJoin:"round"},u={textColor:o.black,fontWeight:700},S={textColor:o.secondary,fontWeight:700},ye={tokens:{graphBackground:o.paper,graphBorder:o.black,geomBorder:o.black,textPrimary:o.black,textSecondary:o.secondary,ruleLine:o.black,gridLine:o.grid,hoverAffordance:o.black,hoverGuideFill:"rgba(20, 20, 20, 0.07)",hoverGuideLine:o.black,legendFocus:o.black,tooltipBackground:o.bubble,tooltipBorder:o.black,tooltipPrimaryRow:"rgba(255, 214, 10, 0.35)",annotationShape:s.yellow,annotationArrow:o.black,differenceLabelBackground:o.bubble,trendPositive:s.green,trendNegative:o.deepRed,trendNeutral:o.secondary},defaults:[e.style.graph({fill:ge,strokeWidth:4,cornerRadius:0,fontFamily:ne,padding:22,shadow:he}),e.style.geom({shadow:R,overpaint:pe}),e.style.geom({shadow:R},{state:"hovered"}),e.style.geom.bar({...g,strokeWidth:2.5,cornerRadius:0}),e.style.geom.bar({...g,strokeWidth:2.5,shadow:ce},{state:"hovered"}),e.style.geom.line({strokeWidth:4,...H,shadow:v,overpaint:"none"}),e.style.geom.line({shadow:v},{state:"hovered"}),e.style.geom.area({...g,fillAlpha:1,strokeWidth:2.5,...H}),e.style.geom.point({...g,size:10,strokeWidth:2,shadow:v}),e.style.geom.point({...g,strokeWidth:3,shadow:"none"},{state:"hovered"}),e.style.geom.tile({...g,cornerRadius:2,strokeWidth:1.5,shadow:"none"}),e.style.geom.tile({...g,strokeWidth:3,shadow:"none"},{state:"hovered"}),e.style.geom.rule({strokeWidth:2.5,dashArray:[3,3],lineCap:"round",shadow:"none"}),e.style.geom.rule.label({...O,textColor:s.yellow,fontSize:15}),e.style.gridLine({dashArray:[1,5]}),e.style.gridLine.x({strokeWidth:0}),e.style.gridLine.y({strokeWidth:1.5}),e.style.panelBorder({strokeWidth:0}),e.style.panelBorder.bottom({stroke:o.black,strokeWidth:3,dashArray:[]}),e.style.tickLine({strokeWidth:0}),e.style.tickLabel({...S,fontSize:12,lineHeight:1}),e.style.axisLabel({...u,...O,fontSize:18,lineHeight:1}),e.style.heading({...u}),e.style.heading.h1({fontFamily:w,fontWeight:400,fontSize:36,lineHeight:1,letterSpacing:1,textTransform:"uppercase",textShadow:fe}),e.style.heading.h2({...S,fontSize:16,lineHeight:1.2}),e.style.header({margin:{bottom:18}}),e.style.caption({...S,fontWeight:400,fontSize:13}),e.style.source({...S,fontWeight:400,fontSize:13}),e.style.dataLabel({...u,fontSize:14,fill:"transparent"}),e.style.legendItem({...u,...O,fontSize:18,fill:"transparent",stroke:"transparent"}),e.style.legendItem.swatch({size:16}),e.style.directLabel({fontWeight:700,fontSize:14}),e.style.tooltip({strokeWidth:2.5,cornerRadius:10,paddingInline:12,paddingBlock:9,shadow:D}),e.style.tooltip.heading({...u,fontSize:15,lineHeight:1.3}),e.style.tooltip.label({...S,fontSize:14,lineHeight:1.3}),e.style.tooltip.value({...u,fontSize:14,lineHeight:1.3}),e.style.legend.popover({strokeWidth:2.5,cornerRadius:10,shadow:D}),e.style.annotation.text({...ue,...M}),e.style.annotation.shape({fillAlpha:.35,stroke:o.black,strokeWidth:2}),e.style.annotation.arrow({strokeWidth:3.5,dashArray:[]}),e.style.annotation.arrow.outline({stroke:o.paper,strokeWidth:2}),e.style.annotation.pinnedNumber({stroke:o.black,shadow:v}),e.style.annotation.pinnedNumber.label({...E,...C}),e.style.annotation.comment({stroke:o.black,shadow:v}),e.style.annotation.comment.label({...E,...C}),e.style.annotation.differenceArrow({stroke:o.black,strokeWidth:2.5}),e.style.annotation.differenceArrow.label({...E,...C,fontSize:18}),e.style.panelBorder.bottom({strokeWidth:0},{coord:"polar"}),e.style.tickLabel({...u,textOutlineColor:o.paper,textOutlineWidth:3.5},{coord:"polar"}),e.style.geom.area({fillAlpha:.5,shadow:"none"},{coord:"polar"}),e.style.geom.area({shadow:"none"},{coord:"polar",state:"hovered"}),e.style.geom.bar({strokeWidth:4.5,shadow:"none"},{coord:"polar",state:"hovered"})]},me={name:"comic",styles:ye,palettes:{categorical:ie,sequential:se,diverging:de},colorScheme:"light",plugins:te};exports.comic=me;
4
+ `,z=t=>t*q,J=(t,r,a)=>{const[l]=(0,N.useState)(()=>t?.type==="grow"&&t.growAxis==="size"?{plan:t,keys:new Set(Array.from(r,a))}:null);return l},Z=(t,r,a)=>({transformOrigin:`${t.x}px ${t.y}px`,"--comic-pop-duration":`${r.durationSeconds}s`,"--comic-pop-delay":`${r.delayByKey[a]??0}s`}),F=({layer:t,observations:r,panel:a,project:l,state:n,intro:i,animateTransitions:d=!1})=>{const f=(0,e.useGeomStyleReader)(t),m=K(t),g=(0,N.useMemo)(()=>(0,e.createStableKeyGenerator)(t.data,t.mapping,t.id),[t.data,t.mapping,t.id]),y=J(i,r,g);return(0,h.jsxs)("g",{"data-geom":"point",children:[y!==null&&(0,h.jsx)("style",{children:V}),Array.from(r,b=>{const x=l(b,a);if(x===null)return null;const A=g(b),c=m(b,n),W=U(x,z(f.get("size",b,n))),_=y!==null&&y.keys.has(A);return(0,h.jsxs)("g",{opacity:c.opacity,strokeLinejoin:"round",className:_?"comic-pop":void 0,style:_?Z(x,y.plan,A):void 0,children:[c.shadow!==null&&(0,h.jsx)("g",{transform:`translate(${c.shadow.offsetX} ${c.shadow.offsetY})`,children:(0,h.jsx)(e.DefaultGeomPath,{d:W,source:t,fill:c.shadow.color,animateTransitions:d})}),(0,h.jsx)(e.DefaultGeomPath,{d:W,source:t,fill:c.color,fillOpacity:c.fillOpacity,stroke:c.outline,strokeWidth:c.outlineWidth,animateTransitions:d})]},A)})]})},B=(t,r)=>(0,e.defineGeomRenderer)("point",{coord:t,swatchShape:"circle",render:({layer:a,panelRect:l,intro:n,animateTransitions:i})=>(0,h.jsx)(F,{layer:a,observations:a.data,panel:l,project:r,intro:n,animateTransitions:i}),renderHover:({layer:a,primary:l,panelRect:n})=>(0,h.jsx)(F,{layer:a,observations:[l.observation],panel:n,project:r,state:"hovered"}),renderHoverCompanions:()=>null,getEditOutlineShapes:({layer:a,panelRect:l,styleReaders:n})=>(0,e.buildDotsEditOutlineShapes)([...a.data].flatMap(i=>{const d=r(i,l),f=n.get("size",i);if(d===null||f===void 0)return[];const m=n.get("shadow",i),g=m==="none"?{x:0,y:0}:{x:m.offsetX,y:m.offsetY},y=z(f)+(n.get("strokeWidth",i)??0);return[{center:{x:d.x+g.x/2,y:d.y+g.y/2},size:y+Math.hypot(g.x,g.y)}]}))}),Q=B("cartesian",Y),ee=B("polar",X),te=[Q,ee],k=10,oe=.42,I=220,re=.6,T=1,ae=()=>{const t=Math.ceil(I/k),r=[];for(let a=0;a<=t;a+=1){const l=a%2===0?0:k/2;for(let n=0;n<=23;n+=1){const i=-(n*k+l),d=-a*k,f=k*oe*(1-Math.hypot(i,d)/I);f>=re&&r.push(`<circle cx="${i.toFixed(T)}" cy="${d.toFixed(T)}" r="${f.toFixed(T)}"/>`)}}return r.join("")},le=(t,r,a)=>{const l=`<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect width="100%" height="100%" fill="${t}"/><svg x="100%" y="100%" width="1" height="1" overflow="visible"><g fill="${r}" fill-opacity="${a}">${ae()}</g></svg></svg>`;return`data:image/svg+xml,${encodeURIComponent(l)}`},o={paper:"#FBF3DF",bubble:"#FFFDF6",black:"#141414",secondary:"#4A4338",grid:"rgba(20, 20, 20, 0.2)",deepRed:"#C4161C"},w="'Bangers', 'Comic Neue', 'Comic Sans MS', cursive",ne="'Comic Neue', 'Comic Sans MS', 'Chalkboard SE', cursive",s={vermillion:"#D9401F",cyan:"#0B85C8",yellow:"#FFD60A",magenta:"#D6247A",green:"#15964B",purple:"#7A3DC8"},ie=[s.vermillion,s.cyan,s.yellow,s.magenta,s.green,s.purple],se=["#FFE45C","#F58A1F","#C4161C"],de=[s.cyan,"#ECE5D4",s.vermillion],R={offsetX:4,offsetY:4,blur:0,color:o.black},ce={offsetX:6,offsetY:6,blur:0,color:o.black},v={offsetX:2,offsetY:2,blur:0,color:o.black},D={offsetX:4,offsetY:4,blur:0,color:o.black},he={offsetX:6,offsetY:6,blur:0,color:o.black},fe={offsetX:2,offsetY:2,blur:0,color:s.yellow},ge={pattern:"dots",color:"rgba(20, 20, 20, 0.24)",size:7},pe={image:le(o.paper,s.vermillion,.18),fit:"stretch",fallback:o.paper},ue={fontFamily:w,fontWeight:400,fontSize:16,lineHeight:1.05,letterSpacing:1,textTransform:"uppercase",textColor:o.black},M={fill:s.yellow,stroke:o.black,strokeWidth:3,cornerRadius:0,paddingInline:7,paddingBlock:4,shadow:{offsetX:5,offsetY:5,blur:0,color:s.vermillion}},C={fontFamily:w,fontWeight:400,fontSize:16,lineHeight:1.05,letterSpacing:1,textTransform:"uppercase",textColor:o.black},E={...M,strokeWidth:2.5,paddingInline:7,paddingBlock:3,shadow:{offsetX:3,offsetY:3,blur:0,color:s.vermillion}},O={fontFamily:w,fontWeight:400,letterSpacing:1,textTransform:"uppercase"},p={stroke:o.black,strokeAlpha:1},H={dashArray:[],lineCap:"round",lineJoin:"round"},u={textColor:o.black,fontWeight:700},S={textColor:o.secondary,fontWeight:700},ye={tokens:{graphBackground:o.paper,graphBorder:o.black,geomBorder:o.black,textPrimary:o.black,textSecondary:o.secondary,ruleLine:o.black,gridLine:o.grid,hoverStroke:o.black,hoverGuideFill:"rgba(20, 20, 20, 0.07)",hoverGuideLine:o.black,legendFocus:o.black,tooltipBackground:o.bubble,tooltipBorder:o.black,tooltipPrimaryRow:"rgba(255, 214, 10, 0.35)",annotationShape:s.yellow,annotationArrow:o.black,differenceLabelBackground:o.bubble,trendPositive:s.green,trendNegative:o.deepRed,trendNeutral:o.secondary},defaults:[e.style.graph({fill:pe,strokeWidth:4,cornerRadius:0,fontFamily:ne,padding:22,shadow:he}),e.style.geom({shadow:R,overpaint:ge}),e.style.geom({shadow:R},{state:"hovered"}),e.style.geom.bar({...p,strokeWidth:2.5,cornerRadius:0}),e.style.geom.bar({...p,strokeWidth:2.5,shadow:ce},{state:"hovered"}),e.style.geom.line({strokeWidth:4,...H,shadow:v,overpaint:"none"}),e.style.geom.line({shadow:v},{state:"hovered"}),e.style.geom.area({...p,fillAlpha:1,strokeWidth:2.5,...H}),e.style.geom.point({...p,size:10,strokeWidth:2,shadow:v}),e.style.geom.point({...p,strokeWidth:3,shadow:"none"},{state:"hovered"}),e.style.geom.tile({...p,cornerRadius:2,strokeWidth:1.5,shadow:"none"}),e.style.geom.tile({...p,strokeWidth:3,shadow:"none"},{state:"hovered"}),e.style.geom.rule({strokeWidth:2.5,dashArray:[3,3],lineCap:"round",shadow:"none"}),e.style.geom.rule.label({...O,textColor:s.yellow,fontSize:15}),e.style.gridLine({dashArray:[1,5]}),e.style.gridLine.x({strokeWidth:0}),e.style.gridLine.y({strokeWidth:1.5}),e.style.panelBorder({strokeWidth:0}),e.style.axisLine.x({stroke:o.black,strokeWidth:3,dashArray:[],lineCap:"round"}),e.style.tickLine({strokeWidth:0}),e.style.tickLabel({...S,fontSize:12,lineHeight:1}),e.style.axisLabel({...u,...O,fontSize:18,lineHeight:1}),e.style.heading({...u}),e.style.heading.h1({fontFamily:w,fontWeight:400,fontSize:36,lineHeight:1,letterSpacing:1,textTransform:"uppercase",textShadow:fe}),e.style.heading.h2({...S,fontSize:16,lineHeight:1.2}),e.style.header({margin:{bottom:18}}),e.style.caption({...S,fontWeight:400,fontSize:13}),e.style.source({...S,fontWeight:400,fontSize:13}),e.style.dataLabel({...u,fontSize:14,fill:"transparent"}),e.style.legendItem({...u,...O,fontSize:18,fill:"transparent",stroke:"transparent"}),e.style.legendItem.swatch({size:16}),e.style.directLabel({fontWeight:700,fontSize:14}),e.style.tooltip({strokeWidth:2.5,cornerRadius:10,paddingInline:12,paddingBlock:9,shadow:D}),e.style.tooltip.heading({...u,fontSize:15,lineHeight:1.3}),e.style.tooltip.label({...S,fontSize:14,lineHeight:1.3}),e.style.tooltip.value({...u,fontSize:14,lineHeight:1.3}),e.style.legend.popover({strokeWidth:2.5,cornerRadius:10,shadow:D}),e.style.annotation.text({...ue,...M}),e.style.annotation.shape({fillAlpha:.35,stroke:o.black,strokeWidth:2}),e.style.annotation.arrow({strokeWidth:3.5,dashArray:[]}),e.style.annotation.arrow.outline({stroke:o.paper,strokeWidth:2}),e.style.annotation.pinnedNumber({stroke:o.black,shadow:v}),e.style.annotation.pinnedNumber.label({...C,...E}),e.style.annotation.comment({stroke:o.black,shadow:v}),e.style.annotation.comment.label({...C,...E}),e.style.annotation.differenceArrow({stroke:o.black,strokeWidth:2.5}),e.style.annotation.differenceArrow.label({...C,...E,fontSize:18}),e.style.tickLabel({...u,textOutlineColor:o.paper,textOutlineWidth:3.5},{coord:"polar"}),e.style.geom.area({fillAlpha:.5,shadow:"none"},{coord:"polar"}),e.style.geom.area({shadow:"none"},{coord:"polar",state:"hovered"}),e.style.geom.bar({strokeWidth:4.5,shadow:"none"},{coord:"polar",state:"hovered"})]},me={name:"comic",styles:ye,palettes:{categorical:ie,sequential:se,diverging:de},colorScheme:"light",plugins:te};exports.comic=me;
package/dist/index.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  import { useMemo as U, useState as K } from "react";
2
- import { DefaultGeomPath as F, buildDotsEditOutlineShapes as j, createStableKeyGenerator as V, defineGeomRenderer as q, getRadiusExtent as J, getX as B, getY as M, getYMax as Z, polarToUnit as Q, style as e, toPaintColor as ee, toViewBoxX as oe, toViewBoxY as te, useGeomStyleReader as Y } from "@graphysdk/react";
3
- import { jsx as m, jsxs as L } from "react/jsx-runtime";
2
+ import { DefaultGeomPath as L, buildDotsEditOutlineShapes as j, createStableKeyGenerator as V, defineGeomRenderer as q, getRadiusExtent as J, getX as B, getY as M, getYMax as Z, polarToUnit as Q, style as e, toPaintColor as ee, toViewBoxX as oe, toViewBoxY as te, useGeomStyleReader as Y } from "@graphysdk/react";
3
+ import { jsx as m, jsxs as F } from "react/jsx-runtime";
4
4
  var re = (o, r) => {
5
5
  const a = B(o), n = M(o) ?? Z(o);
6
6
  return a === null || n === null ? null : {
@@ -60,27 +60,27 @@ var re = (o, r) => {
60
60
  o.mapping,
61
61
  o.id
62
62
  ]), u = fe(l, r, f);
63
- return /* @__PURE__ */ L("g", {
63
+ return /* @__PURE__ */ F("g", {
64
64
  "data-geom": "point",
65
- children: [u !== null && /* @__PURE__ */ m("style", { children: he }), Array.from(r, (y) => {
66
- const A = n(y, a);
65
+ children: [u !== null && /* @__PURE__ */ m("style", { children: he }), Array.from(r, (b) => {
66
+ const A = n(b, a);
67
67
  if (A === null) return null;
68
- const T = f(y), c = k(y, i), O = se(A, X(h.get("size", y, i))), _ = u !== null && u.keys.has(T);
69
- return /* @__PURE__ */ L("g", {
68
+ const x = f(b), c = k(b, i), W = se(A, X(h.get("size", b, i))), _ = u !== null && u.keys.has(x);
69
+ return /* @__PURE__ */ F("g", {
70
70
  opacity: c.opacity,
71
71
  strokeLinejoin: "round",
72
72
  className: _ ? "comic-pop" : void 0,
73
- style: _ ? pe(A, u.plan, T) : void 0,
73
+ style: _ ? pe(A, u.plan, x) : void 0,
74
74
  children: [c.shadow !== null && /* @__PURE__ */ m("g", {
75
75
  transform: `translate(${c.shadow.offsetX} ${c.shadow.offsetY})`,
76
- children: /* @__PURE__ */ m(F, {
77
- d: O,
76
+ children: /* @__PURE__ */ m(L, {
77
+ d: W,
78
78
  source: o,
79
79
  fill: c.shadow.color,
80
80
  animateTransitions: d
81
81
  })
82
- }), /* @__PURE__ */ m(F, {
83
- d: O,
82
+ }), /* @__PURE__ */ m(L, {
83
+ d: W,
84
84
  source: o,
85
85
  fill: c.color,
86
86
  fillOpacity: c.fillOpacity,
@@ -88,7 +88,7 @@ var re = (o, r) => {
88
88
  strokeWidth: c.outlineWidth,
89
89
  animateTransitions: d
90
90
  })]
91
- }, T);
91
+ }, x);
92
92
  })]
93
93
  });
94
94
  }, $ = (o, r) => q("point", {
@@ -128,17 +128,17 @@ var re = (o, r) => {
128
128
  size: u + Math.hypot(f.x, f.y)
129
129
  }];
130
130
  }))
131
- }), ge = $("cartesian", re), ue = $("polar", ae), me = [ge, ue], v = 10, ke = 0.42, D = 220, ve = 0.6, x = 1, Se = () => {
131
+ }), ge = $("cartesian", re), ue = $("polar", ae), me = [ge, ue], v = 10, ke = 0.42, D = 220, ve = 0.6, T = 1, Se = () => {
132
132
  const o = Math.ceil(D / v), r = [];
133
133
  for (let a = 0; a <= o; a += 1) {
134
134
  const n = a % 2 === 0 ? 0 : v / 2;
135
135
  for (let i = 0; i <= 23; i += 1) {
136
136
  const l = -(i * v + n), d = -a * v, h = v * ke * (1 - Math.hypot(l, d) / D);
137
- h >= ve && r.push(`<circle cx="${l.toFixed(x)}" cy="${d.toFixed(x)}" r="${h.toFixed(x)}"/>`);
137
+ h >= ve && r.push(`<circle cx="${l.toFixed(T)}" cy="${d.toFixed(T)}" r="${h.toFixed(T)}"/>`);
138
138
  }
139
139
  }
140
140
  return r.join("");
141
- }, be = (o, r, a) => {
141
+ }, ye = (o, r, a) => {
142
142
  const n = `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect width="100%" height="100%" fill="${o}"/><svg x="100%" y="100%" width="1" height="1" overflow="visible"><g fill="${r}" fill-opacity="${a}">${Se()}</g></svg></svg>`;
143
143
  return `data:image/svg+xml,${encodeURIComponent(n)}`;
144
144
  }, t = {
@@ -148,7 +148,7 @@ var re = (o, r) => {
148
148
  secondary: "#4A4338",
149
149
  grid: "rgba(20, 20, 20, 0.2)",
150
150
  deepRed: "#C4161C"
151
- }, w = "'Bangers', 'Comic Neue', 'Comic Sans MS', cursive", ye = "'Comic Neue', 'Comic Sans MS', 'Chalkboard SE', cursive", s = {
151
+ }, w = "'Bangers', 'Comic Neue', 'Comic Sans MS', cursive", be = "'Comic Neue', 'Comic Sans MS', 'Chalkboard SE', cursive", s = {
152
152
  vermillion: "#D9401F",
153
153
  cyan: "#0B85C8",
154
154
  yellow: "#FFD60A",
@@ -166,7 +166,7 @@ var re = (o, r) => {
166
166
  "#FFE45C",
167
167
  "#F58A1F",
168
168
  "#C4161C"
169
- ], Te = [
169
+ ], xe = [
170
170
  s.cyan,
171
171
  "#ECE5D4",
172
172
  s.vermillion
@@ -175,7 +175,7 @@ var re = (o, r) => {
175
175
  offsetY: 4,
176
176
  blur: 0,
177
177
  color: t.black
178
- }, xe = {
178
+ }, Te = {
179
179
  offsetX: 6,
180
180
  offsetY: 6,
181
181
  blur: 0,
@@ -190,22 +190,22 @@ var re = (o, r) => {
190
190
  offsetY: 4,
191
191
  blur: 0,
192
192
  color: t.black
193
- }, Ee = {
193
+ }, Ce = {
194
194
  offsetX: 6,
195
195
  offsetY: 6,
196
196
  blur: 0,
197
197
  color: t.black
198
- }, Ce = {
198
+ }, Ee = {
199
199
  offsetX: 2,
200
200
  offsetY: 2,
201
201
  blur: 0,
202
202
  color: s.yellow
203
- }, We = {
203
+ }, Oe = {
204
204
  pattern: "dots",
205
205
  color: "rgba(20, 20, 20, 0.24)",
206
206
  size: 7
207
- }, Oe = {
208
- image: be(t.paper, s.vermillion, 0.18),
207
+ }, We = {
208
+ image: ye(t.paper, s.vermillion, 0.18),
209
209
  fit: "stretch",
210
210
  fallback: t.paper
211
211
  }, _e = {
@@ -229,7 +229,7 @@ var re = (o, r) => {
229
229
  blur: 0,
230
230
  color: s.vermillion
231
231
  }
232
- }, E = {
232
+ }, C = {
233
233
  fontFamily: w,
234
234
  fontWeight: 400,
235
235
  fontSize: 16,
@@ -237,7 +237,7 @@ var re = (o, r) => {
237
237
  letterSpacing: 1,
238
238
  textTransform: "uppercase",
239
239
  textColor: t.black
240
- }, C = {
240
+ }, E = {
241
241
  ...G,
242
242
  strokeWidth: 2.5,
243
243
  paddingInline: 7,
@@ -248,7 +248,7 @@ var re = (o, r) => {
248
248
  blur: 0,
249
249
  color: s.vermillion
250
250
  }
251
- }, W = {
251
+ }, O = {
252
252
  fontFamily: w,
253
253
  fontWeight: 400,
254
254
  letterSpacing: 1,
@@ -263,10 +263,10 @@ var re = (o, r) => {
263
263
  }, g = {
264
264
  textColor: t.black,
265
265
  fontWeight: 700
266
- }, b = {
266
+ }, y = {
267
267
  textColor: t.secondary,
268
268
  fontWeight: 700
269
- }, Fe = {
269
+ }, Le = {
270
270
  tokens: {
271
271
  graphBackground: t.paper,
272
272
  graphBorder: t.black,
@@ -275,7 +275,7 @@ var re = (o, r) => {
275
275
  textSecondary: t.secondary,
276
276
  ruleLine: t.black,
277
277
  gridLine: t.grid,
278
- hoverAffordance: t.black,
278
+ hoverStroke: t.black,
279
279
  hoverGuideFill: "rgba(20, 20, 20, 0.07)",
280
280
  hoverGuideLine: t.black,
281
281
  legendFocus: t.black,
@@ -291,16 +291,16 @@ var re = (o, r) => {
291
291
  },
292
292
  defaults: [
293
293
  e.graph({
294
- fill: Oe,
294
+ fill: We,
295
295
  strokeWidth: 4,
296
296
  cornerRadius: 0,
297
- fontFamily: ye,
297
+ fontFamily: be,
298
298
  padding: 22,
299
- shadow: Ee
299
+ shadow: Ce
300
300
  }),
301
301
  e.geom({
302
302
  shadow: H,
303
- overpaint: We
303
+ overpaint: Oe
304
304
  }),
305
305
  e.geom({ shadow: H }, { state: "hovered" }),
306
306
  e.geom.bar({
@@ -311,7 +311,7 @@ var re = (o, r) => {
311
311
  e.geom.bar({
312
312
  ...p,
313
313
  strokeWidth: 2.5,
314
- shadow: xe
314
+ shadow: Te
315
315
  }, { state: "hovered" }),
316
316
  e.geom.line({
317
317
  strokeWidth: 4,
@@ -355,7 +355,7 @@ var re = (o, r) => {
355
355
  shadow: "none"
356
356
  }),
357
357
  e.geom.rule.label({
358
- ...W,
358
+ ...O,
359
359
  textColor: s.yellow,
360
360
  fontSize: 15
361
361
  }),
@@ -363,20 +363,21 @@ var re = (o, r) => {
363
363
  e.gridLine.x({ strokeWidth: 0 }),
364
364
  e.gridLine.y({ strokeWidth: 1.5 }),
365
365
  e.panelBorder({ strokeWidth: 0 }),
366
- e.panelBorder.bottom({
366
+ e.axisLine.x({
367
367
  stroke: t.black,
368
368
  strokeWidth: 3,
369
- dashArray: []
369
+ dashArray: [],
370
+ lineCap: "round"
370
371
  }),
371
372
  e.tickLine({ strokeWidth: 0 }),
372
373
  e.tickLabel({
373
- ...b,
374
+ ...y,
374
375
  fontSize: 12,
375
376
  lineHeight: 1
376
377
  }),
377
378
  e.axisLabel({
378
379
  ...g,
379
- ...W,
380
+ ...O,
380
381
  fontSize: 18,
381
382
  lineHeight: 1
382
383
  }),
@@ -388,21 +389,21 @@ var re = (o, r) => {
388
389
  lineHeight: 1,
389
390
  letterSpacing: 1,
390
391
  textTransform: "uppercase",
391
- textShadow: Ce
392
+ textShadow: Ee
392
393
  }),
393
394
  e.heading.h2({
394
- ...b,
395
+ ...y,
395
396
  fontSize: 16,
396
397
  lineHeight: 1.2
397
398
  }),
398
399
  e.header({ margin: { bottom: 18 } }),
399
400
  e.caption({
400
- ...b,
401
+ ...y,
401
402
  fontWeight: 400,
402
403
  fontSize: 13
403
404
  }),
404
405
  e.source({
405
- ...b,
406
+ ...y,
406
407
  fontWeight: 400,
407
408
  fontSize: 13
408
409
  }),
@@ -413,7 +414,7 @@ var re = (o, r) => {
413
414
  }),
414
415
  e.legendItem({
415
416
  ...g,
416
- ...W,
417
+ ...O,
417
418
  fontSize: 18,
418
419
  fill: "transparent",
419
420
  stroke: "transparent"
@@ -436,7 +437,7 @@ var re = (o, r) => {
436
437
  lineHeight: 1.3
437
438
  }),
438
439
  e.tooltip.label({
439
- ...b,
440
+ ...y,
440
441
  fontSize: 14,
441
442
  lineHeight: 1.3
442
443
  }),
@@ -472,27 +473,26 @@ var re = (o, r) => {
472
473
  shadow: S
473
474
  }),
474
475
  e.annotation.pinnedNumber.label({
475
- ...E,
476
- ...C
476
+ ...C,
477
+ ...E
477
478
  }),
478
479
  e.annotation.comment({
479
480
  stroke: t.black,
480
481
  shadow: S
481
482
  }),
482
483
  e.annotation.comment.label({
483
- ...E,
484
- ...C
484
+ ...C,
485
+ ...E
485
486
  }),
486
487
  e.annotation.differenceArrow({
487
488
  stroke: t.black,
488
489
  strokeWidth: 2.5
489
490
  }),
490
491
  e.annotation.differenceArrow.label({
491
- ...E,
492
492
  ...C,
493
+ ...E,
493
494
  fontSize: 18
494
495
  }),
495
- e.panelBorder.bottom({ strokeWidth: 0 }, { coord: "polar" }),
496
496
  e.tickLabel({
497
497
  ...g,
498
498
  textOutlineColor: t.paper,
@@ -516,11 +516,11 @@ var re = (o, r) => {
516
516
  ]
517
517
  }, Re = {
518
518
  name: "comic",
519
- styles: Fe,
519
+ styles: Le,
520
520
  palettes: {
521
521
  categorical: we,
522
522
  sequential: Ae,
523
- diverging: Te
523
+ diverging: xe
524
524
  },
525
525
  colorScheme: "light",
526
526
  plugins: me
package/package.json CHANGED
@@ -13,7 +13,7 @@
13
13
  "theme",
14
14
  "comic"
15
15
  ],
16
- "version": "0.1.1-beta.1793017273153",
16
+ "version": "0.1.1-beta.1793027249956",
17
17
  "type": "module",
18
18
  "sideEffects": [
19
19
  "*.css"
@@ -40,7 +40,7 @@
40
40
  },
41
41
  "peerDependencies": {
42
42
  "react": "^19.0.0",
43
- "@graphysdk/react": "^1.9.0-beta.1793017273153"
43
+ "@graphysdk/react": "^1.9.0-beta.1793027249956"
44
44
  },
45
45
  "devDependencies": {
46
46
  "@testing-library/react": "^16.3.1",
@@ -52,8 +52,8 @@
52
52
  "vite": "^8.1.5",
53
53
  "vite-plugin-dts": "^4.5.4",
54
54
  "vitest": "^4.1.11",
55
- "@graphysdk/react": "1.9.0-beta.1793017273153",
56
- "@graphysdk/viz-engine": "1.9.0-beta.1793017273153",
55
+ "@graphysdk/react": "1.9.0-beta.1793027249956",
56
+ "@graphysdk/viz-engine": "1.9.0-beta.1793027249956",
57
57
  "@graphytools/eslint-config": "0.0.1",
58
58
  "@graphytools/typescript-config": "0.0.1",
59
59
  "@graphytools/vitest-config": "1.0.0"