@graphysdk/theme-comic 0.1.1-beta.1793788324987 → 0.1.1-beta.1793799752548
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.
- package/dist/index.cjs +1 -1
- package/dist/index.mjs +82 -85
- package/package.json +6 -6
package/dist/index.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
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
|
-
`,
|
|
4
|
+
`,H=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,project:a,state:l,intro:n,animateTransitions:i=!1})=>{const c=(0,e.useGeomPanelSize)(),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(n,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=a(b,c);if(x===null)return null;const A=g(b),d=m(b,l),W=U(x,H(f.get("size",b,l))),_=y!==null&&y.keys.has(A);return(0,h.jsxs)("g",{opacity:d.opacity,strokeLinejoin:"round",className:_?"comic-pop":void 0,style:_?Z(x,y.plan,A):void 0,children:[d.shadow!==null&&(0,h.jsx)("g",{transform:`translate(${d.shadow.offsetX} ${d.shadow.offsetY})`,children:(0,h.jsx)(e.DefaultGeomPath,{d:W,source:t,fill:d.shadow.color,animateTransitions:i})}),(0,h.jsx)(e.DefaultGeomPath,{d:W,source:t,fill:d.color,fillOpacity:d.fillOpacity,stroke:d.outline,strokeWidth:d.outlineWidth,animateTransitions:i})]},A)})]})},B=(t,r)=>(0,e.defineGeomRenderer)("point",{coord:t,swatchShape:"circle",render:({layer:a,intro:l,animateTransitions:n})=>(0,h.jsx)(F,{layer:a,observations:a.data,project:r,intro:l,animateTransitions:n}),renderHover:({layer:a,primary:l})=>(0,h.jsx)(F,{layer:a,observations:[l.observation],project:r,state:"hovered"}),getEditOutlineShapes:({layer:a,panelRect:l,styleReaders:n})=>(0,e.buildDotsEditOutlineShapes)([...a.data].flatMap(i=>{const c=r(i,l),f=n.get("size",i);if(c===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=H(f)+(n.get("strokeWidth",i)??0);return[{center:{x:c.x+g.x/2,y:c.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),c=-a*k,f=k*oe*(1-Math.hypot(i,c)/I);f>=re&&r.push(`<circle cx="${i.toFixed(T)}" cy="${c.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}},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"},p={stroke:o.black,strokeAlpha:1},z={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,...z,shadow:v,overpaint:"none"}),e.style.geom.line({shadow:v},{state:"hovered"}),e.style.geom.area({...p,fillAlpha:1,strokeWidth:2.5,...z}),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({...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.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,13 +1,13 @@
|
|
|
1
1
|
import { useMemo as U, useState as K } from "react";
|
|
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
|
|
4
|
-
var
|
|
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, useGeomPanelSize as re, useGeomStyleReader as Y } from "@graphysdk/react";
|
|
3
|
+
import { jsx as m, jsxs as P } from "react/jsx-runtime";
|
|
4
|
+
var ae = (o, r) => {
|
|
5
5
|
const a = B(o), n = M(o) ?? Z(o);
|
|
6
6
|
return a === null || n === null ? null : {
|
|
7
7
|
x: oe(a) * r.width,
|
|
8
8
|
y: te(n) * r.height
|
|
9
9
|
};
|
|
10
|
-
},
|
|
10
|
+
}, ne = (o, r) => {
|
|
11
11
|
const a = B(o), n = M(o) ?? J(o).outerRadius;
|
|
12
12
|
if (a === null || n === null) return null;
|
|
13
13
|
const i = Q(a, n), l = Math.min(r.width, r.height) / 2;
|
|
@@ -15,16 +15,16 @@ var re = (o, r) => {
|
|
|
15
15
|
x: r.width / 2 + i.x * l,
|
|
16
16
|
y: r.height / 2 - i.y * l
|
|
17
17
|
};
|
|
18
|
-
},
|
|
19
|
-
const a =
|
|
20
|
-
return `M${Array.from({ length:
|
|
21
|
-
const l = (i % 2 === 0 ? 1 :
|
|
18
|
+
}, F = 8, ie = 0.6, le = Math.PI * 2, I = 2, se = ({ x: o, y: r }) => `${o.toFixed(I)},${r.toFixed(I)}`, de = (o, r) => {
|
|
19
|
+
const a = le / (F * 2);
|
|
20
|
+
return `M${Array.from({ length: F * 2 }, (n, i) => {
|
|
21
|
+
const l = (i % 2 === 0 ? 1 : ie) * (r / 2);
|
|
22
22
|
return {
|
|
23
23
|
x: o.x + Math.sin(i * a) * l,
|
|
24
24
|
y: o.y - Math.cos(i * a) * l
|
|
25
25
|
};
|
|
26
|
-
}).map(
|
|
27
|
-
},
|
|
26
|
+
}).map(se).join(" L")} Z`;
|
|
27
|
+
}, ce = (o) => {
|
|
28
28
|
const r = Y(o);
|
|
29
29
|
return (a, n) => {
|
|
30
30
|
const i = r.get("shadow", a, n);
|
|
@@ -41,52 +41,52 @@ var re = (o, r) => {
|
|
|
41
41
|
}
|
|
42
42
|
};
|
|
43
43
|
};
|
|
44
|
-
},
|
|
44
|
+
}, he = 1.35, fe = `
|
|
45
45
|
@keyframes comic-pop { from { transform: scale(0); } to { transform: none; } }
|
|
46
46
|
.comic-pop { animation: comic-pop var(--comic-pop-duration) cubic-bezier(0.34, 1.56, 0.64, 1) var(--comic-pop-delay) both; }
|
|
47
|
-
`, X = (o) => o *
|
|
47
|
+
`, X = (o) => o * he, pe = (o, r, a) => {
|
|
48
48
|
const [n] = K(() => o?.type === "grow" && o.growAxis === "size" ? {
|
|
49
49
|
plan: o,
|
|
50
50
|
keys: new Set(Array.from(r, a))
|
|
51
51
|
} : null);
|
|
52
52
|
return n;
|
|
53
|
-
},
|
|
53
|
+
}, ge = (o, r, a) => ({
|
|
54
54
|
transformOrigin: `${o.x}px ${o.y}px`,
|
|
55
55
|
"--comic-pop-duration": `${r.durationSeconds}s`,
|
|
56
56
|
"--comic-pop-delay": `${r.delayByKey[a] ?? 0}s`
|
|
57
|
-
}), R = ({ layer: o, observations: r,
|
|
58
|
-
const h = Y(o), k =
|
|
57
|
+
}), R = ({ layer: o, observations: r, project: a, state: n, intro: i, animateTransitions: l = !1 }) => {
|
|
58
|
+
const c = re(), h = Y(o), k = ce(o), f = U(() => V(o.data, o.mapping, o.id), [
|
|
59
59
|
o.data,
|
|
60
60
|
o.mapping,
|
|
61
61
|
o.id
|
|
62
|
-
]), u =
|
|
63
|
-
return /* @__PURE__ */
|
|
62
|
+
]), u = pe(i, r, f);
|
|
63
|
+
return /* @__PURE__ */ P("g", {
|
|
64
64
|
"data-geom": "point",
|
|
65
|
-
children: [u !== null && /* @__PURE__ */ m("style", { children:
|
|
66
|
-
const A =
|
|
65
|
+
children: [u !== null && /* @__PURE__ */ m("style", { children: fe }), Array.from(r, (b) => {
|
|
66
|
+
const A = a(b, c);
|
|
67
67
|
if (A === null) return null;
|
|
68
|
-
const x = f(b),
|
|
69
|
-
return /* @__PURE__ */
|
|
70
|
-
opacity:
|
|
68
|
+
const x = f(b), d = k(b, n), W = de(A, X(h.get("size", b, n))), _ = u !== null && u.keys.has(x);
|
|
69
|
+
return /* @__PURE__ */ P("g", {
|
|
70
|
+
opacity: d.opacity,
|
|
71
71
|
strokeLinejoin: "round",
|
|
72
72
|
className: _ ? "comic-pop" : void 0,
|
|
73
|
-
style: _ ?
|
|
74
|
-
children: [
|
|
75
|
-
transform: `translate(${
|
|
73
|
+
style: _ ? ge(A, u.plan, x) : void 0,
|
|
74
|
+
children: [d.shadow !== null && /* @__PURE__ */ m("g", {
|
|
75
|
+
transform: `translate(${d.shadow.offsetX} ${d.shadow.offsetY})`,
|
|
76
76
|
children: /* @__PURE__ */ m(L, {
|
|
77
77
|
d: W,
|
|
78
78
|
source: o,
|
|
79
|
-
fill:
|
|
80
|
-
animateTransitions:
|
|
79
|
+
fill: d.shadow.color,
|
|
80
|
+
animateTransitions: l
|
|
81
81
|
})
|
|
82
82
|
}), /* @__PURE__ */ m(L, {
|
|
83
83
|
d: W,
|
|
84
84
|
source: o,
|
|
85
|
-
fill:
|
|
86
|
-
fillOpacity:
|
|
87
|
-
stroke:
|
|
88
|
-
strokeWidth:
|
|
89
|
-
animateTransitions:
|
|
85
|
+
fill: d.color,
|
|
86
|
+
fillOpacity: d.fillOpacity,
|
|
87
|
+
stroke: d.outline,
|
|
88
|
+
strokeWidth: d.outlineWidth,
|
|
89
|
+
animateTransitions: l
|
|
90
90
|
})]
|
|
91
91
|
}, x);
|
|
92
92
|
})]
|
|
@@ -94,25 +94,22 @@ var re = (o, r) => {
|
|
|
94
94
|
}, $ = (o, r) => q("point", {
|
|
95
95
|
coord: o,
|
|
96
96
|
swatchShape: "circle",
|
|
97
|
-
render: ({ layer: a,
|
|
97
|
+
render: ({ layer: a, intro: n, animateTransitions: i }) => /* @__PURE__ */ m(R, {
|
|
98
98
|
layer: a,
|
|
99
99
|
observations: a.data,
|
|
100
|
-
panel: n,
|
|
101
100
|
project: r,
|
|
102
|
-
intro:
|
|
103
|
-
animateTransitions:
|
|
101
|
+
intro: n,
|
|
102
|
+
animateTransitions: i
|
|
104
103
|
}),
|
|
105
|
-
renderHover: ({ layer: a, primary: n
|
|
104
|
+
renderHover: ({ layer: a, primary: n }) => /* @__PURE__ */ m(R, {
|
|
106
105
|
layer: a,
|
|
107
106
|
observations: [n.observation],
|
|
108
|
-
panel: i,
|
|
109
107
|
project: r,
|
|
110
108
|
state: "hovered"
|
|
111
109
|
}),
|
|
112
|
-
renderHoverCompanions: () => null,
|
|
113
110
|
getEditOutlineShapes: ({ layer: a, panelRect: n, styleReaders: i }) => j([...a.data].flatMap((l) => {
|
|
114
|
-
const
|
|
115
|
-
if (
|
|
111
|
+
const c = r(l, n), h = i.get("size", l);
|
|
112
|
+
if (c === null || h === void 0) return [];
|
|
116
113
|
const k = i.get("shadow", l), f = k === "none" ? {
|
|
117
114
|
x: 0,
|
|
118
115
|
y: 0
|
|
@@ -122,24 +119,24 @@ var re = (o, r) => {
|
|
|
122
119
|
}, u = X(h) + (i.get("strokeWidth", l) ?? 0);
|
|
123
120
|
return [{
|
|
124
121
|
center: {
|
|
125
|
-
x:
|
|
126
|
-
y:
|
|
122
|
+
x: c.x + f.x / 2,
|
|
123
|
+
y: c.y + f.y / 2
|
|
127
124
|
},
|
|
128
125
|
size: u + Math.hypot(f.x, f.y)
|
|
129
126
|
}];
|
|
130
127
|
}))
|
|
131
|
-
}),
|
|
128
|
+
}), ue = $("cartesian", ae), me = $("polar", ne), ke = [ue, me], v = 10, ve = 0.42, D = 220, Se = 0.6, T = 1, ye = () => {
|
|
132
129
|
const o = Math.ceil(D / v), r = [];
|
|
133
130
|
for (let a = 0; a <= o; a += 1) {
|
|
134
131
|
const n = a % 2 === 0 ? 0 : v / 2;
|
|
135
132
|
for (let i = 0; i <= 23; i += 1) {
|
|
136
|
-
const l = -(i * v + n),
|
|
137
|
-
h >=
|
|
133
|
+
const l = -(i * v + n), c = -a * v, h = v * ve * (1 - Math.hypot(l, c) / D);
|
|
134
|
+
h >= Se && r.push(`<circle cx="${l.toFixed(T)}" cy="${c.toFixed(T)}" r="${h.toFixed(T)}"/>`);
|
|
138
135
|
}
|
|
139
136
|
}
|
|
140
137
|
return r.join("");
|
|
141
|
-
},
|
|
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}">${
|
|
138
|
+
}, be = (o, r, a) => {
|
|
139
|
+
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}">${ye()}</g></svg></svg>`;
|
|
143
140
|
return `data:image/svg+xml,${encodeURIComponent(n)}`;
|
|
144
141
|
}, t = {
|
|
145
142
|
paper: "#FBF3DF",
|
|
@@ -148,34 +145,34 @@ var re = (o, r) => {
|
|
|
148
145
|
secondary: "#4A4338",
|
|
149
146
|
grid: "rgba(20, 20, 20, 0.2)",
|
|
150
147
|
deepRed: "#C4161C"
|
|
151
|
-
}, w = "'Bangers', 'Comic Neue', 'Comic Sans MS', cursive",
|
|
148
|
+
}, w = "'Bangers', 'Comic Neue', 'Comic Sans MS', cursive", we = "'Comic Neue', 'Comic Sans MS', 'Chalkboard SE', cursive", s = {
|
|
152
149
|
vermillion: "#D9401F",
|
|
153
150
|
cyan: "#0B85C8",
|
|
154
151
|
yellow: "#FFD60A",
|
|
155
152
|
magenta: "#D6247A",
|
|
156
153
|
green: "#15964B",
|
|
157
154
|
purple: "#7A3DC8"
|
|
158
|
-
},
|
|
155
|
+
}, Ae = [
|
|
159
156
|
s.vermillion,
|
|
160
157
|
s.cyan,
|
|
161
158
|
s.yellow,
|
|
162
159
|
s.magenta,
|
|
163
160
|
s.green,
|
|
164
161
|
s.purple
|
|
165
|
-
],
|
|
162
|
+
], xe = [
|
|
166
163
|
"#FFE45C",
|
|
167
164
|
"#F58A1F",
|
|
168
165
|
"#C4161C"
|
|
169
|
-
],
|
|
166
|
+
], Te = [
|
|
170
167
|
s.cyan,
|
|
171
168
|
"#ECE5D4",
|
|
172
169
|
s.vermillion
|
|
173
|
-
],
|
|
170
|
+
], z = {
|
|
174
171
|
offsetX: 4,
|
|
175
172
|
offsetY: 4,
|
|
176
173
|
blur: 0,
|
|
177
174
|
color: t.black
|
|
178
|
-
},
|
|
175
|
+
}, Ee = {
|
|
179
176
|
offsetX: 6,
|
|
180
177
|
offsetY: 6,
|
|
181
178
|
blur: 0,
|
|
@@ -195,20 +192,20 @@ var re = (o, r) => {
|
|
|
195
192
|
offsetY: 6,
|
|
196
193
|
blur: 0,
|
|
197
194
|
color: t.black
|
|
198
|
-
},
|
|
195
|
+
}, Oe = {
|
|
199
196
|
offsetX: 2,
|
|
200
197
|
offsetY: 2,
|
|
201
198
|
blur: 0,
|
|
202
199
|
color: s.yellow
|
|
203
|
-
},
|
|
200
|
+
}, We = {
|
|
204
201
|
pattern: "dots",
|
|
205
202
|
color: "rgba(20, 20, 20, 0.24)",
|
|
206
203
|
size: 7
|
|
207
|
-
},
|
|
208
|
-
image:
|
|
204
|
+
}, _e = {
|
|
205
|
+
image: be(t.paper, s.vermillion, 0.18),
|
|
209
206
|
fit: "stretch",
|
|
210
207
|
fallback: t.paper
|
|
211
|
-
},
|
|
208
|
+
}, Le = {
|
|
212
209
|
fontFamily: w,
|
|
213
210
|
fontWeight: 400,
|
|
214
211
|
fontSize: 16,
|
|
@@ -229,7 +226,7 @@ var re = (o, r) => {
|
|
|
229
226
|
blur: 0,
|
|
230
227
|
color: s.vermillion
|
|
231
228
|
}
|
|
232
|
-
},
|
|
229
|
+
}, E = {
|
|
233
230
|
fontFamily: w,
|
|
234
231
|
fontWeight: 400,
|
|
235
232
|
fontSize: 16,
|
|
@@ -237,7 +234,7 @@ var re = (o, r) => {
|
|
|
237
234
|
letterSpacing: 1,
|
|
238
235
|
textTransform: "uppercase",
|
|
239
236
|
textColor: t.black
|
|
240
|
-
},
|
|
237
|
+
}, C = {
|
|
241
238
|
...G,
|
|
242
239
|
strokeWidth: 2.5,
|
|
243
240
|
paddingInline: 7,
|
|
@@ -256,7 +253,7 @@ var re = (o, r) => {
|
|
|
256
253
|
}, p = {
|
|
257
254
|
stroke: t.black,
|
|
258
255
|
strokeAlpha: 1
|
|
259
|
-
},
|
|
256
|
+
}, H = {
|
|
260
257
|
dashArray: [],
|
|
261
258
|
lineCap: "round",
|
|
262
259
|
lineJoin: "round"
|
|
@@ -266,7 +263,7 @@ var re = (o, r) => {
|
|
|
266
263
|
}, y = {
|
|
267
264
|
textColor: t.secondary,
|
|
268
265
|
fontWeight: 700
|
|
269
|
-
},
|
|
266
|
+
}, Pe = {
|
|
270
267
|
tokens: {
|
|
271
268
|
graphBackground: t.paper,
|
|
272
269
|
graphBorder: t.black,
|
|
@@ -291,18 +288,18 @@ var re = (o, r) => {
|
|
|
291
288
|
},
|
|
292
289
|
defaults: [
|
|
293
290
|
e.graph({
|
|
294
|
-
fill:
|
|
291
|
+
fill: _e,
|
|
295
292
|
strokeWidth: 4,
|
|
296
293
|
cornerRadius: 0,
|
|
297
|
-
fontFamily:
|
|
294
|
+
fontFamily: we,
|
|
298
295
|
padding: 22,
|
|
299
296
|
shadow: Ce
|
|
300
297
|
}),
|
|
301
298
|
e.geom({
|
|
302
|
-
shadow:
|
|
303
|
-
overpaint:
|
|
299
|
+
shadow: z,
|
|
300
|
+
overpaint: We
|
|
304
301
|
}),
|
|
305
|
-
e.geom({ shadow:
|
|
302
|
+
e.geom({ shadow: z }, { state: "hovered" }),
|
|
306
303
|
e.geom.bar({
|
|
307
304
|
...p,
|
|
308
305
|
strokeWidth: 2.5,
|
|
@@ -311,11 +308,11 @@ var re = (o, r) => {
|
|
|
311
308
|
e.geom.bar({
|
|
312
309
|
...p,
|
|
313
310
|
strokeWidth: 2.5,
|
|
314
|
-
shadow:
|
|
311
|
+
shadow: Ee
|
|
315
312
|
}, { state: "hovered" }),
|
|
316
313
|
e.geom.line({
|
|
317
314
|
strokeWidth: 4,
|
|
318
|
-
...
|
|
315
|
+
...H,
|
|
319
316
|
shadow: S,
|
|
320
317
|
overpaint: "none"
|
|
321
318
|
}),
|
|
@@ -324,7 +321,7 @@ var re = (o, r) => {
|
|
|
324
321
|
...p,
|
|
325
322
|
fillAlpha: 1,
|
|
326
323
|
strokeWidth: 2.5,
|
|
327
|
-
...
|
|
324
|
+
...H
|
|
328
325
|
}),
|
|
329
326
|
e.geom.point({
|
|
330
327
|
...p,
|
|
@@ -389,7 +386,7 @@ var re = (o, r) => {
|
|
|
389
386
|
lineHeight: 1,
|
|
390
387
|
letterSpacing: 1,
|
|
391
388
|
textTransform: "uppercase",
|
|
392
|
-
textShadow:
|
|
389
|
+
textShadow: Oe
|
|
393
390
|
}),
|
|
394
391
|
e.heading.h2({
|
|
395
392
|
...y,
|
|
@@ -452,7 +449,7 @@ var re = (o, r) => {
|
|
|
452
449
|
shadow: N
|
|
453
450
|
}),
|
|
454
451
|
e.annotation.text({
|
|
455
|
-
...
|
|
452
|
+
...Le,
|
|
456
453
|
...G
|
|
457
454
|
}),
|
|
458
455
|
e.annotation.shape({
|
|
@@ -473,24 +470,24 @@ var re = (o, r) => {
|
|
|
473
470
|
shadow: S
|
|
474
471
|
}),
|
|
475
472
|
e.annotation.pinnedNumber.label({
|
|
476
|
-
...
|
|
477
|
-
...
|
|
473
|
+
...E,
|
|
474
|
+
...C
|
|
478
475
|
}),
|
|
479
476
|
e.annotation.comment({
|
|
480
477
|
stroke: t.black,
|
|
481
478
|
shadow: S
|
|
482
479
|
}),
|
|
483
480
|
e.annotation.comment.label({
|
|
484
|
-
...
|
|
485
|
-
...
|
|
481
|
+
...E,
|
|
482
|
+
...C
|
|
486
483
|
}),
|
|
487
484
|
e.annotation.differenceArrow({
|
|
488
485
|
stroke: t.black,
|
|
489
486
|
strokeWidth: 2.5
|
|
490
487
|
}),
|
|
491
488
|
e.annotation.differenceArrow.label({
|
|
492
|
-
...C,
|
|
493
489
|
...E,
|
|
490
|
+
...C,
|
|
494
491
|
fontSize: 18
|
|
495
492
|
}),
|
|
496
493
|
e.tickLabel({
|
|
@@ -514,17 +511,17 @@ var re = (o, r) => {
|
|
|
514
511
|
state: "hovered"
|
|
515
512
|
})
|
|
516
513
|
]
|
|
517
|
-
},
|
|
514
|
+
}, De = {
|
|
518
515
|
name: "comic",
|
|
519
|
-
styles:
|
|
516
|
+
styles: Pe,
|
|
520
517
|
palettes: {
|
|
521
|
-
categorical:
|
|
522
|
-
sequential:
|
|
523
|
-
diverging:
|
|
518
|
+
categorical: Ae,
|
|
519
|
+
sequential: xe,
|
|
520
|
+
diverging: Te
|
|
524
521
|
},
|
|
525
522
|
colorScheme: "light",
|
|
526
|
-
plugins:
|
|
523
|
+
plugins: ke
|
|
527
524
|
};
|
|
528
525
|
export {
|
|
529
|
-
|
|
526
|
+
De as comic
|
|
530
527
|
};
|
package/package.json
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"theme",
|
|
14
14
|
"comic"
|
|
15
15
|
],
|
|
16
|
-
"version": "0.1.1-beta.
|
|
16
|
+
"version": "0.1.1-beta.1793799752548",
|
|
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.
|
|
43
|
+
"@graphysdk/react": "^1.9.0-beta.1793799752548"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@testing-library/react": "^16.3.1",
|
|
@@ -52,11 +52,11 @@
|
|
|
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.
|
|
56
|
-
"@
|
|
57
|
-
"@graphytools/vitest-config": "1.0.0",
|
|
55
|
+
"@graphysdk/react": "1.9.0-beta.1793799752548",
|
|
56
|
+
"@graphysdk/viz-engine": "1.9.0-beta.1793799752548",
|
|
58
57
|
"@graphytools/eslint-config": "0.0.1",
|
|
59
|
-
"@
|
|
58
|
+
"@graphytools/typescript-config": "0.0.1",
|
|
59
|
+
"@graphytools/vitest-config": "1.0.0"
|
|
60
60
|
},
|
|
61
61
|
"publishConfig": {
|
|
62
62
|
"access": "public"
|