@graphysdk/theme-comic 0.1.1-beta.1792404455940 → 0.1.1-beta.1792409717036

package/dist/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});let H=require("react"),e=require("@graphysdk/react"),g=require("react/jsx-runtime");var B=(t,r)=>{const o=(0,e.getX)(t),l=(0,e.getY)(t)??(0,e.getYMax)(t);return o===null||l===null?null:{x:(0,e.toViewBoxX)(o)*r.width,y:(0,e.toViewBoxY)(l)*r.height}},Y=(t,r)=>{const o=(0,e.getX)(t),l=(0,e.getY)(t)??(0,e.getRadiusExtent)(t).outerRadius;if(o===null||l===null)return null;const i=(0,e.polarToUnit)(o,l),n=Math.min(r.width,r.height)/2;return{x:r.width/2+i.x*n,y:r.height/2-i.y*n}},z=22,F=Math.PI*2,Se=F/(z*2),$=(t,r,o)=>({x:t.x+Math.sin(o.angle)*o.radius*r,y:t.y-Math.cos(o.angle)*o.radius*r}),W=2,G=({x:t,y:r})=>`${t.toFixed(W)},${r.toFixed(W)}`,_=8,X=.6,j=(t,r)=>{const o=r/2,l=F/(_*2);return`M${Array.from({length:_*2},(i,n)=>$(t,o,{angle:n*l,radius:n%2===0?1:X})).map(G).join(" L")} Z`},D=t=>{const r=(0,e.useGeomStyleReader)(t);return(o,l)=>{const i=r.get("shadow",o,l);return{color:(0,e.toPaintColor)(r.get("fill",o,l)),opacity:r.get("alpha",o,l),fillOpacity:r.get("fillAlpha",o,l),outline:r.get("stroke",o,l),outlineWidth:r.get("strokeWidth",o,l),shadow:i==="none"?null:{offsetX:i.offsetX,offsetY:i.offsetY,color:i.color}}}},U=1.35,K=4,V=1,R=({layer:t,observations:r,panel:o,project:l,state:i})=>{const n=(0,e.useGeomStyleReader)(t),f=D(t),u=(0,H.useMemo)(()=>(0,e.createStableKeyGenerator)(t.data,t.mapping,t.id),[t.data,t.mapping,t.id]),v=i==="hovered";return(0,g.jsx)("g",{"data-geom":"point",children:Array.from(r,p=>{const h=l(p,o);if(h===null)return null;const s=f(p,i),c=j(h,n.get("size",p,i)*U+(v?K:0));return(0,g.jsxs)("g",{opacity:s.opacity,children:[s.shadow!==null&&(0,g.jsx)("path",{d:c,transform:`translate(${s.shadow.offsetX} ${s.shadow.offsetY})`,fill:s.shadow.color}),(0,g.jsx)("path",{d:c,fill:s.color,fillOpacity:s.fillOpacity,stroke:s.outline,strokeWidth:s.outlineWidth+(v?V:0),strokeLinejoin:"round"})]},u(p))})})},N=(t,r)=>(0,e.defineGeomRenderer)("point",{coord:t,swatchShape:"circle",render:({layer:o,panelRect:l})=>(0,g.jsx)(R,{layer:o,observations:o.data,panel:l,project:r}),renderHover:({layer:o,primary:l,panelRect:i})=>(0,g.jsx)(R,{layer:o,observations:[l.observation],panel:i,project:r,state:"hovered"}),renderHoverCompanions:()=>null}),q=N("cartesian",B),J=N("polar",Y),Z=2,Q=2,ee=(t,r,o)=>[...t].flatMap(l=>{const{startAngle:i,endAngle:n}=(0,e.getAngleExtent)(l),{innerRadius:f,outerRadius:u}=(0,e.getRadiusExtent)(l);return i===null||n===null||f===null||u===null?[]:n<=i||u<=0?[]:[{key:`${o(l)}-${i}`,paint:r(l),startAngle:i,endAngle:n,innerRadius:f,outerRadius:u}]}),te=(t,r,o)=>(0,e.buildPolarBarArcPath)(t,{centerX:r.x,centerY:r.y,radius:o,digits:Q}),C=({layer:t,observations:r,panel:o,state:l})=>{const i=D(t),n=(0,H.useMemo)(()=>(0,e.createStableKeyGenerator)(t.data,t.mapping,t.id),[t.data,t.mapping,t.id]),f=Math.min(o.width,o.height)/2;if(f<=0)return null;const u={x:o.width/2,y:o.height/2},v=ee(r,h=>i(h,l),n).flatMap(h=>{const s=te(h,u,f);return s===void 0?[]:[{key:h.key,path:s,paint:h.paint}]}),p=l==="hovered";return(0,g.jsxs)("g",{"data-geom":"bar",children:[!p&&v.map(({key:h,path:s,paint:c})=>c.shadow===null?null:(0,g.jsx)("path",{d:s,transform:`translate(${c.shadow.offsetX} ${c.shadow.offsetY})`,fill:c.shadow.color,opacity:c.opacity},`${h}-shadow`)),v.map(({key:h,path:s,paint:c})=>(0,g.jsx)("path",{"data-comic-slice":"sector",d:s,fill:c.color,fillOpacity:c.fillOpacity,fillRule:"evenodd",stroke:c.outline,strokeWidth:c.outlineWidth+(p?Z:0),strokeLinejoin:"round",opacity:c.opacity},h))]})},oe=(0,e.defineGeomRenderer)("bar",{coord:"polar",guideMode:"band",swatchShape:"slice",render:({layer:t,panelRect:r})=>(0,g.jsx)(C,{layer:t,observations:t.data,panel:r}),renderHover:({layer:t,primary:r,panelRect:o})=>(0,g.jsx)(C,{layer:t,observations:[r.observation],panel:o,state:"hovered"}),renderHoverCompanions:()=>null}),re=[oe,q,J],k=10,ae=.42,P=220,le=.6,T=1,ie=()=>{const t=Math.ceil(P/k),r=[];for(let o=0;o<=t;o+=1){const l=o%2===0?0:k/2;for(let i=0;i<=23;i+=1){const n=-(i*k+l),f=o*k,u=k*ae*(1-Math.hypot(n,f)/P);u>=le&&r.push(`<circle cx="${n.toFixed(T)}" cy="${f.toFixed(T)}" r="${u.toFixed(T)}"/>`)}}return r.join("")},ne=(t,r,o)=>{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="0" width="1" height="1" overflow="visible"><g fill="${r}" fill-opacity="${o}">${ie()}</g></svg></svg>`;return`data:image/svg+xml,${encodeURIComponent(l)}`},a={paper:"#FBF3DF",bubble:"#FFFDF6",black:"#141414",secondary:"#4A4338",grid:"rgba(20, 20, 20, 0.2)"},w="'Bangers', 'Comic Neue', 'Comic Sans MS', cursive",se="'Comic Neue', 'Comic Sans MS', 'Chalkboard SE', cursive",d={vermillion:"#D9401F",cyan:"#0B85C8",yellow:"#FFD60A",magenta:"#D6247A",green:"#15964B",purple:"#7A3DC8"},de=[d.vermillion,d.cyan,d.yellow,d.magenta,d.green,d.purple],ce=["#FFE45C","#F58A1F","#C4161C"],he=[d.cyan,"#ECE5D4",d.vermillion],A={offsetX:4,offsetY:4,blur:0,color:a.black},ge={offsetX:6,offsetY:6,blur:0,color:a.black},S={offsetX:2,offsetY:2,blur:0,color:a.black},I={offsetX:4,offsetY:4,blur:0,color:a.black},fe={offsetX:6,offsetY:6,blur:0,color:a.black},ue={offsetX:2,offsetY:2,blur:0,color:d.yellow},pe={pattern:"dots",color:"rgba(20, 20, 20, 0.24)",size:7},ye={image:ne(a.paper,d.vermillion,.18),fit:"stretch",fallback:a.paper},me={fontFamily:w,fontWeight:400,fontSize:22,lineHeight:1.05,letterSpacing:1.5,textTransform:"uppercase",textColor:a.black},M={fill:d.yellow,stroke:a.black,strokeWidth:3,cornerRadius:0,paddingInline:10,paddingBlock:5,shadow:{offsetX:5,offsetY:5,blur:0,color:d.vermillion}},x={fontFamily:w,fontWeight:400,fontSize:16,lineHeight:1.05,letterSpacing:1,textTransform:"uppercase",textColor:a.black},O={...M,strokeWidth:2.5,paddingInline:7,paddingBlock:3,shadow:{offsetX:3,offsetY:3,blur:0,color:d.vermillion}},E={fontFamily:w,fontWeight:400,letterSpacing:1,textTransform:"uppercase"},y={stroke:a.black,strokeAlpha:1},L={dashArray:[],lineCap:"round",lineJoin:"round"},m={textColor:a.black,fontWeight:700},b={textColor:a.secondary,fontWeight:700},ve={tokens:{graphBackground:a.paper,graphBorder:a.black,geomBorder:a.black,textPrimary:a.black,textSecondary:a.secondary,ruleLine:a.black,gridLine:a.grid,hoverAffordance:a.black,hoverGuideFill:"rgba(20, 20, 20, 0.07)",hoverGuideLine:a.black,tooltipBackground:a.bubble,tooltipBorder:a.black,tooltipPrimaryRow:"rgba(255, 214, 10, 0.35)",annotationShape:d.yellow,annotationArrow:a.black,differenceLabelBackground:a.bubble},defaults:[e.style.graph({fill:ye,strokeWidth:4,cornerRadius:0,fontFamily:se,padding:22,shadow:fe}),e.style.geom({shadow:A,overpaint:pe}),e.style.geom({shadow:A},{state:"hovered"}),e.style.geom.bar({...y,strokeWidth:2.5,cornerRadius:0}),e.style.geom.bar({...y,strokeWidth:2.5,shadow:ge},{state:"hovered"}),e.style.geom.line({strokeWidth:3.5,...L,shadow:S,overpaint:"none"}),e.style.geom.line({shadow:S},{state:"hovered"}),e.style.geom.area({...y,fillAlpha:1,strokeWidth:2.5,...L}),e.style.geom.point({...y,size:13,strokeWidth:2,shadow:S}),e.style.geom.point({...y,strokeWidth:2,shadow:"none"},{state:"hovered"}),e.style.geom.tile({...y,cornerRadius:2,strokeWidth:1.5,shadow:"none"}),e.style.geom.tile({...y,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({...E,textColor:d.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:a.black,strokeWidth:3,dashArray:[]}),e.style.tickLine({strokeWidth:0}),e.style.tickLabel({...b,fontSize:14,lineHeight:1}),e.style.axisLabel({...m,...E,fontSize:18,lineHeight:1}),e.style.heading({...m}),e.style.heading.h1({fontFamily:w,fontWeight:400,fontSize:36,lineHeight:1,letterSpacing:1,textTransform:"uppercase",textShadow:ue}),e.style.heading.h2({...b,fontSize:16,lineHeight:1.2}),e.style.header({margin:{bottom:18}}),e.style.caption({...b,fontWeight:400,fontSize:13}),e.style.source({...b,fontWeight:400,fontSize:13}),e.style.dataLabel({...m,fontSize:14,fill:"transparent"}),e.style.legendItem({...m,...E,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:I}),e.style.tooltip.heading({...m,fontSize:15,lineHeight:1.3}),e.style.tooltip.label({...b,fontSize:14,lineHeight:1.3}),e.style.tooltip.value({...m,fontSize:14,lineHeight:1.3}),e.style.legend.popover({strokeWidth:2.5,cornerRadius:10,shadow:I}),e.style.annotation.text({...me,...M}),e.style.annotation.shape({fillAlpha:.35,stroke:a.black,strokeWidth:2}),e.style.annotation.arrow({strokeWidth:3.5,dashArray:[]}),e.style.annotation.arrow.outline({stroke:a.paper,strokeWidth:2}),e.style.annotation.pinnedNumber({stroke:a.black,shadow:S}),e.style.annotation.pinnedNumber.label({...x,...O}),e.style.annotation.comment({stroke:a.black,shadow:S}),e.style.annotation.comment.label({...x,...O}),e.style.annotation.differenceArrow({stroke:a.black,strokeWidth:2.5}),e.style.annotation.differenceArrow.label({...x,...O,fontSize:18}),e.style.panelBorder.bottom({strokeWidth:0},{coord:"polar"}),e.style.tickLabel({...m,textOutlineColor:a.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:2.5,shadow:A},{coord:"polar"}),e.style.geom.bar({strokeWidth:2.5},{coord:"polar",state:"hovered"})]},ke={name:"comic",styles:ve,palettes:{categorical:de,sequential:ce,diverging:he},colorScheme:"light",plugins:re};exports.comic=ke;
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});let H=require("react"),e=require("@graphysdk/react"),g=require("react/jsx-runtime");var B=(t,r)=>{const o=(0,e.getX)(t),l=(0,e.getY)(t)??(0,e.getYMax)(t);return o===null||l===null?null:{x:(0,e.toViewBoxX)(o)*r.width,y:(0,e.toViewBoxY)(l)*r.height}},Y=(t,r)=>{const o=(0,e.getX)(t),l=(0,e.getY)(t)??(0,e.getRadiusExtent)(t).outerRadius;if(o===null||l===null)return null;const i=(0,e.polarToUnit)(o,l),n=Math.min(r.width,r.height)/2;return{x:r.width/2+i.x*n,y:r.height/2-i.y*n}},z=22,F=Math.PI*2,Se=F/(z*2),$=(t,r,o)=>({x:t.x+Math.sin(o.angle)*o.radius*r,y:t.y-Math.cos(o.angle)*o.radius*r}),R=2,G=({x:t,y:r})=>`${t.toFixed(R)},${r.toFixed(R)}`,W=8,X=.6,j=(t,r)=>{const o=r/2,l=F/(W*2);return`M${Array.from({length:W*2},(i,n)=>$(t,o,{angle:n*l,radius:n%2===0?1:X})).map(G).join(" L")} Z`},D=t=>{const r=(0,e.useGeomStyleReader)(t);return(o,l)=>{const i=r.get("shadow",o,l);return{color:(0,e.toPaintColor)(r.get("fill",o,l)),opacity:r.get("alpha",o,l),fillOpacity:r.get("fillAlpha",o,l),outline:r.get("stroke",o,l),outlineWidth:r.get("strokeWidth",o,l),shadow:i==="none"?null:{offsetX:i.offsetX,offsetY:i.offsetY,color:i.color}}}},U=1.35,K=4,V=1,_=({layer:t,observations:r,panel:o,project:l,state:i})=>{const n=(0,e.useGeomStyleReader)(t),f=D(t),u=(0,H.useMemo)(()=>(0,e.createStableKeyGenerator)(t.data,t.mapping,t.id),[t.data,t.mapping,t.id]),m=i==="hovered";return(0,g.jsx)("g",{"data-geom":"point",children:Array.from(r,p=>{const h=l(p,o);if(h===null)return null;const s=f(p,i),c=j(h,n.get("size",p,i)*U+(m?K:0));return(0,g.jsxs)("g",{opacity:s.opacity,children:[s.shadow!==null&&(0,g.jsx)("path",{d:c,transform:`translate(${s.shadow.offsetX} ${s.shadow.offsetY})`,fill:s.shadow.color}),(0,g.jsx)("path",{d:c,fill:s.color,fillOpacity:s.fillOpacity,stroke:s.outline,strokeWidth:s.outlineWidth+(m?V:0),strokeLinejoin:"round"})]},u(p))})})},N=(t,r)=>(0,e.defineGeomRenderer)("point",{coord:t,swatchShape:"circle",render:({layer:o,panelRect:l})=>(0,g.jsx)(_,{layer:o,observations:o.data,panel:l,project:r}),renderHover:({layer:o,primary:l,panelRect:i})=>(0,g.jsx)(_,{layer:o,observations:[l.observation],panel:i,project:r,state:"hovered"}),renderHoverCompanions:()=>null}),q=N("cartesian",B),J=N("polar",Y),Z=2,Q=2,ee=(t,r,o)=>[...t].flatMap(l=>{const{startAngle:i,endAngle:n}=(0,e.getAngleExtent)(l),{innerRadius:f,outerRadius:u}=(0,e.getRadiusExtent)(l);return i===null||n===null||f===null||u===null?[]:n<=i||u<=0?[]:[{key:`${o(l)}-${i}`,paint:r(l),startAngle:i,endAngle:n,innerRadius:f,outerRadius:u}]}),te=(t,r,o)=>(0,e.buildPolarBarArcPath)(t,{centerX:r.x,centerY:r.y,radius:o,digits:Q}),C=({layer:t,observations:r,panel:o,state:l})=>{const i=D(t),n=(0,H.useMemo)(()=>(0,e.createStableKeyGenerator)(t.data,t.mapping,t.id),[t.data,t.mapping,t.id]),f=Math.min(o.width,o.height)/2;if(f<=0)return null;const u={x:o.width/2,y:o.height/2},m=ee(r,h=>i(h,l),n).flatMap(h=>{const s=te(h,u,f);return s===void 0?[]:[{key:h.key,path:s,paint:h.paint}]}),p=l==="hovered";return(0,g.jsxs)("g",{"data-geom":"bar",children:[!p&&m.map(({key:h,path:s,paint:c})=>c.shadow===null?null:(0,g.jsx)("path",{d:s,transform:`translate(${c.shadow.offsetX} ${c.shadow.offsetY})`,fill:c.shadow.color,opacity:c.opacity},`${h}-shadow`)),m.map(({key:h,path:s,paint:c})=>(0,g.jsx)("path",{"data-comic-slice":"sector",d:s,fill:c.color,fillOpacity:c.fillOpacity,fillRule:"evenodd",stroke:c.outline,strokeWidth:c.outlineWidth+(p?Z:0),strokeLinejoin:"round",opacity:c.opacity},h))]})},oe=(0,e.defineGeomRenderer)("bar",{coord:"polar",guideMode:"band",swatchShape:"slice",render:({layer:t,panelRect:r})=>(0,g.jsx)(C,{layer:t,observations:t.data,panel:r}),renderHover:({layer:t,primary:r,panelRect:o})=>(0,g.jsx)(C,{layer:t,observations:[r.observation],panel:o,state:"hovered"}),renderHoverCompanions:()=>null}),re=[oe,q,J],k=10,ae=.42,P=220,le=.6,T=1,ie=()=>{const t=Math.ceil(P/k),r=[];for(let o=0;o<=t;o+=1){const l=o%2===0?0:k/2;for(let i=0;i<=23;i+=1){const n=-(i*k+l),f=o*k,u=k*ae*(1-Math.hypot(n,f)/P);u>=le&&r.push(`<circle cx="${n.toFixed(T)}" cy="${f.toFixed(T)}" r="${u.toFixed(T)}"/>`)}}return r.join("")},ne=(t,r,o)=>{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="0" width="1" height="1" overflow="visible"><g fill="${r}" fill-opacity="${o}">${ie()}</g></svg></svg>`;return`data:image/svg+xml,${encodeURIComponent(l)}`},a={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",se="'Comic Neue', 'Comic Sans MS', 'Chalkboard SE', cursive",d={vermillion:"#D9401F",cyan:"#0B85C8",yellow:"#FFD60A",magenta:"#D6247A",green:"#15964B",purple:"#7A3DC8"},de=[d.vermillion,d.cyan,d.yellow,d.magenta,d.green,d.purple],ce=["#FFE45C","#F58A1F","#C4161C"],he=[d.cyan,"#ECE5D4",d.vermillion],A={offsetX:4,offsetY:4,blur:0,color:a.black},ge={offsetX:6,offsetY:6,blur:0,color:a.black},S={offsetX:2,offsetY:2,blur:0,color:a.black},I={offsetX:4,offsetY:4,blur:0,color:a.black},fe={offsetX:6,offsetY:6,blur:0,color:a.black},ue={offsetX:2,offsetY:2,blur:0,color:d.yellow},pe={pattern:"dots",color:"rgba(20, 20, 20, 0.24)",size:7},ye={image:ne(a.paper,d.vermillion,.18),fit:"stretch",fallback:a.paper},ve={fontFamily:w,fontWeight:400,fontSize:22,lineHeight:1.05,letterSpacing:1.5,textTransform:"uppercase",textColor:a.black},M={fill:d.yellow,stroke:a.black,strokeWidth:3,cornerRadius:0,paddingInline:10,paddingBlock:5,shadow:{offsetX:5,offsetY:5,blur:0,color:d.vermillion}},x={fontFamily:w,fontWeight:400,fontSize:16,lineHeight:1.05,letterSpacing:1,textTransform:"uppercase",textColor:a.black},O={...M,strokeWidth:2.5,paddingInline:7,paddingBlock:3,shadow:{offsetX:3,offsetY:3,blur:0,color:d.vermillion}},E={fontFamily:w,fontWeight:400,letterSpacing:1,textTransform:"uppercase"},y={stroke:a.black,strokeAlpha:1},L={dashArray:[],lineCap:"round",lineJoin:"round"},v={textColor:a.black,fontWeight:700},b={textColor:a.secondary,fontWeight:700},me={tokens:{graphBackground:a.paper,graphBorder:a.black,geomBorder:a.black,textPrimary:a.black,textSecondary:a.secondary,ruleLine:a.black,gridLine:a.grid,hoverAffordance:a.black,hoverGuideFill:"rgba(20, 20, 20, 0.07)",hoverGuideLine:a.black,tooltipBackground:a.bubble,tooltipBorder:a.black,tooltipPrimaryRow:"rgba(255, 214, 10, 0.35)",annotationShape:d.yellow,annotationArrow:a.black,differenceLabelBackground:a.bubble,trendPositive:d.green,trendNegative:a.deepRed,trendNeutral:a.secondary},defaults:[e.style.graph({fill:ye,strokeWidth:4,cornerRadius:0,fontFamily:se,padding:22,shadow:fe}),e.style.geom({shadow:A,overpaint:pe}),e.style.geom({shadow:A},{state:"hovered"}),e.style.geom.bar({...y,strokeWidth:2.5,cornerRadius:0}),e.style.geom.bar({...y,strokeWidth:2.5,shadow:ge},{state:"hovered"}),e.style.geom.line({strokeWidth:3.5,...L,shadow:S,overpaint:"none"}),e.style.geom.line({shadow:S},{state:"hovered"}),e.style.geom.area({...y,fillAlpha:1,strokeWidth:2.5,...L}),e.style.geom.point({...y,size:13,strokeWidth:2,shadow:S}),e.style.geom.point({...y,strokeWidth:2,shadow:"none"},{state:"hovered"}),e.style.geom.tile({...y,cornerRadius:2,strokeWidth:1.5,shadow:"none"}),e.style.geom.tile({...y,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({...E,textColor:d.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:a.black,strokeWidth:3,dashArray:[]}),e.style.tickLine({strokeWidth:0}),e.style.tickLabel({...b,fontSize:14,lineHeight:1}),e.style.axisLabel({...v,...E,fontSize:18,lineHeight:1}),e.style.heading({...v}),e.style.heading.h1({fontFamily:w,fontWeight:400,fontSize:36,lineHeight:1,letterSpacing:1,textTransform:"uppercase",textShadow:ue}),e.style.heading.h2({...b,fontSize:16,lineHeight:1.2}),e.style.header({margin:{bottom:18}}),e.style.caption({...b,fontWeight:400,fontSize:13}),e.style.source({...b,fontWeight:400,fontSize:13}),e.style.dataLabel({...v,fontSize:14,fill:"transparent"}),e.style.legendItem({...v,...E,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:I}),e.style.tooltip.heading({...v,fontSize:15,lineHeight:1.3}),e.style.tooltip.label({...b,fontSize:14,lineHeight:1.3}),e.style.tooltip.value({...v,fontSize:14,lineHeight:1.3}),e.style.legend.popover({strokeWidth:2.5,cornerRadius:10,shadow:I}),e.style.annotation.text({...ve,...M}),e.style.annotation.shape({fillAlpha:.35,stroke:a.black,strokeWidth:2}),e.style.annotation.arrow({strokeWidth:3.5,dashArray:[]}),e.style.annotation.arrow.outline({stroke:a.paper,strokeWidth:2}),e.style.annotation.pinnedNumber({stroke:a.black,shadow:S}),e.style.annotation.pinnedNumber.label({...x,...O}),e.style.annotation.comment({stroke:a.black,shadow:S}),e.style.annotation.comment.label({...x,...O}),e.style.annotation.differenceArrow({stroke:a.black,strokeWidth:2.5}),e.style.annotation.differenceArrow.label({...x,...O,fontSize:18}),e.style.panelBorder.bottom({strokeWidth:0},{coord:"polar"}),e.style.tickLabel({...v,textOutlineColor:a.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:2.5,shadow:A},{coord:"polar"}),e.style.geom.bar({strokeWidth:2.5},{coord:"polar",state:"hovered"})]},ke={name:"comic",styles:me,palettes:{categorical:de,sequential:ce,diverging:he},colorScheme:"light",plugins:re};exports.comic=ke;

package/dist/index.mjs

@@ -41,7 +41,7 @@ var ee = (o, r) => {
       }
     };
   };
