@graphysdk/theme-bauhaus 0.0.0-stage → 0.1.0
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/LICENSE.md +17 -0
- package/README.md +61 -2
- package/dist/bauhaus.d.ts +21 -0
- package/dist/frame.d.ts +4 -0
- package/dist/index.cjs +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.mjs +882 -0
- package/dist/palette.d.ts +19 -0
- package/dist/renderer/bar-frame.d.ts +18 -0
- package/dist/renderer/bar.d.ts +9 -0
- package/dist/renderer/forms.d.ts +40 -0
- package/dist/renderer/line.d.ts +9 -0
- package/dist/renderer/overprint.d.ts +5 -0
- package/dist/renderer/paint.d.ts +21 -0
- package/dist/renderer/plugins.d.ts +7 -0
- package/dist/renderer/point.d.ts +9 -0
- package/dist/renderer/slice.d.ts +8 -0
- package/dist/renderer/trace.d.ts +22 -0
- package/dist/renderer/utils/paths.d.ts +7 -0
- package/dist/renderer/utils/projections.d.ts +14 -0
- package/dist/styles.d.ts +9 -0
- package/fonts.css +2 -0
- package/licenses/PolyForm-Free-Trial-1.0.0.md +93 -0
- package/licenses/PolyForm-NonCommercial-1.0.0.md +131 -0
- package/licenses/PolyForm-Small-Business-1.0.0.md +121 -0
- package/package.json +79 -3
- package/src/fonts.css.d.ts +2 -0
package/LICENSE.md
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
# License
|
|
2
|
+
|
|
3
|
+
This software is available under any of the following licenses, at your option,
|
|
4
|
+
depending on which one's conditions you meet:
|
|
5
|
+
|
|
6
|
+
- **PolyForm Noncommercial 1.0.0** — for noncommercial use (personal,
|
|
7
|
+
charitable, educational, research, government).
|
|
8
|
+
See [licenses/PolyForm-NonCommercial-1.0.0.md](licenses/PolyForm-NonCommercial-1.0.0.md)
|
|
9
|
+
|
|
10
|
+
- **PolyForm Small Business 1.0.0** — free commercial use for organizations
|
|
11
|
+
under the size thresholds defined in the license.
|
|
12
|
+
See [licenses/PolyForm-Small-Business-1.0.0.md](licenses/PolyForm-Small-Business-1.0.0.md)
|
|
13
|
+
|
|
14
|
+
- **PolyForm Free Trial 1.0.0** — a 32-day evaluation for anyone else.
|
|
15
|
+
See [licenses/PolyForm-Free-Trial-1.0.0.md](licenses/PolyForm-Free-Trial-1.0.0.md)
|
|
16
|
+
|
|
17
|
+
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
CHANGED
|
@@ -1,3 +1,62 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @graphysdk/theme-bauhaus
|
|
2
2
|
|
|
3
|
-
This
|
|
3
|
+
> **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.
|
|
4
|
+
|
|
5
|
+
A design-school poster theme for the Graphy charting SDK: off-white paper, flat primary colours, heavy black rules and geometric type. Each group is drawn in the form of its colour, the red square, the blue circle and the yellow triangle, so groups stay apart without their colours.
|
|
6
|
+
|
|
7
|
+
A point's key is drawn in its form. To give a line's key its form too, add a `geom.point()` layer before the `geom.line()`: the key takes the first layer's mark, and the line draws the same form over each point.
|
|
8
|
+
|
|
9
|
+
Learn more at [graphy.dev](https://graphy.dev).
|
|
10
|
+
|
|
11
|
+
## Install
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm install @graphysdk/theme-bauhaus @graphysdk/react
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
Requires React 19. Its only peer is `@graphysdk/react`.
|
|
18
|
+
|
|
19
|
+
## Usage
|
|
20
|
+
|
|
21
|
+
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.
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
import { createGraphyKit, GraphRenderer } from '@graphysdk/react';
|
|
25
|
+
import { bauhaus } from '@graphysdk/theme-bauhaus';
|
|
26
|
+
import '@graphysdk/theme-bauhaus/fonts.css';
|
|
27
|
+
|
|
28
|
+
const kit = createGraphyKit({ theme: bauhaus });
|
|
29
|
+
|
|
30
|
+
const spec = kit.pipe(
|
|
31
|
+
kit.createSpec({ x: 'quarter', y: 'revenue', color: 'region' }),
|
|
32
|
+
kit.geom.bar({ position: 'dodge' }),
|
|
33
|
+
kit.scale.x(),
|
|
34
|
+
kit.scale.y()
|
|
35
|
+
);
|
|
36
|
+
|
|
37
|
+
export function Revenue({ data }) {
|
|
38
|
+
return (
|
|
39
|
+
<kit.GraphProvider spec={spec} data={data}>
|
|
40
|
+
<GraphRenderer />
|
|
41
|
+
</kit.GraphProvider>
|
|
42
|
+
);
|
|
43
|
+
}
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
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.
|
|
47
|
+
|
|
48
|
+
`fonts.css` loads Jost from Google Fonts, in weights 400, 500 and 700. To host the font yourself, leave the import out and load a family named `Jost` before the first graph is drawn.
|
|
49
|
+
|
|
50
|
+
## Docs
|
|
51
|
+
|
|
52
|
+
- [Bauhaus](https://docs.graphy.dev/sdk-next/themes/bauhaus)
|
|
53
|
+
|
|
54
|
+
## Feedback
|
|
55
|
+
|
|
56
|
+
This theme is released early to hear what works. Tell us on [Discord](https://discord.gg/yGmYCjkSr).
|
|
57
|
+
|
|
58
|
+
## Licence
|
|
59
|
+
|
|
60
|
+
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).
|
|
61
|
+
|
|
62
|
+
For a commercial licence, [talk to us](https://graphy.dev/license).
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { Theme } from '@graphysdk/react';
|
|
2
|
+
/**
|
|
3
|
+
* Graphs as a design-school poster of the 1920s: warm off-white paper under a heavy black bar, flat
|
|
4
|
+
* red, blue, yellow and black, heavy black axes on the left and along the bottom, and a geometric face
|
|
5
|
+
* with a large bold title and spaced capitals on the axes. Drawn for the light scheme only.
|
|
6
|
+
*
|
|
7
|
+
* Every group carries the form the school gave its colour in Kandinsky's questionnaire of 1923: the
|
|
8
|
+
* red square, the blue circle and the yellow triangle. A point is drawn in its group's form, which
|
|
9
|
+
* the key shows too, and a line is a heavy rule with that form at each reading, so groups stay apart
|
|
10
|
+
* without their colours. Forms that overlap overprint, as inks on a press do. A bar is a flat plane
|
|
11
|
+
* whose value's end is cut to its group's form, a square end, a half circle or a point, its apex
|
|
12
|
+
* exactly on the value, and only a stack's total is capped. A rose's slices end in a heavy black rule
|
|
13
|
+
* along their outer arc, and a pie's or a donut's are flat fields of ink. Notes, pins and goals are
|
|
14
|
+
* printed blocks of black lettered in the paper's colour.
|
|
15
|
+
*
|
|
16
|
+
* The face is Jost. Import `@graphysdk/theme-bauhaus/fonts.css` once to load it.
|
|
17
|
+
*
|
|
18
|
+
* @example
|
|
19
|
+
* const kit = createGraphyKit({ theme: bauhaus });
|
|
20
|
+
*/
|
|
21
|
+
export declare const bauhaus: Theme;
|
package/dist/frame.d.ts
ADDED
package/dist/index.cjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});let w=require("react"),a=require("@graphysdk/react"),p=require("react/jsx-runtime");var re={solo:{base:!0,value:!0},floor:{base:!0,value:!1},ceiling:{base:!1,value:!0},middle:{base:!1,value:!1}},ae={top:"bottom",bottom:"top",left:"right",right:"left"},oe=(e,t)=>t==="x"?((0,a.getYMax)(e)??(0,a.getY)(e)??0)>=((0,a.getYMin)(e)??0)?"top":"bottom":((0,a.getXMax)(e)??0)>=((0,a.getXMin)(e)??0)?"right":"left",ne=(e,t,o)=>{const n=Math.max(0,e.width-o),r=Math.max(0,e.height-o);return t==="top"?{...e,y:e.y+e.height-r,height:r}:t==="bottom"?{...e,height:r}:t==="left"?{...e,x:e.x+e.width-n,width:n}:{...e,width:n}},ie=(e,t,o,n)=>{const r=(0,a.getBarRectBounds)(t,e);if(!r||r.width<=0||r.height<=0)return null;const i=re[(0,a.getStackRole)(e)],l=oe(e,t),h={x:r.x*o.width,y:r.y*o.height,width:r.width*o.width,height:r.height*o.height},s=[i.value?[]:[l],i.base?[]:[ae[l]]].flat().reduce((v,k)=>ne(v,k,n/2),h),c=l==="top"||l==="bottom",u=c?s.width:s.height,g=c?s.height:s.width;if(u<=0||g<=0)return null;const{x:y,y:m,width:R,height:E}=s,W=(v,k)=>l==="top"?{x:y+v,y:m+E-k}:l==="bottom"?{x:y+v,y:m+k}:l==="right"?{x:y+k,y:m+v}:{x:y+R-k,y:m+v};return{breadth:u,length:g,endsStack:i.value,isSolo:i.base&&i.value,at:W}},se=({x:e,y:t})=>`${Math.round(e*100)/100},${Math.round(t*100)/100}`,le=(e,t)=>`${t.map((o,n)=>{const r=o.map(([i,l])=>se(e.at(i,l)));return n===0?`M${r.join(" ")}`:o.length===3?`C${r.join(" ")}`:`L${r.join(" ")}`}).join(" ")} Z`,O=e=>{const t=(0,a.useGeomStyleReader)(e);return(o,n)=>({color:(0,a.toPaintColor)(t.get("fill",o,n)),opacity:t.get("alpha",o,n),fillOpacity:t.get("fillAlpha",o,n),edge:t.get("stroke",o,n),edgeWidth:t.get("strokeWidth",o,n)})},X=e=>{const t=(0,a.useGeomStyleReader)(e);return(o,n)=>{const r=t.get("strokeWidth",o,n);return{color:t.get("stroke",o,n),opacity:t.get("alpha",o,n)*t.get("strokeAlpha",o,n),width:r,dashArray:(0,a.toStrokeDasharray)(t.get("dashArray",o,n),r)}}},de=2,he=e=>{const{breadth:t,length:o}=e;return le(e,[[[0,0]],[[0,o]],[[t,o]],[[t,0]]])},$=({layer:e,observations:t,mainAxis:o,panel:n,state:r})=>{const i=O(e),l=(0,w.useMemo)(()=>(0,a.createStableKeyGenerator)(e.data,e.mapping,e.id),[e.data,e.mapping,e.id]);if(n.width<=0||n.height<=0)return null;const h=[...t].flatMap(c=>{const u=ie(c,o,n,de);if(u===null)return[];const g=i(c,r);return[{key:l(c),frame:u,paint:g}]}),s=r==="hovered";return(0,p.jsx)("g",{"data-geom":"bar",children:h.map(({key:c,frame:u,paint:g})=>(0,p.jsx)("g",{opacity:g.opacity,children:(0,p.jsx)("path",{d:he(u),fill:g.color,fillOpacity:g.fillOpacity,stroke:s?g.edge:void 0,strokeWidth:s?g.edgeWidth:void 0,strokeLinejoin:"miter"})},c))})},ce=(0,a.defineGeomRenderer)("bar",{coord:"cartesian",guideMode:"band",swatchShape:"square",render:({layer:e,coordSystem:t,panelRect:o})=>(0,p.jsx)($,{layer:e,observations:e.data,mainAxis:(0,a.readMainAxis)(t),panel:o}),renderHover:({layer:e,coordSystem:t,primary:o,panelRect:n})=>(0,p.jsx)($,{layer:e,observations:[o.observation],mainAxis:(0,a.readMainAxis)(t),panel:n,state:"hovered"}),renderHoverCompanions:()=>null}),d={paper:"#F3EEE1",black:"#141414",secondary:"#4A4640",rule:"#C9C2B1"},f={red:"#D62718",blue:"#1B4FA3",yellow:"#E9A800",black:"#141414",green:"#1F7A4D",orange:"#CF4F14",violet:"#6A3D9A"},ue=[f.red,f.blue,f.yellow,f.black,f.green,f.orange,f.violet],ge=[f.yellow,f.red,f.black],pe=/[a-df-zA-DF-Z]|[-+]?(?:\d+\.?\d*|\.\d+)(?:[eE][-+]?\d+)?/gu,ye=/^[a-zA-Z]$/u,fe=(e,t)=>e==="H"?"x":e==="V"?"y":t%2===0?"x":"y",ve=(e,t)=>{let o="",n=0;return(e.match(pe)??[]).map(r=>{if(ye.test(r))return o=r.toUpperCase(),n=0,r;const i=fe(o,n);return n+=1,String(Number(r)*(i==="x"?t.width:t.height))}).join(" ")},Y=(e,t)=>{const o=(0,a.getX)(e),n=(0,a.getY)(e)??(0,a.getYMax)(e);return o===null||n===null?null:{x:(0,a.toViewBoxX)(o)*t.width,y:(0,a.toViewBoxY)(n)*t.height}},B=(e,t)=>{const o=(0,a.getX)(e),n=(0,a.getY)(e)??(0,a.getRadiusExtent)(e).outerRadius;if(o===null||n===null)return null;const r=(0,a.polarToUnit)(o,n),i=Math.min(t.width,t.height)/2;return{x:t.width/2+r.x*i,y:t.height/2-r.y*i}},me=e=>`${e.map((t,o)=>`${o===0?"M":"L"}${t.x},${t.y}`).join(" ")} Z`,q=[[f.red,"square"],[f.blue,"circle"],[f.yellow,"triangle"],[f.black,"diamond"],[f.green,"cross"],[f.orange,"triangle"],[f.violet,"square"]],ke=new Map(q.map(([e,t])=>[e.toUpperCase(),t])),I=e=>ke.get(e.toUpperCase())??"circle",F=Math.sqrt(3),xe=5,P=({x:e,y:t})=>`${Math.round(e*100)/100},${Math.round(t*100)/100}`,_=e=>`${e.map((t,o)=>`${o===0?"M":"L"}${P(t)}`).join(" ")} Z`,Se=(e,t,o)=>{const n=Math.PI*(o/2)**2,{x:r,y:i}=t;if(e==="square"||e==="diamond"){const h=Math.sqrt(n)/2;if(e==="square")return _([{x:r-h,y:i-h},{x:r+h,y:i-h},{x:r+h,y:i+h},{x:r-h,y:i+h}]);const s=h*Math.SQRT2;return _([{x:r,y:i-s},{x:r+s,y:i},{x:r,y:i+s},{x:r-s,y:i}])}if(e==="triangle"){const h=Math.sqrt(4*n/F),s=h*F/2;return _([{x:r,y:i-s*2/3},{x:r+h/2,y:i+s/3},{x:r-h/2,y:i+s/3}])}if(e==="cross"){const h=Math.sqrt(n/xe),s=h/2,c=h*1.5;return _([{x:r-s,y:i-c},{x:r+s,y:i-c},{x:r+s,y:i-s},{x:r+c,y:i-s},{x:r+c,y:i+s},{x:r+s,y:i+s},{x:r+s,y:i+c},{x:r-s,y:i+c},{x:r-s,y:i+s},{x:r-c,y:i+s},{x:r-c,y:i-s},{x:r-s,y:i-s}])}const l=o/2;return`M${P({x:r-l,y:i})} A${l},${l} 0 1 0 ${P({x:r+l,y:i})} A${l},${l} 0 1 0 ${P({x:r-l,y:i})} Z`},j=({form:e,centre:t,size:o,color:n,opacity:r,fillOpacity:i,edge:l,edgeWidth:h=0})=>(0,p.jsx)("path",{"data-form":e,d:Se(e,t,o),fill:n,fillOpacity:i,opacity:r,stroke:h>0?l:void 0,strokeWidth:h>0?h:void 0,strokeLinejoin:"miter"}),D=(e,t,o,n)=>{const r=(0,a.createStableKeyGenerator)(e.data,e.mapping,e.id),i=[];return e.data.groupBy(a.GROUP_VARIABLES.group).forEach(l=>{const h=[...l],[s]=h,c=n(h);if(s===void 0||c===null)return;const u=h.flatMap(g=>{const y=o(g,t);return y===null?[]:[{key:r(g),observation:g,point:y}]});i.push({key:r(s),observation:s,path:c,readings:u})}),i},be=(e,t)=>{const o=e.flatMap(n=>{const r=(0,a.getX)(n),i=B(n,t);return r===null||i===null?[]:[{angle:r,point:i}]}).sort((n,r)=>n.angle-r.angle).map(({point:n})=>n);return o.length===0?null:me(o)},Ae=4,Re=11,K=1.5,Ee=1.8,We=5,Z=e=>Math.max(Re,e*Ae),_e=(e,t)=>{const o=t*Ee;return e.every(({readings:n})=>n.every(({point:r},i)=>{const l=n[i+1]?.point;return l===void 0||Math.hypot(l.x-r.x,l.y-r.y)>=o}))},Me=({layer:e,panel:t,coord:o,project:n})=>{const r=X(e),i=(0,w.useMemo)(()=>{if(o==="polar")return D(e,t,n,u=>be(u,t));const c=(0,a.createLinePathGenerator)(e.params);return D(e,t,n,u=>{const g=c((0,a.prepareLineObservations)(u,e.params.missingValues));return g?ve(g,t):null})},[e,t,o,n]);if(t.width<=0||t.height<=0)return null;const[l]=i,h=l===void 0?0:Z(r(l.observation).width),s=l!==void 0&&_e(i,h);return(0,p.jsxs)("g",{"data-geom":"line",children:[i.map(c=>{const u=r(c.observation);return(0,p.jsx)("path",{d:c.path,fill:"none",stroke:u.color,strokeWidth:u.width,strokeDasharray:u.dashArray,strokeLinecap:"butt",strokeLinejoin:"miter",opacity:u.opacity},c.key)}),s&&i.flatMap(c=>{const u=r(c.observation),g=I(u.color);return c.readings.map(y=>(0,p.jsx)(j,{form:g,centre:y.point,size:h,color:u.color,opacity:u.opacity,edge:d.paper,edgeWidth:K},y.key))})]})},Pe=({layer:e,observation:t,panel:o,project:n})=>{const r=X(e)(t,"hovered"),i=n(t,o);return i===null?null:(0,p.jsx)("g",{"data-geom":"line",children:(0,p.jsx)(j,{form:I(r.color),centre:i,size:Z(r.width)+We,color:r.color,opacity:r.opacity,edge:d.black,edgeWidth:K})})},J=(e,t)=>(0,a.defineGeomRenderer)("line",{coord:e,guideMode:"crosshair",swatchShape:"line",render:({layer:o,panelRect:n})=>(0,p.jsx)(Me,{layer:o,panel:n,coord:e,project:t}),renderHover:({layer:o,primary:n,panelRect:r})=>(0,p.jsx)(Pe,{layer:o,observation:n.observation,panel:r,project:t}),renderHoverCompanions:()=>null,getOverlayAnchor:({observation:o})=>{const n=(0,a.getX)(o),r=(0,a.getY)(o);return n===null||r===null?null:{x:n,y:r}}}),we=J("cartesian",Y),Le=J("polar",B),He={isolation:"isolate"},Te={mixBlendMode:"multiply"},Oe=5,Be=new Set(["square","circle","triangle","diamond","cross"]),Ie=(e,t)=>Be.has(e)?e:I(t),G=({layer:e,observations:t,panel:o,project:n,state:r})=>{const i=(0,a.useGeomStyleReader)(e),l=O(e),h=(0,w.useMemo)(()=>(0,a.createStableKeyGenerator)(e.data,e.mapping,e.id),[e.data,e.mapping,e.id]),s=r==="hovered",c=s?Oe:0;return(0,p.jsx)("g",{"data-geom":"point",style:s?void 0:He,children:Array.from(t,u=>{const g=n(u,o);if(g===null)return null;const y=l(u,r);return(0,p.jsx)("g",{style:s?void 0:Te,children:(0,p.jsx)(j,{form:Ie(String(i.get("symbol",u,r)),y.color),centre:g,size:i.get("size",u,r)+c,color:y.color,opacity:y.opacity,fillOpacity:y.fillOpacity,edge:y.edge,edgeWidth:s?y.edgeWidth:0})},h(u))})})},Q=(e,t)=>(0,a.defineGeomRenderer)("point",{coord:e,swatchShape:"circle",render:({layer:o,panelRect:n})=>(0,p.jsx)(G,{layer:o,observations:o.data,panel:n,project:t}),renderHover:({layer:o,primary:n,panelRect:r})=>(0,p.jsx)(G,{layer:o,observations:[n.observation],panel:r,project:t,state:"hovered"}),renderHoverCompanions:()=>null}),je=Q("cartesian",Y),Ce=Q("polar",B),$e=4,Fe=.5,De=2,Ge=3,U=1e-6,z=(e,t,o)=>[...e].flatMap(n=>{const{startAngle:r,endAngle:i}=(0,a.getAngleExtent)(n),{innerRadius:l,outerRadius:h}=(0,a.getRadiusExtent)(n);return r===null||i===null||l===null||h===null?[]:i<=r||h<=0?[]:[{key:`${o(n)}-${r}`,observation:n,paint:t(n),startAngle:r,endAngle:i,innerRadius:l,outerRadius:h}]}),Ue=e=>{const[t]=e;return t===void 0?!1:e.every(o=>Math.abs(o.innerRadius-t.innerRadius)<U&&Math.abs(o.outerRadius-t.outerRadius)<U)},N=({layer:e,observations:t,panel:o,state:n})=>{const r=O(e),i=(0,w.useMemo)(()=>(0,a.createStableKeyGenerator)(e.data,e.mapping,e.id),[e.data,e.mapping,e.id]),l=Math.min(o.width,o.height)/2;if(l<=0)return null;const h=z(t,g=>r(g,n),i),s=Ue(z(e.data,g=>r(g),i)),c=n==="hovered",u={centerX:o.width/2,centerY:o.height/2,radius:l,digits:Ge};return(0,p.jsx)("g",{"data-geom":"bar",children:h.map(({key:g,observation:y,paint:m,startAngle:R,endAngle:E,innerRadius:W,outerRadius:v})=>{const k=(0,a.buildPolarBarArcPath)({startAngle:R,endAngle:E,innerRadius:W,outerRadius:v},u);if(k===void 0)return null;const ee=(v-W)*l,te=Math.min($e,ee*Fe)/l,C=!s&&(0,a.getStackRole)(y)!=="floor"&&(0,a.getStackRole)(y)!=="middle"?(0,a.buildPolarBarArcPath)({startAngle:R,endAngle:E,innerRadius:v-te,outerRadius:v},u):void 0;return(0,p.jsxs)("g",{opacity:m.opacity,children:[(0,p.jsx)("path",{d:k,fill:m.color,fillOpacity:m.fillOpacity,stroke:c?m.edge:d.paper,strokeWidth:c?m.edgeWidth:De,strokeLinejoin:"miter"}),C!==void 0&&(0,p.jsx)("path",{"data-value-rule":"",d:C,fill:d.black})]},g)})})},ze=(0,a.defineGeomRenderer)("bar",{coord:"polar",guideMode:"band",swatchShape:"slice",render:({layer:e,panelRect:t})=>(0,p.jsx)(N,{layer:e,observations:e.data,panel:t}),renderHover:({layer:e,primary:t,panelRect:o})=>(0,p.jsx)(N,{layer:e,observations:[t.observation],panel:o,state:"hovered"}),renderHoverCompanions:()=>null}),Ne=[ce,ze,we,Le,je,Ce];var Ve=e=>{const t=`<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect x="0" y="0" width="100%" height="10" fill="${e}"/></svg>`;return`data:image/svg+xml,${encodeURIComponent(t)}`},Xe="'Jost', 'Futura', ui-sans-serif, system-ui, sans-serif",Ye=2.5,M=24,L=1,H=2.5,qe=14,T=3,Ke=.18,Ze=18,Je=3.5,S={textColor:d.black},b={textColor:d.secondary},x={textTransform:"uppercase",letterSpacing:1.2},A={...x,textColor:d.paper,fill:d.black,stroke:d.black,strokeWidth:0,cornerRadius:0,paddingInline:8,paddingBlock:4,fontWeight:700,fontSize:11,shadow:"none"},V={stroke:d.black,strokeWidth:Ye,dashArray:[]},Qe={tokens:{graphBackground:d.paper,graphBorder:d.black,geom:f.red,geomBorder:d.black,textPrimary:d.black,textSecondary:d.secondary,ruleLine:d.black,gridLine:d.rule,hoverAffordance:d.black,hoverGuideFill:"rgba(20, 20, 20, 0.07)",hoverGuideLine:d.black,tooltipBackground:d.paper,tooltipBorder:d.black,tooltipPrimaryRow:"rgba(20, 20, 20, 0.08)",annotationShape:f.yellow,annotationArrow:d.black,differenceLabelBackground:d.paper},defaults:[a.style.graph({strokeWidth:0,cornerRadius:0,fontFamily:Xe,padding:{top:M+10,bottom:M,left:M,right:M},overlay:{image:Ve(d.black),fit:"stretch",fallback:"transparent"}}),a.style.geom({shadow:"none"},{state:"hovered"}),a.style.geom.bar({stroke:d.paper,strokeWidth:L,cornerRadius:"none"}),a.style.geom.bar({stroke:d.black,strokeWidth:H},{state:"hovered"}),a.style.geom.line({strokeWidth:Je,dashArray:[],lineCap:"butt",lineJoin:"miter"}),a.style.geom.area({fillAlpha:1,strokeWidth:L,dashArray:[],lineCap:"butt",lineJoin:"miter"}),a.style.geom.area({stroke:d.paper},{coord:"cartesian"}),a.style.geom.point({size:qe,stroke:d.paper,strokeWidth:L}),a.style.geom.point({stroke:d.black,strokeWidth:H},{state:"hovered"}),...q.map(([e,t])=>a.style.geom.point({symbol:t},{where:{variable:a.VISUAL_VARIABLES.color,eq:e}})),a.style.geom.tile({cornerRadius:0,stroke:d.paper,strokeWidth:2}),a.style.geom.tile({stroke:d.black,strokeWidth:H},{state:"hovered"}),a.style.geom.rule({stroke:d.black,strokeWidth:T,dashArray:[]}),a.style.geom.rule.label({...A}),a.style.gridLine.x({strokeWidth:0}),a.style.gridLine.y({strokeWidth:0}),a.style.panelBorder({strokeWidth:0,cornerRadius:0}),a.style.panelBorder.left(V),a.style.panelBorder.bottom(V),a.style.tickLine({stroke:d.black,strokeWidth:1.5,length:6}),a.style.tickLabel({...S,...x,fontWeight:500,fontSize:11,lineHeight:1,letterSpacing:.8}),a.style.axisLabel({...S,...x,fontWeight:700,fontSize:11,lineHeight:1,letterSpacing:1.6}),a.style.heading({...S}),a.style.heading.h1({fontWeight:700,fontSize:28,lineHeight:1.05,letterSpacing:-.3}),a.style.heading.h2({...b,fontWeight:400,fontSize:15,lineHeight:1.2}),a.style.header({margin:{bottom:Ze}}),a.style.caption({...b,fontWeight:400,fontSize:12}),a.style.source({...b,...x,fontWeight:500,fontSize:10}),a.style.source.link({...b,...x,fontWeight:500,fontSize:10}),a.style.dataLabel({...S,fontWeight:700,fontSize:12,fill:"transparent"}),a.style.legendItem({...S,...x,fontWeight:500,fontSize:11,fill:"transparent",stroke:"transparent",cornerRadius:0}),a.style.directLabel({...x,fontWeight:700,fontSize:11,dashArray:[]}),a.style.tooltip({strokeWidth:2,cornerRadius:0,paddingInline:12,paddingBlock:10,shadow:"none"}),a.style.tooltip.heading({...S,...x,fontWeight:700,fontSize:11,lineHeight:1.3}),a.style.tooltip.label({...b,fontWeight:400,fontSize:13,lineHeight:1.3}),a.style.tooltip.value({...S,fontWeight:700,fontSize:13,lineHeight:1.3}),a.style.legend.popover({strokeWidth:2,cornerRadius:0,shadow:"none"}),a.style.annotation.text({...A,lineHeight:1.3}),a.style.annotation.shape({fillAlpha:Ke,strokeWidth:0}),a.style.annotation.arrow({stroke:d.black,strokeWidth:T,dashArray:[]}),a.style.annotation.pinnedNumber({fill:d.black,stroke:d.paper,shadow:"none"}),a.style.annotation.pinnedNumber.label({...A}),a.style.annotation.comment({fill:d.black,stroke:d.paper,shadow:"none"}),a.style.annotation.comment.label({...A}),a.style.annotation.differenceArrow({stroke:d.black,strokeWidth:T}),a.style.annotation.differenceArrow.label({...A}),a.style.geom.area({fillAlpha:.35,strokeWidth:3},{coord:"polar"}),a.style.panelBorder.left({strokeWidth:0},{coord:"polar"}),a.style.panelBorder.bottom({strokeWidth:0},{coord:"polar"}),a.style.tickLine({strokeWidth:0},{coord:"polar"}),a.style.gridLine.x({strokeWidth:1,dashArray:[]},{coord:"polar"}),a.style.gridLine.y({strokeWidth:1,dashArray:[]},{coord:"polar"}),a.style.tickLabel({fontWeight:700,textOutlineColor:d.paper,textOutlineWidth:3},{coord:"polar"})]},et={name:"bauhaus",styles:Qe,palette:ue,colormap:ge,config:{axes:{y:{position:"left"}},legend:{position:"top",align:"start"}},colorScheme:"light",plugins:Ne};exports.bauhaus=et;
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { bauhaus } from './bauhaus';
|