-}, le = 1.35, se = 4, de = 1, _ = ({ layer: o, observations: r, panel: t, project: i, state: n }) => {
+}, le = 1.35, de = 4, se = 1, _ = ({ layer: o, observations: r, panel: t, project: i, state: n }) => {
   const l = z(o), f = X(o), g = H(() => F(o.data, o.mapping, o.id), [
     o.data,
     o.mapping,
@@ -52,19 +52,19 @@ var ee = (o, r) => {
     children: Array.from(r, (u) => {
       const h = i(u, t);
       if (h === null) return null;
-      const s = f(u, n), c = ne(h, l.get("size", u, n) * le + (k ? se : 0));
+      const d = f(u, n), c = ne(h, l.get("size", u, n) * le + (k ? de : 0));
       return /* @__PURE__ */ Y("g", {
-        opacity: s.opacity,
-        children: [s.shadow !== null && /* @__PURE__ */ p("path", {
+        opacity: d.opacity,
+        children: [d.shadow !== null && /* @__PURE__ */ p("path", {
           d: c,
-          transform: `translate(${s.shadow.offsetX} ${s.shadow.offsetY})`,
-          fill: s.shadow.color
+          transform: `translate(${d.shadow.offsetX} ${d.shadow.offsetY})`,
+          fill: d.shadow.color
         }), /* @__PURE__ */ p("path", {
           d: c,
-          fill: s.color,
-          fillOpacity: s.fillOpacity,
-          stroke: s.outline,
-          strokeWidth: s.outlineWidth + (k ? de : 0),
+          fill: d.color,
+          fillOpacity: d.fillOpacity,
+          stroke: d.outline,
+          strokeWidth: d.outlineWidth + (k ? se : 0),
           strokeLinejoin: "round"
         })]
       }, g(u));
@@ -113,23 +113,23 @@ var ee = (o, r) => {
     x: t.width / 2,
     y: t.height / 2
   }, k = pe(r, (h) => n(h, i), l).flatMap((h) => {
-    const s = ue(h, g, f);
-    return s === void 0 ? [] : [{
+    const d = ue(h, g, f);
+    return d === void 0 ? [] : [{
       key: h.key,
-      path: s,
+      path: d,
       paint: h.paint
     }];
   }), u = i === "hovered";
   return /* @__PURE__ */ Y("g", {
     "data-geom": "bar",
-    children: [!u && k.map(({ key: h, path: s, paint: c }) => c.shadow === null ? null : /* @__PURE__ */ p("path", {
-      d: s,
+    children: [!u && k.map(({ key: h, path: d, paint: c }) => c.shadow === null ? null : /* @__PURE__ */ p("path", {
+      d,
       transform: `translate(${c.shadow.offsetX} ${c.shadow.offsetY})`,
       fill: c.shadow.color,
       opacity: c.opacity
-    }, `${h}-shadow`)), k.map(({ key: h, path: s, paint: c }) => /* @__PURE__ */ p("path", {
+    }, `${h}-shadow`)), k.map(({ key: h, path: d, paint: c }) => /* @__PURE__ */ p("path", {
       "data-comic-slice": "sector",
-      d: s,
+      d,
       fill: c.color,
       fillOpacity: c.fillOpacity,
       fillRule: "evenodd",
@@ -159,12 +159,12 @@ var ee = (o, r) => {
   me,
   ce,
   he
-], b = 10, ke = 0.42, I = 220, be = 0.6, A = 1, Se = () => {
-  const o = Math.ceil(I / b), r = [];
+], b = 10, ke = 0.42, P = 220, be = 0.6, A = 1, Se = () => {
+  const o = Math.ceil(P / b), r = [];
   for (let t = 0; t <= o; t += 1) {
     const i = t % 2 === 0 ? 0 : b / 2;
     for (let n = 0; n <= 23; n += 1) {
-      const l = -(n * b + i), f = t * b, g = b * ke * (1 - Math.hypot(l, f) / I);
+      const l = -(n * b + i), f = t * b, g = b * ke * (1 - Math.hypot(l, f) / P);
       g >= be && r.push(`<circle cx="${l.toFixed(A)}" cy="${f.toFixed(A)}" r="${g.toFixed(A)}"/>`);
     }
   }
@@ -177,8 +177,9 @@ var ee = (o, r) => {
   bubble: "#FFFDF6",
   black: "#141414",
   secondary: "#4A4338",
-  grid: "rgba(20, 20, 20, 0.2)"
-}, T = "'Bangers', 'Comic Neue', 'Comic Sans MS', cursive", Te = "'Comic Neue', 'Comic Sans MS', 'Chalkboard SE', cursive", d = {
+  grid: "rgba(20, 20, 20, 0.2)",
+  deepRed: "#C4161C"
+}, T = "'Bangers', 'Comic Neue', 'Comic Sans MS', cursive", Te = "'Comic Neue', 'Comic Sans MS', 'Chalkboard SE', cursive", s = {
   vermillion: "#D9401F",
   cyan: "#0B85C8",
   yellow: "#FFD60A",
@@ -186,26 +187,26 @@ var ee = (o, r) => {
   green: "#15964B",
   purple: "#7A3DC8"
 }, Ae = [
-  d.vermillion,
-  d.cyan,
-  d.yellow,
-  d.magenta,
-  d.green,
-  d.purple
+  s.vermillion,
+  s.cyan,
+  s.yellow,
+  s.magenta,
+  s.green,
+  s.purple
 ], Oe = [
   "#FFE45C",
   "#F58A1F",
   "#C4161C"
-], Ee = [
-  d.cyan,
+], ye = [
+  s.cyan,
   "#ECE5D4",
-  d.vermillion
+  s.vermillion
 ], O = {
   offsetX: 4,
   offsetY: 4,
   blur: 0,
   color: a.black
-}, We = {
+}, Ee = {
   offsetX: 6,
   offsetY: 6,
   blur: 0,
@@ -215,12 +216,12 @@ var ee = (o, r) => {
   offsetY: 2,
   blur: 0,
   color: a.black
-}, L = {
+}, I = {
   offsetX: 4,
   offsetY: 4,
   blur: 0,
   color: a.black
-}, ye = {
+}, We = {
   offsetX: 6,
   offsetY: 6,
   blur: 0,
@@ -229,13 +230,13 @@ var ee = (o, r) => {
   offsetX: 2,
   offsetY: 2,
   blur: 0,
-  color: d.yellow
+  color: s.yellow
 }, Re = {
   pattern: "dots",
   color: "rgba(20, 20, 20, 0.24)",
   size: 7
 }, _e = {
-  image: we(a.paper, d.vermillion, 0.18),
+  image: we(a.paper, s.vermillion, 0.18),
   fit: "stretch",
   fallback: a.paper
 }, xe = {
@@ -247,7 +248,7 @@ var ee = (o, r) => {
   textTransform: "uppercase",
   textColor: a.black
 }, U = {
-  fill: d.yellow,
+  fill: s.yellow,
   stroke: a.black,
   strokeWidth: 3,
   cornerRadius: 0,
@@ -257,9 +258,9 @@ var ee = (o, r) => {
     offsetX: 5,
     offsetY: 5,
     blur: 0,
-    color: d.vermillion
+    color: s.vermillion
   }
-}, E = {
+}, y = {
   fontFamily: T,
   fontWeight: 400,
   fontSize: 16,
@@ -267,7 +268,7 @@ var ee = (o, r) => {
   letterSpacing: 1,
   textTransform: "uppercase",
   textColor: a.black
-}, W = {
+}, E = {
   ...U,
   strokeWidth: 2.5,
   paddingInline: 7,
@@ -276,9 +277,9 @@ var ee = (o, r) => {
     offsetX: 3,
     offsetY: 3,
     blur: 0,
-    color: d.vermillion
+    color: s.vermillion
   }
-}, y = {
+}, W = {
   fontFamily: T,
   fontWeight: 400,
   letterSpacing: 1,
@@ -286,7 +287,7 @@ var ee = (o, r) => {
 }, m = {
   stroke: a.black,
   strokeAlpha: 1
-}, P = {
+}, L = {
   dashArray: [],
   lineCap: "round",
   lineJoin: "round"
@@ -296,7 +297,7 @@ var ee = (o, r) => {
 }, w = {
   textColor: a.secondary,
   fontWeight: 700
-}, Ie = {
+}, Pe = {
   tokens: {
     graphBackground: a.paper,
     graphBorder: a.black,
@@ -311,9 +312,12 @@ var ee = (o, r) => {
     tooltipBackground: a.bubble,
     tooltipBorder: a.black,
     tooltipPrimaryRow: "rgba(255, 214, 10, 0.35)",
-    annotationShape: d.yellow,
+    annotationShape: s.yellow,
     annotationArrow: a.black,
-    differenceLabelBackground: a.bubble
+    differenceLabelBackground: a.bubble,
+    trendPositive: s.green,
+    trendNegative: a.deepRed,
+    trendNeutral: a.secondary
   },
   defaults: [
     e.graph({
@@ -322,7 +326,7 @@ var ee = (o, r) => {
       cornerRadius: 0,
       fontFamily: Te,
       padding: 22,
-      shadow: ye
+      shadow: We
     }),
     e.geom({
       shadow: O,
@@ -337,11 +341,11 @@ var ee = (o, r) => {
     e.geom.bar({
       ...m,
       strokeWidth: 2.5,
-      shadow: We
+      shadow: Ee
     }, { state: "hovered" }),
     e.geom.line({
       strokeWidth: 3.5,
-      ...P,
+      ...L,
       shadow: S,
       overpaint: "none"
     }),
@@ -350,7 +354,7 @@ var ee = (o, r) => {
       ...m,
       fillAlpha: 1,
       strokeWidth: 2.5,
-      ...P
+      ...L
     }),
     e.geom.point({
       ...m,
@@ -381,8 +385,8 @@ var ee = (o, r) => {
       shadow: "none"
     }),
     e.geom.rule.label({
-      ...y,
-      textColor: d.yellow,
+      ...W,
+      textColor: s.yellow,
       fontSize: 15
     }),
     e.gridLine({ dashArray: [1, 5] }),
@@ -402,7 +406,7 @@ var ee = (o, r) => {
     }),
     e.axisLabel({
       ...v,
-      ...y,
+      ...W,
       fontSize: 18,
       lineHeight: 1
     }),
@@ -439,7 +443,7 @@ var ee = (o, r) => {
     }),
     e.legendItem({
       ...v,
-      ...y,
+      ...W,
       fontSize: 18,
       fill: "transparent",
       stroke: "transparent"
@@ -454,7 +458,7 @@ var ee = (o, r) => {
       cornerRadius: 10,
       paddingInline: 12,
       paddingBlock: 9,
-      shadow: L
+      shadow: I
     }),
     e.tooltip.heading({
       ...v,
@@ -474,7 +478,7 @@ var ee = (o, r) => {
     e.legend.popover({
       strokeWidth: 2.5,
       cornerRadius: 10,
-      shadow: L
+      shadow: I
     }),
     e.annotation.text({
       ...xe,
@@ -498,24 +502,24 @@ var ee = (o, r) => {
       shadow: S
     }),
     e.annotation.pinnedNumber.label({
-      ...E,
-      ...W
+      ...y,
+      ...E
     }),
     e.annotation.comment({
       stroke: a.black,
       shadow: S
     }),
     e.annotation.comment.label({
-      ...E,
-      ...W
+      ...y,
+      ...E
     }),
     e.annotation.differenceArrow({
       stroke: a.black,
       strokeWidth: 2.5
     }),
     e.annotation.differenceArrow.label({
+      ...y,
       ...E,
-      ...W,
       fontSize: 18
     }),
     e.panelBorder.bottom({ strokeWidth: 0 }, { coord: "polar" }),
@@ -543,11 +547,11 @@ var ee = (o, r) => {
   ]
 }, De = {
   name: "comic",
-  styles: Ie,
+  styles: Pe,
   palettes: {
     categorical: Ae,
     sequential: Oe,
-    diverging: Ee
+    diverging: ye
   },
   colorScheme: "light",
   plugins: ve

package/dist/styles.d.ts

@@ -5,6 +5,7 @@ export declare const COMIC_COLORS: {
     readonly black: "#141414";
     readonly secondary: "#4A4338";
     readonly grid: "rgba(20, 20, 20, 0.2)";
+    readonly deepRed: "#C4161C";
 };
 /**
  * The colours a four-colour press gives on newsprint: the red is a vermillion of magenta over yellow,

package/package.json

@@ -13,7 +13,7 @@
     "theme",
     "comic"
   ],
-  "version": "0.1.1-beta.1792404455940",
+  "version": "0.1.1-beta.1792409717036",
   "type": "module",
   "sideEffects": [
     "*.css"
@@ -40,7 +40,7 @@
   },
   "peerDependencies": {
     "react": "^19.0.0",
-    "@graphysdk/react": "^1.9.0-beta.1792404455940"
+    "@graphysdk/react": "^1.9.0-beta.1792409717036"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.1",
@@ -52,11 +52,11 @@
     "vite": "^8.1.5",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^4.1.11",
-    "@graphysdk/react": "1.9.0-beta.1792404455940",
+    "@graphysdk/react": "1.9.0-beta.1792409717036",
+    "@graphysdk/viz-engine": "1.9.0-beta.1792409717036",
+    "@graphytools/eslint-config": "0.0.1",
     "@graphytools/typescript-config": "0.0.1",
-    "@graphysdk/viz-engine": "1.9.0-beta.1792404455940",
-    "@graphytools/vitest-config": "1.0.0",
-    "@graphytools/eslint-config": "0.0.1"
+    "@graphytools/vitest-config": "1.0.0"
   },
   "publishConfig": {
     "access": "public"