@graphysdk/geom-dumbbell 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 +58 -0
- package/dist/engine/dumbbell-data-labels.d.ts +7 -0
- package/dist/engine/dumbbell.geom.d.ts +71 -0
- package/dist/index.cjs +1 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.mjs +333 -0
- package/dist/renderer/dumbbell-edit-outline.d.ts +6 -0
- package/dist/renderer/dumbbell-highlight.d.ts +15 -0
- package/dist/renderer/dumbbell-hover.d.ts +12 -0
- package/dist/renderer/dumbbell-layer.d.ts +16 -0
- package/dist/renderer/dumbbell-paint.d.ts +22 -0
- package/dist/renderer/dumbbell.d.ts +16 -0
- package/dist/renderer/utils/dumbbell-keys.d.ts +11 -0
- package/dist/utils/group-dumbbells.d.ts +31 -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 +73 -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
ADDED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
# @graphysdk/geom-dumbbell
|
|
2
|
+
|
|
3
|
+
> **Beta.** This geom is on a `0.x` version line: a minor release may change its aesthetics, style parts or look. Use a caret range (`^0.1.0`) to take only patches.
|
|
4
|
+
|
|
5
|
+
A dumbbell geom for the Graphy charting SDK. It compares values within each category: a dot per value, joined by a connector from the smallest to the largest.
|
|
6
|
+
|
|
7
|
+
Learn more at [graphy.dev](https://graphy.dev).
|
|
8
|
+
|
|
9
|
+
## Install
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm install @graphysdk/geom-dumbbell @graphysdk/react
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Requires React 19. Its only peer is `@graphysdk/react`.
|
|
16
|
+
|
|
17
|
+
## Usage
|
|
18
|
+
|
|
19
|
+
Data is long, one row per dot. Map the category to `x`, the value to `y` and the group to `color`:
|
|
20
|
+
|
|
21
|
+
```tsx
|
|
22
|
+
import { createGraphyKit, GraphRenderer } from '@graphysdk/react';
|
|
23
|
+
import { dumbbell } from '@graphysdk/geom-dumbbell';
|
|
24
|
+
|
|
25
|
+
const kit = createGraphyKit({ plugins: [dumbbell] });
|
|
26
|
+
|
|
27
|
+
const spec = kit.pipe(
|
|
28
|
+
kit.createSpec({ x: 'role', y: 'salary', color: 'sex' }),
|
|
29
|
+
kit.geom.dumbbell(),
|
|
30
|
+
kit.scale.x.discrete(),
|
|
31
|
+
kit.scale.y.continuous({ zero: false }),
|
|
32
|
+
kit.scale.color.palette()
|
|
33
|
+
);
|
|
34
|
+
|
|
35
|
+
export function PayGap({ data }) {
|
|
36
|
+
return (
|
|
37
|
+
<kit.GraphProvider spec={spec} data={data}>
|
|
38
|
+
<GraphRenderer />
|
|
39
|
+
</kit.GraphProvider>
|
|
40
|
+
);
|
|
41
|
+
}
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
Add `kit.coord.flip()` for a horizontal dumbbell. Style the dots with `kit.style.geom.dumbbell()` and the connector with `kit.style.geom.dumbbell.connector()`.
|
|
45
|
+
|
|
46
|
+
## Docs
|
|
47
|
+
|
|
48
|
+
- [Dumbbell](https://docs.graphy.dev/sdk-next/graph-types/dumbbell)
|
|
49
|
+
|
|
50
|
+
## Feedback
|
|
51
|
+
|
|
52
|
+
This geom is released early to hear what works. Tell us on [Discord](https://discord.gg/yGmYCjkSr).
|
|
53
|
+
|
|
54
|
+
## Licence
|
|
55
|
+
|
|
56
|
+
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).
|
|
57
|
+
|
|
58
|
+
For a commercial licence, [talk to us](https://graphy.dev/license).
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { PlacementResult, PluginPlacementContext } from '@graphysdk/react';
|
|
2
|
+
/**
|
|
3
|
+
* A label per dot, printing its value. Under `'auto'` each label sits outward from the connector so a
|
|
4
|
+
* pair's labels never meet in the gap; an explicit `position` is honoured as written. Stack totals and
|
|
5
|
+
* category labels are bar vocabulary; a dumbbell places neither.
|
|
6
|
+
*/
|
|
7
|
+
export declare const placeDumbbellDataLabels: (context: PluginPlacementContext) => PlacementResult;
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import { AnchorPosition, GeomCompileResult, GeomCompilerInput, GeomObservationPart, GeomStylePart, GeomStyleTarget, Observation, PlacementResult, PluginPlacementContext, Geom } from '@graphysdk/react';
|
|
2
|
+
/** The observations paint the shared geom vocabulary on top of these. */
|
|
3
|
+
declare const DOT_VOCABULARY: {
|
|
4
|
+
readonly size: "pixels";
|
|
5
|
+
readonly strokeWidth: "pixels";
|
|
6
|
+
};
|
|
7
|
+
declare const CONNECTOR_VOCABULARY: {
|
|
8
|
+
readonly stroke: "color";
|
|
9
|
+
readonly alpha: "unitInterval";
|
|
10
|
+
readonly strokeWidth: "pixels";
|
|
11
|
+
readonly dashArray: "dashArray";
|
|
12
|
+
};
|
|
13
|
+
/** Named so the published types reach the observations and every part through `@graphysdk/react`, the package's one peer. */
|
|
14
|
+
interface DumbbellStyleTarget extends GeomStyleTarget {
|
|
15
|
+
observation: GeomObservationPart<typeof DOT_VOCABULARY>;
|
|
16
|
+
parts: {
|
|
17
|
+
connector: GeomStylePart<typeof CONNECTOR_VOCABULARY>;
|
|
18
|
+
};
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* A dumbbell: one dot per observation on the value axis, and a connector joining the dots of each
|
|
22
|
+
* category from its smallest value to its largest.
|
|
23
|
+
*
|
|
24
|
+
* Data is long, one row per dot: `x` is the category, `y` the value and `color` the group, so the
|
|
25
|
+
* legend, palette, highlight by group and tooltip order all come from the color scale. The geom
|
|
26
|
+
* groups by `x` itself. A horizontal dumbbell is `coord.flip()`.
|
|
27
|
+
*/
|
|
28
|
+
export declare class DumbbellGeom extends Geom {
|
|
29
|
+
readonly type: "dumbbell";
|
|
30
|
+
readonly defaultParams: {};
|
|
31
|
+
readonly positionRoles: readonly [{
|
|
32
|
+
readonly axis: "x";
|
|
33
|
+
readonly role: "point";
|
|
34
|
+
readonly valueKind: "value";
|
|
35
|
+
}, {
|
|
36
|
+
readonly axis: "y";
|
|
37
|
+
readonly role: "point";
|
|
38
|
+
readonly valueKind: "value";
|
|
39
|
+
}];
|
|
40
|
+
readonly aesthetics: readonly [{
|
|
41
|
+
readonly kind: "visual";
|
|
42
|
+
readonly name: "color";
|
|
43
|
+
}];
|
|
44
|
+
/** Dots of one category share a band, so dodging them would pull them off the connector. */
|
|
45
|
+
readonly supportedPositions: readonly ["identity"];
|
|
46
|
+
readonly supportedCoordTypes: readonly ["cartesian", "flip"];
|
|
47
|
+
readonly scaleConstraints: {
|
|
48
|
+
discreteMainAxis: boolean;
|
|
49
|
+
};
|
|
50
|
+
readonly legend: {
|
|
51
|
+
suppressWhenSingleItem: boolean;
|
|
52
|
+
};
|
|
53
|
+
readonly dataLabelCoordTypes: readonly ["cartesian", "flip"];
|
|
54
|
+
readonly getDataLabelPlacements: (context: PluginPlacementContext) => PlacementResult;
|
|
55
|
+
/**
|
|
56
|
+
* A hovered category is one unit: its dots and connector repaint together. The connector joins the category's
|
|
57
|
+
* dots across it, so the whole of it takes a press for the category, and no stroke runs on to the next one.
|
|
58
|
+
*/
|
|
59
|
+
readonly spatialKind = "spanned-buckets";
|
|
60
|
+
readonly highlightStrategy: "observation-rerender";
|
|
61
|
+
readonly styleTarget: DumbbellStyleTarget;
|
|
62
|
+
/**
|
|
63
|
+
* Where the editor raises its annotation trigger and where an annotation on a dot lands.
|
|
64
|
+
*
|
|
65
|
+
* An annotation on a dumbbell sits on the dot it names. A dot has no extent, so every purpose resolves to
|
|
66
|
+
* its centre, and a flipped layer already holds its across position in `x`.
|
|
67
|
+
*/
|
|
68
|
+
readonly resolveAnchorPosition: (observation: Observation) => AnchorPosition | null;
|
|
69
|
+
compile({ data }: GeomCompilerInput): GeomCompileResult;
|
|
70
|
+
}
|
|
71
|
+
export {};
|
package/dist/index.cjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});let a=require("@graphysdk/react"),p=require("react"),c=require("react/jsx-runtime");var _=(t,r)=>{const o=(0,a.getX)(t),e=(0,a.getY)(t);return o===null||e===null?null:r==="x"?{observation:t,band:o,value:e}:{observation:t,band:e,value:o}},h=(t,r)=>{const o=new Map;for(const e of t){const n=_(e,r);if(n===null)continue;const s=o.get(n.band);s===void 0?o.set(n.band,[n]):s.push(n)}return[...o].map(([e,n])=>{let s=Number.POSITIVE_INFINITY,i=Number.NEGATIVE_INFINITY;for(const{value:l}of n)l<s&&(s=l),l>i&&(i=l);return{band:e,dots:n,low:s,high:i}})},O=(t,r)=>{const o=new Map(r.map(e=>[e.band,e.dots.length]));return t.filter(e=>e.dots.length===o.get(e.band))},w=t=>{const r=[];if(!t.layer.dataLabels.showDataLabels)return{labels:r,droppedCount:0};const{position:o,justify:e,align:n,offset:s}=t.layer.dataLabels,i=e==="panel-start"||e==="panel-end",l=(0,a.readMainAxis)(t.coordSystem),u=(0,a.buildPanelAnchorBox)(t.panelRect);for(const d of h(t.layer.data,l))for(const v of d.dots){const b=t.formatLabel(v.observation);if(b==="")continue;const{width:k,height:y}=t.measureDataLabel("observation","outside",b),P=(t.styleReaders.get("size",v.observation)??0)/2,D=(0,a.composePoint)(l,{main:d.band,cross:v.value}),g=(0,a.resolveAnchoredLabelCenter)({box:{x:D.x*t.panelRect.width,y:(1-D.y)*t.panelRect.height,width:0,height:0},panel:u,orientation:W(l),placement:o==="auto"?"outside":o,justify:o==="auto"?A(v,d):e,align:n,offset:i?s:s+P,alignOffset:s+P,labelWidth:k,labelHeight:y});r.push({layerId:t.layer.id,x:g.x,y:g.y,text:b,width:k,height:y,isRotated:!1,role:"observation",position:g.position})}return{labels:r,droppedCount:0}},W=t=>t==="x"?{valueAxis:"y",valueDirectionSign:-1}:{valueAxis:"x",valueDirectionSign:1},A=(t,r)=>r.dots.length>1&&t.value===r.low?"start":"end",C=10,T=1,j=2,B={size:"pixels",strokeWidth:"pixels"},S={stroke:"color",alpha:"unitInterval",strokeWidth:"pixels",dashArray:"dashArray"},I=class extends a.Geom{constructor(...t){super(...t),this.type="dumbbell",this.defaultParams={},this.positionRoles=[{axis:"x",role:"point",valueKind:"value"},{axis:"y",role:"point",valueKind:"value"}],this.aesthetics=[{kind:"visual",name:"color"}],this.supportedPositions=["identity"],this.supportedCoordTypes=["cartesian","flip"],this.scaleConstraints={discreteMainAxis:!0},this.legend={suppressWhenSingleItem:!0},this.dataLabelCoordTypes=["cartesian","flip"],this.getDataLabelPlacements=w,this.spatialKind="spanned-buckets",this.highlightStrategy="observation-rerender",this.styleTarget=(0,a.defineGeomStyleTarget)({observation:{vocabulary:B,aesthetics:{fill:"color",alpha:"alpha",size:"size",strokeWidth:"strokeWidth"},rest:{fill:(0,a.token)("geom"),fillAlpha:1,size:C,stroke:(0,a.token)("hoverAffordance"),strokeWidth:T}},parts:{connector:{vocabulary:S,rest:{stroke:(0,a.token)("geomBorder"),alpha:1,strokeWidth:j,dashArray:[]}}}}),this.resolveAnchorPosition=r=>{const o=(0,a.getX)(r),e=(0,a.getY)(r);return o===null||e===null?null:{x:o,y:e}}}compile({data:t}){return{data:t,mapping:{}}}},G=({layer:t,sourceLayer:r,coordSystem:o,panelRect:e,styleReaders:n})=>{const s=(0,a.readMainAxis)(o),i=h(t.data,s),l=(0,a.buildDotsEditOutlineShapes)(i.flatMap(d=>d.dots).map(d=>({center:f(d.band,d.value,s,e),size:(n.get("size",d.observation)??0)+(n.get("strokeWidth",d.observation)??0)}))),u=n.part("connector");return[...u===void 0?[]:O(i,h(r.data,s)).flatMap(d=>N(d,s,e,u)),...l]},N=(t,r,o,e)=>{const[n]=t.dots;if(n===void 0||t.dots.length<2)return[];const s=f(t.band,t.low,r,o),i=f(t.band,t.high,r,o),l=e.get("strokeWidth",n.observation)??0;return[{kind:"stroke",pathData:`M${s.x},${s.y}L${i.x},${i.y}`,width:l}]},f=(t,r,o,e)=>{const n=(0,a.composePoint)(o,{main:t,cross:r});return(0,a.scalePointToPanel)((0,a.projectPointCartesian)(n.x,n.y),e)},m=t=>{const r=(0,a.createStableKeyGenerator)(t.data,t.mapping,t.id),o=(0,a.createStableBandKeyGenerator)(t.data,t.mapping,t.id);return{forDot:e=>r(e.observation),forConnector:e=>{const[n]=e.dots;return(n===void 0?null:o(n.observation))??`${t.id}-band-${e.band}`}}},V=.4,H=.2,E=1,R=.5,x=({connectors:t,dots:r,mainAxis:o,styleReaders:e,keys:n,hovered:s,shouldAnimateTransitions:i=!1})=>{const l=e.part("connector"),u=s===void 0?void 0:"hovered";return(0,c.jsxs)(c.Fragment,{children:[l&&t.map(d=>(0,c.jsx)(L,{dumbbell:d,mainAxis:o,readers:l,state:u,shouldAnimateTransitions:i},n.forConnector(d))),r.map(d=>(0,c.jsx)(X,{dot:d,mainAxis:o,styleReaders:e,state:u,shouldAnimateTransitions:i},n.forDot(d))),s?.primary&&(0,c.jsx)(Y,{dot:s.primary,mainAxis:o,styleReaders:e})]})},L=({dumbbell:t,mainAxis:r,readers:o,state:e,shouldAnimateTransitions:n})=>{const[s]=t.dots;if(s===void 0||t.dots.length<2)return null;const i=(0,a.composePoint)(r,{main:t.band,cross:t.low}),l=(0,a.composePoint)(r,{main:t.band,cross:t.high}),u=o.get("strokeWidth",s.observation,e)??0;return(0,c.jsx)(a.GeomLine,{"data-testid":"dumbbell-connector",x1:(0,a.toPercent)((0,a.toViewBoxX)(i.x)),y1:(0,a.toPercent)((0,a.toViewBoxY)(i.y)),x2:(0,a.toPercent)((0,a.toViewBoxX)(l.x)),y2:(0,a.toPercent)((0,a.toViewBoxY)(l.y)),stroke:o.get("stroke",s.observation,e),strokeOpacity:o.get("alpha",s.observation,e),strokeWidth:u,strokeDasharray:(0,a.toStrokeDasharray)(o.get("dashArray",s.observation,e),u),strokeLinecap:"round",shouldAnimateTransitions:n})},X=({dot:t,mainAxis:r,styleReaders:o,state:e,shouldAnimateTransitions:n})=>{const s=(0,a.composePoint)(r,{main:t.band,cross:t.value}),i=o.get("fill",t.observation,e);return(0,c.jsx)(a.GeomCircle,{"data-testid":"dumbbell-dot",cx:(0,a.toPercent)((0,a.toViewBoxX)(s.x)),cy:(0,a.toPercent)((0,a.toViewBoxY)(s.y)),r:M(t,o,e),fill:i===void 0?void 0:(0,a.toPaintColor)(i),opacity:o.get("alpha",t.observation,e),fillOpacity:o.get("fillAlpha",t.observation,e),stroke:o.get("stroke",t.observation,e),strokeOpacity:o.get("strokeAlpha",t.observation,e),strokeWidth:o.get("strokeWidth",t.observation,e),shouldAnimateTransitions:n})},Y=({dot:t,mainAxis:r,styleReaders:o})=>{const e=(0,a.composePoint)(r,{main:t.band,cross:t.value}),n=M(t,o,"hovered"),s=o.get("strokeWidth",t.observation,"hovered")??0,i=Math.max(E,n*V),l=Math.max(R,n*H);return(0,c.jsx)("circle",{"data-testid":"dumbbell-hover-ring",cx:(0,a.toPercent)((0,a.toViewBoxX)(e.x)),cy:(0,a.toPercent)((0,a.toViewBoxY)(e.y)),r:n+s/2+l+i/2,fill:"none",stroke:o.get("stroke",t.observation,"hovered"),strokeWidth:i})},M=(t,r,o)=>(r.get("size",t.observation,o)??0)/2,z=({layer:t,sourceLayer:r,mainAxis:o,styleReaders:e})=>{const{connectors:n,dots:s}=(0,p.useMemo)(()=>{const i=h(t.data,o);return{connectors:O(i,h(r.data,o)),dots:i.flatMap(l=>l.dots)}},[t.data,r.data,o]);return(0,c.jsx)(x,{connectors:n,dots:s,mainAxis:o,styleReaders:e,keys:(0,p.useMemo)(()=>m(r),[r])})},K=({layer:t,primary:r,siblings:o,mainAxis:e,styleReaders:n})=>{const s=h([r,...o].map(i=>i.observation),e);return(0,c.jsx)("g",{"data-testid":"hovered-dumbbell",children:(0,c.jsx)(x,{connectors:s,dots:s.flatMap(i=>i.dots),mainAxis:e,styleReaders:n,keys:(0,p.useMemo)(()=>m(t),[t]),hovered:{primary:_(r.observation,e)}})})},$=({layer:t,mainAxis:r,styleReaders:o,shouldAnimateTransitions:e,intro:n})=>{const s=(0,p.useMemo)(()=>h(t.data,r),[t.data,r]),i=(0,c.jsx)(x,{connectors:s,dots:(0,p.useMemo)(()=>s.flatMap(l=>l.dots),[s]),mainAxis:r,styleReaders:o,keys:(0,p.useMemo)(()=>m(t),[t]),shouldAnimateTransitions:e});return n?.type==="fade"?(0,c.jsx)(a.IntroFade,{intro:n,children:i}):i},F=(0,a.defineGeomRenderer)(new I,{coord:"cartesian",swatchShape:"circle",guideMode:"band",render:({layer:t,coordSystem:r,styleReaders:o,shouldAnimateTransitions:e,intro:n})=>(0,c.jsx)($,{layer:t,mainAxis:(0,a.readMainAxis)(r),styleReaders:o,shouldAnimateTransitions:e,intro:n}),renderHighlight:({layer:t,sourceLayer:r,coordSystem:o,styleReaders:e})=>(0,c.jsx)(z,{layer:t,sourceLayer:r,mainAxis:(0,a.readMainAxis)(o),styleReaders:e}),renderHover:({layer:t,primary:r,group:o,related:e,coordSystem:n,styleReaders:s})=>(0,c.jsx)(K,{layer:t,primary:r,siblings:[...o,...e],mainAxis:(0,a.readMainAxis)(n),styleReaders:s}),renderHoverCompanions:()=>null,getEditOutlineShapes:G});exports.DumbbellGeom=I;exports.dumbbell=F;
|
package/dist/index.d.ts
ADDED
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,333 @@
|
|
|
1
|
+
import { Geom as M, GeomCircle as S, GeomLine as H, IntroFade as E, buildDotsEditOutlineShapes as B, buildPanelAnchorBox as R, composePoint as v, createStableBandKeyGenerator as L, createStableKeyGenerator as V, defineGeomRenderer as z, defineGeomStyleTarget as K, getX as T, getY as w, projectPointCartesian as X, readMainAxis as b, resolveAnchoredLabelCenter as Y, scalePointToPanel as $, toPaintColor as j, toPercent as h, toStrokeDasharray as F, toViewBoxX as f, toViewBoxY as m, token as D } from "@graphysdk/react";
|
|
2
|
+
import { useMemo as p } from "react";
|
|
3
|
+
import { Fragment as J, jsx as d, jsxs as U } from "react/jsx-runtime";
|
|
4
|
+
var A = (t, r) => {
|
|
5
|
+
const o = T(t), e = w(t);
|
|
6
|
+
return o === null || e === null ? null : r === "x" ? {
|
|
7
|
+
observation: t,
|
|
8
|
+
band: o,
|
|
9
|
+
value: e
|
|
10
|
+
} : {
|
|
11
|
+
observation: t,
|
|
12
|
+
band: e,
|
|
13
|
+
value: o
|
|
14
|
+
};
|
|
15
|
+
}, u = (t, r) => {
|
|
16
|
+
const o = /* @__PURE__ */ new Map();
|
|
17
|
+
for (const e of t) {
|
|
18
|
+
const a = A(e, r);
|
|
19
|
+
if (a === null) continue;
|
|
20
|
+
const n = o.get(a.band);
|
|
21
|
+
n === void 0 ? o.set(a.band, [a]) : n.push(a);
|
|
22
|
+
}
|
|
23
|
+
return [...o].map(([e, a]) => {
|
|
24
|
+
let n = Number.POSITIVE_INFINITY, s = Number.NEGATIVE_INFINITY;
|
|
25
|
+
for (const { value: i } of a)
|
|
26
|
+
i < n && (n = i), i > s && (s = i);
|
|
27
|
+
return {
|
|
28
|
+
band: e,
|
|
29
|
+
dots: a,
|
|
30
|
+
low: n,
|
|
31
|
+
high: s
|
|
32
|
+
};
|
|
33
|
+
});
|
|
34
|
+
}, N = (t, r) => {
|
|
35
|
+
const o = new Map(r.map((e) => [e.band, e.dots.length]));
|
|
36
|
+
return t.filter((e) => e.dots.length === o.get(e.band));
|
|
37
|
+
}, Z = (t) => {
|
|
38
|
+
const r = [];
|
|
39
|
+
if (!t.layer.dataLabels.showDataLabels) return {
|
|
40
|
+
labels: r,
|
|
41
|
+
droppedCount: 0
|
|
42
|
+
};
|
|
43
|
+
const { position: o, justify: e, align: a, offset: n } = t.layer.dataLabels, s = e === "panel-start" || e === "panel-end", i = b(t.coordSystem), c = R(t.panelRect);
|
|
44
|
+
for (const l of u(t.layer.data, i)) for (const g of l.dots) {
|
|
45
|
+
const k = t.formatLabel(g.observation);
|
|
46
|
+
if (k === "") continue;
|
|
47
|
+
const { width: _, height: W } = t.measureDataLabel("observation", "outside", k), P = (t.styleReaders.get("size", g.observation) ?? 0) / 2, C = v(i, {
|
|
48
|
+
main: l.band,
|
|
49
|
+
cross: g.value
|
|
50
|
+
}), y = Y({
|
|
51
|
+
box: {
|
|
52
|
+
x: C.x * t.panelRect.width,
|
|
53
|
+
y: (1 - C.y) * t.panelRect.height,
|
|
54
|
+
width: 0,
|
|
55
|
+
height: 0
|
|
56
|
+
},
|
|
57
|
+
panel: c,
|
|
58
|
+
orientation: q(i),
|
|
59
|
+
placement: o === "auto" ? "outside" : o,
|
|
60
|
+
justify: o === "auto" ? Q(g, l) : e,
|
|
61
|
+
align: a,
|
|
62
|
+
offset: s ? n : n + P,
|
|
63
|
+
alignOffset: n + P,
|
|
64
|
+
labelWidth: _,
|
|
65
|
+
labelHeight: W
|
|
66
|
+
});
|
|
67
|
+
r.push({
|
|
68
|
+
layerId: t.layer.id,
|
|
69
|
+
x: y.x,
|
|
70
|
+
y: y.y,
|
|
71
|
+
text: k,
|
|
72
|
+
width: _,
|
|
73
|
+
height: W,
|
|
74
|
+
isRotated: !1,
|
|
75
|
+
role: "observation",
|
|
76
|
+
position: y.position
|
|
77
|
+
});
|
|
78
|
+
}
|
|
79
|
+
return {
|
|
80
|
+
labels: r,
|
|
81
|
+
droppedCount: 0
|
|
82
|
+
};
|
|
83
|
+
}, q = (t) => t === "x" ? {
|
|
84
|
+
valueAxis: "y",
|
|
85
|
+
valueDirectionSign: -1
|
|
86
|
+
} : {
|
|
87
|
+
valueAxis: "x",
|
|
88
|
+
valueDirectionSign: 1
|
|
89
|
+
}, Q = (t, r) => r.dots.length > 1 && t.value === r.low ? "start" : "end", tt = 10, et = 1, ot = 2, rt = {
|
|
90
|
+
size: "pixels",
|
|
91
|
+
strokeWidth: "pixels"
|
|
92
|
+
}, at = {
|
|
93
|
+
stroke: "color",
|
|
94
|
+
alpha: "unitInterval",
|
|
95
|
+
strokeWidth: "pixels",
|
|
96
|
+
dashArray: "dashArray"
|
|
97
|
+
}, nt = class extends M {
|
|
98
|
+
constructor(...t) {
|
|
99
|
+
super(...t), this.type = "dumbbell", this.defaultParams = {}, this.positionRoles = [{
|
|
100
|
+
axis: "x",
|
|
101
|
+
role: "point",
|
|
102
|
+
valueKind: "value"
|
|
103
|
+
}, {
|
|
104
|
+
axis: "y",
|
|
105
|
+
role: "point",
|
|
106
|
+
valueKind: "value"
|
|
107
|
+
}], this.aesthetics = [{
|
|
108
|
+
kind: "visual",
|
|
109
|
+
name: "color"
|
|
110
|
+
}], this.supportedPositions = ["identity"], this.supportedCoordTypes = ["cartesian", "flip"], this.scaleConstraints = { discreteMainAxis: !0 }, this.legend = { suppressWhenSingleItem: !0 }, this.dataLabelCoordTypes = ["cartesian", "flip"], this.getDataLabelPlacements = Z, this.spatialKind = "spanned-buckets", this.highlightStrategy = "observation-rerender", this.styleTarget = K({
|
|
111
|
+
observation: {
|
|
112
|
+
vocabulary: rt,
|
|
113
|
+
aesthetics: {
|
|
114
|
+
fill: "color",
|
|
115
|
+
alpha: "alpha",
|
|
116
|
+
size: "size",
|
|
117
|
+
strokeWidth: "strokeWidth"
|
|
118
|
+
},
|
|
119
|
+
rest: {
|
|
120
|
+
fill: D("geom"),
|
|
121
|
+
fillAlpha: 1,
|
|
122
|
+
size: tt,
|
|
123
|
+
stroke: D("hoverAffordance"),
|
|
124
|
+
strokeWidth: et
|
|
125
|
+
}
|
|
126
|
+
},
|
|
127
|
+
parts: { connector: {
|
|
128
|
+
vocabulary: at,
|
|
129
|
+
rest: {
|
|
130
|
+
stroke: D("geomBorder"),
|
|
131
|
+
alpha: 1,
|
|
132
|
+
strokeWidth: ot,
|
|
133
|
+
dashArray: []
|
|
134
|
+
}
|
|
135
|
+
} }
|
|
136
|
+
}), this.resolveAnchorPosition = (r) => {
|
|
137
|
+
const o = T(r), e = w(r);
|
|
138
|
+
return o === null || e === null ? null : {
|
|
139
|
+
x: o,
|
|
140
|
+
y: e
|
|
141
|
+
};
|
|
142
|
+
};
|
|
143
|
+
}
|
|
144
|
+
compile({ data: t }) {
|
|
145
|
+
return {
|
|
146
|
+
data: t,
|
|
147
|
+
mapping: {}
|
|
148
|
+
};
|
|
149
|
+
}
|
|
150
|
+
}, st = ({ layer: t, sourceLayer: r, coordSystem: o, panelRect: e, styleReaders: a }) => {
|
|
151
|
+
const n = b(o), s = u(t.data, n), i = B(s.flatMap((l) => l.dots).map((l) => ({
|
|
152
|
+
center: I(l.band, l.value, n, e),
|
|
153
|
+
size: (a.get("size", l.observation) ?? 0) + (a.get("strokeWidth", l.observation) ?? 0)
|
|
154
|
+
}))), c = a.part("connector");
|
|
155
|
+
return [...c === void 0 ? [] : N(s, u(r.data, n)).flatMap((l) => it(l, n, e, c)), ...i];
|
|
156
|
+
}, it = (t, r, o, e) => {
|
|
157
|
+
const [a] = t.dots;
|
|
158
|
+
if (a === void 0 || t.dots.length < 2) return [];
|
|
159
|
+
const n = I(t.band, t.low, r, o), s = I(t.band, t.high, r, o), i = e.get("strokeWidth", a.observation) ?? 0;
|
|
160
|
+
return [{
|
|
161
|
+
kind: "stroke",
|
|
162
|
+
pathData: `M${n.x},${n.y}L${s.x},${s.y}`,
|
|
163
|
+
width: i
|
|
164
|
+
}];
|
|
165
|
+
}, I = (t, r, o, e) => {
|
|
166
|
+
const a = v(o, {
|
|
167
|
+
main: t,
|
|
168
|
+
cross: r
|
|
169
|
+
});
|
|
170
|
+
return $(X(a.x, a.y), e);
|
|
171
|
+
}, O = (t) => {
|
|
172
|
+
const r = V(t.data, t.mapping, t.id), o = L(t.data, t.mapping, t.id);
|
|
173
|
+
return {
|
|
174
|
+
forDot: (e) => r(e.observation),
|
|
175
|
+
forConnector: (e) => {
|
|
176
|
+
const [a] = e.dots;
|
|
177
|
+
return (a === void 0 ? null : o(a.observation)) ?? `${t.id}-band-${e.band}`;
|
|
178
|
+
}
|
|
179
|
+
};
|
|
180
|
+
}, lt = 0.4, dt = 0.2, ct = 1, ht = 0.5, x = ({ connectors: t, dots: r, mainAxis: o, styleReaders: e, keys: a, hovered: n, shouldAnimateTransitions: s = !1 }) => {
|
|
181
|
+
const i = e.part("connector"), c = n === void 0 ? void 0 : "hovered";
|
|
182
|
+
return /* @__PURE__ */ U(J, { children: [
|
|
183
|
+
i && t.map((l) => /* @__PURE__ */ d(ut, {
|
|
184
|
+
dumbbell: l,
|
|
185
|
+
mainAxis: o,
|
|
186
|
+
readers: i,
|
|
187
|
+
state: c,
|
|
188
|
+
shouldAnimateTransitions: s
|
|
189
|
+
}, a.forConnector(l))),
|
|
190
|
+
r.map((l) => /* @__PURE__ */ d(pt, {
|
|
191
|
+
dot: l,
|
|
192
|
+
mainAxis: o,
|
|
193
|
+
styleReaders: e,
|
|
194
|
+
state: c,
|
|
195
|
+
shouldAnimateTransitions: s
|
|
196
|
+
}, a.forDot(l))),
|
|
197
|
+
n?.primary && /* @__PURE__ */ d(vt, {
|
|
198
|
+
dot: n.primary,
|
|
199
|
+
mainAxis: o,
|
|
200
|
+
styleReaders: e
|
|
201
|
+
})
|
|
202
|
+
] });
|
|
203
|
+
}, ut = ({ dumbbell: t, mainAxis: r, readers: o, state: e, shouldAnimateTransitions: a }) => {
|
|
204
|
+
const [n] = t.dots;
|
|
205
|
+
if (n === void 0 || t.dots.length < 2) return null;
|
|
206
|
+
const s = v(r, {
|
|
207
|
+
main: t.band,
|
|
208
|
+
cross: t.low
|
|
209
|
+
}), i = v(r, {
|
|
210
|
+
main: t.band,
|
|
211
|
+
cross: t.high
|
|
212
|
+
}), c = o.get("strokeWidth", n.observation, e) ?? 0;
|
|
213
|
+
return /* @__PURE__ */ d(H, {
|
|
214
|
+
"data-testid": "dumbbell-connector",
|
|
215
|
+
x1: h(f(s.x)),
|
|
216
|
+
y1: h(m(s.y)),
|
|
217
|
+
x2: h(f(i.x)),
|
|
218
|
+
y2: h(m(i.y)),
|
|
219
|
+
stroke: o.get("stroke", n.observation, e),
|
|
220
|
+
strokeOpacity: o.get("alpha", n.observation, e),
|
|
221
|
+
strokeWidth: c,
|
|
222
|
+
strokeDasharray: F(o.get("dashArray", n.observation, e), c),
|
|
223
|
+
strokeLinecap: "round",
|
|
224
|
+
shouldAnimateTransitions: a
|
|
225
|
+
});
|
|
226
|
+
}, pt = ({ dot: t, mainAxis: r, styleReaders: o, state: e, shouldAnimateTransitions: a }) => {
|
|
227
|
+
const n = v(r, {
|
|
228
|
+
main: t.band,
|
|
229
|
+
cross: t.value
|
|
230
|
+
}), s = o.get("fill", t.observation, e);
|
|
231
|
+
return /* @__PURE__ */ d(S, {
|
|
232
|
+
"data-testid": "dumbbell-dot",
|
|
233
|
+
cx: h(f(n.x)),
|
|
234
|
+
cy: h(m(n.y)),
|
|
235
|
+
r: G(t, o, e),
|
|
236
|
+
fill: s === void 0 ? void 0 : j(s),
|
|
237
|
+
opacity: o.get("alpha", t.observation, e),
|
|
238
|
+
fillOpacity: o.get("fillAlpha", t.observation, e),
|
|
239
|
+
stroke: o.get("stroke", t.observation, e),
|
|
240
|
+
strokeOpacity: o.get("strokeAlpha", t.observation, e),
|
|
241
|
+
strokeWidth: o.get("strokeWidth", t.observation, e),
|
|
242
|
+
shouldAnimateTransitions: a
|
|
243
|
+
});
|
|
244
|
+
}, vt = ({ dot: t, mainAxis: r, styleReaders: o }) => {
|
|
245
|
+
const e = v(r, {
|
|
246
|
+
main: t.band,
|
|
247
|
+
cross: t.value
|
|
248
|
+
}), a = G(t, o, "hovered"), n = o.get("strokeWidth", t.observation, "hovered") ?? 0, s = Math.max(ct, a * lt), i = Math.max(ht, a * dt);
|
|
249
|
+
return /* @__PURE__ */ d("circle", {
|
|
250
|
+
"data-testid": "dumbbell-hover-ring",
|
|
251
|
+
cx: h(f(e.x)),
|
|
252
|
+
cy: h(m(e.y)),
|
|
253
|
+
r: a + n / 2 + i + s / 2,
|
|
254
|
+
fill: "none",
|
|
255
|
+
stroke: o.get("stroke", t.observation, "hovered"),
|
|
256
|
+
strokeWidth: s
|
|
257
|
+
});
|
|
258
|
+
}, G = (t, r, o) => (r.get("size", t.observation, o) ?? 0) / 2, bt = ({ layer: t, sourceLayer: r, mainAxis: o, styleReaders: e }) => {
|
|
259
|
+
const { connectors: a, dots: n } = p(() => {
|
|
260
|
+
const s = u(t.data, o);
|
|
261
|
+
return {
|
|
262
|
+
connectors: N(s, u(r.data, o)),
|
|
263
|
+
dots: s.flatMap((i) => i.dots)
|
|
264
|
+
};
|
|
265
|
+
}, [
|
|
266
|
+
t.data,
|
|
267
|
+
r.data,
|
|
268
|
+
o
|
|
269
|
+
]);
|
|
270
|
+
return /* @__PURE__ */ d(x, {
|
|
271
|
+
connectors: a,
|
|
272
|
+
dots: n,
|
|
273
|
+
mainAxis: o,
|
|
274
|
+
styleReaders: e,
|
|
275
|
+
keys: p(() => O(r), [r])
|
|
276
|
+
});
|
|
277
|
+
}, gt = ({ layer: t, primary: r, siblings: o, mainAxis: e, styleReaders: a }) => {
|
|
278
|
+
const n = u([r, ...o].map((s) => s.observation), e);
|
|
279
|
+
return /* @__PURE__ */ d("g", {
|
|
280
|
+
"data-testid": "hovered-dumbbell",
|
|
281
|
+
children: /* @__PURE__ */ d(x, {
|
|
282
|
+
connectors: n,
|
|
283
|
+
dots: n.flatMap((s) => s.dots),
|
|
284
|
+
mainAxis: e,
|
|
285
|
+
styleReaders: a,
|
|
286
|
+
keys: p(() => O(t), [t]),
|
|
287
|
+
hovered: { primary: A(r.observation, e) }
|
|
288
|
+
})
|
|
289
|
+
});
|
|
290
|
+
}, ft = ({ layer: t, mainAxis: r, styleReaders: o, shouldAnimateTransitions: e, intro: a }) => {
|
|
291
|
+
const n = p(() => u(t.data, r), [t.data, r]), s = /* @__PURE__ */ d(x, {
|
|
292
|
+
connectors: n,
|
|
293
|
+
dots: p(() => n.flatMap((i) => i.dots), [n]),
|
|
294
|
+
mainAxis: r,
|
|
295
|
+
styleReaders: o,
|
|
296
|
+
keys: p(() => O(t), [t]),
|
|
297
|
+
shouldAnimateTransitions: e
|
|
298
|
+
});
|
|
299
|
+
return a?.type === "fade" ? /* @__PURE__ */ d(E, {
|
|
300
|
+
intro: a,
|
|
301
|
+
children: s
|
|
302
|
+
}) : s;
|
|
303
|
+
}, Dt = z(new nt(), {
|
|
304
|
+
coord: "cartesian",
|
|
305
|
+
swatchShape: "circle",
|
|
306
|
+
guideMode: "band",
|
|
307
|
+
render: ({ layer: t, coordSystem: r, styleReaders: o, shouldAnimateTransitions: e, intro: a }) => /* @__PURE__ */ d(ft, {
|
|
308
|
+
layer: t,
|
|
309
|
+
mainAxis: b(r),
|
|
310
|
+
styleReaders: o,
|
|
311
|
+
shouldAnimateTransitions: e,
|
|
312
|
+
intro: a
|
|
313
|
+
}),
|
|
314
|
+
renderHighlight: ({ layer: t, sourceLayer: r, coordSystem: o, styleReaders: e }) => /* @__PURE__ */ d(bt, {
|
|
315
|
+
layer: t,
|
|
316
|
+
sourceLayer: r,
|
|
317
|
+
mainAxis: b(o),
|
|
318
|
+
styleReaders: e
|
|
319
|
+
}),
|
|
320
|
+
renderHover: ({ layer: t, primary: r, group: o, related: e, coordSystem: a, styleReaders: n }) => /* @__PURE__ */ d(gt, {
|
|
321
|
+
layer: t,
|
|
322
|
+
primary: r,
|
|
323
|
+
siblings: [...o, ...e],
|
|
324
|
+
mainAxis: b(a),
|
|
325
|
+
styleReaders: n
|
|
326
|
+
}),
|
|
327
|
+
renderHoverCompanions: () => null,
|
|
328
|
+
getEditOutlineShapes: st
|
|
329
|
+
});
|
|
330
|
+
export {
|
|
331
|
+
nt as DumbbellGeom,
|
|
332
|
+
Dt as dumbbell
|
|
333
|
+
};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { EditOutlineShape, GeomEditOutlineShapesRendererInput } from '@graphysdk/react';
|
|
2
|
+
/**
|
|
3
|
+
* What point and edit outlines round the observations it takes: each dot at its painted size, and the connector
|
|
4
|
+
* of every category it takes whole. A taken category outlines as one dumbbell, a taken group as its dots alone.
|
|
5
|
+
*/
|
|
6
|
+
export declare const getDumbbellEditOutlineShapes: ({ layer, sourceLayer, coordSystem, panelRect, styleReaders, }: GeomEditOutlineShapesRendererInput) => EditOutlineShape[];
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { GeomStyleReaders, MainAxis, SceneLayer } from '@graphysdk/react';
|
|
2
|
+
interface HighlightedDumbbellsProps {
|
|
3
|
+
layer: SceneLayer;
|
|
4
|
+
/** The whole layer the matched observations were taken from. */
|
|
5
|
+
sourceLayer: SceneLayer;
|
|
6
|
+
mainAxis: MainAxis;
|
|
7
|
+
styleReaders: GeomStyleReaders;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* Repaints the matched dots above the dimmed layer. A connector joins dots of different groups, so it is
|
|
11
|
+
* raised only when every dot it joins matched: `where: sex == 'women'` raises the women's dots and no
|
|
12
|
+
* connector, `where: role == 'Eng'` the whole Eng dumbbell.
|
|
13
|
+
*/
|
|
14
|
+
export declare const HighlightedDumbbells: ({ layer, sourceLayer, mainAxis, styleReaders }: HighlightedDumbbellsProps) => import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export {};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { GeomStyleReaders, HoverHit, MainAxis, SceneLayer } from '@graphysdk/react';
|
|
2
|
+
interface HoveredDumbbellProps {
|
|
3
|
+
layer: SceneLayer;
|
|
4
|
+
primary: HoverHit;
|
|
5
|
+
/** The other dots of the hovered category. */
|
|
6
|
+
siblings: readonly HoverHit[];
|
|
7
|
+
mainAxis: MainAxis;
|
|
8
|
+
styleReaders: GeomStyleReaders;
|
|
9
|
+
}
|
|
10
|
+
/** The hovered category, repainted whole above the dimmed layer. */
|
|
11
|
+
export declare const HoveredDumbbell: ({ layer, primary, siblings, mainAxis, styleReaders }: HoveredDumbbellProps) => import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export {};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { GeomStyleReaders, LayerIntroPlan, MainAxis, SceneLayer } from '@graphysdk/react';
|
|
2
|
+
interface DumbbellLayerProps {
|
|
3
|
+
layer: SceneLayer;
|
|
4
|
+
mainAxis: MainAxis;
|
|
5
|
+
styleReaders: GeomStyleReaders;
|
|
6
|
+
shouldAnimateTransitions: boolean;
|
|
7
|
+
intro: LayerIntroPlan | null | undefined;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* The layer's own paint. A dumbbell's marks have no extent to grow and its connectors join nothing
|
|
11
|
+
* across categories, so the engine plans its entrance as a fade and the whole layer comes up on one
|
|
12
|
+
* clock. The fade is independent of `shouldAnimateTransitions`: it rides the group rather than moving
|
|
13
|
+
* the marks, so it plays even when data changes snap.
|
|
14
|
+
*/
|
|
15
|
+
export declare const DumbbellLayer: ({ layer, mainAxis, styleReaders, shouldAnimateTransitions, intro, }: DumbbellLayerProps) => import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
export {};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { GeomStyleReaders, MainAxis } from '@graphysdk/react';
|
|
2
|
+
import { Dumbbell, DumbbellDot } from '../utils/group-dumbbells';
|
|
3
|
+
import { DumbbellKeys } from './utils/dumbbell-keys';
|
|
4
|
+
/** What one pass paints: the connectors below, the dots above them. */
|
|
5
|
+
export interface DumbbellPaintProps {
|
|
6
|
+
connectors: readonly Dumbbell[];
|
|
7
|
+
dots: readonly DumbbellDot[];
|
|
8
|
+
mainAxis: MainAxis;
|
|
9
|
+
styleReaders: GeomStyleReaders;
|
|
10
|
+
/** What identifies each mark across a data change, so a spring moves a mark rather than swapping it. */
|
|
11
|
+
keys: DumbbellKeys;
|
|
12
|
+
/** Paints in the `hovered` state, ringing this dot as the one the tooltip marks primary. */
|
|
13
|
+
hovered?: {
|
|
14
|
+
primary: DumbbellDot | null;
|
|
15
|
+
};
|
|
16
|
+
/**
|
|
17
|
+
* Whether dots and connectors spring to their new positions when the data changes. The hover and
|
|
18
|
+
* highlight repaints mount and unmount with the interaction, so only the layer's own paint animates.
|
|
19
|
+
*/
|
|
20
|
+
shouldAnimateTransitions?: boolean;
|
|
21
|
+
}
|
|
22
|
+
export declare const DumbbellPaint: ({ connectors, dots, mainAxis, styleReaders, keys, hovered, shouldAnimateTransitions, }: DumbbellPaintProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { BoundGeomRendererDefinition } from '@graphysdk/react';
|
|
2
|
+
import { DumbbellGeom } from '../engine/dumbbell.geom';
|
|
3
|
+
/**
|
|
4
|
+
* The dumbbell plugin: pass it to `createGraphyKit({ plugins: [dumbbell] })` for `kit.geom.dumbbell()`.
|
|
5
|
+
*
|
|
6
|
+
* @example
|
|
7
|
+
* const kit = createGraphyKit({ plugins: [dumbbell] });
|
|
8
|
+
* const spec = kit.pipe(
|
|
9
|
+
* kit.createSpec({ x: 'role', y: 'salary', color: 'sex' }),
|
|
10
|
+
* kit.geom.dumbbell(),
|
|
11
|
+
* kit.scale.x.discrete(),
|
|
12
|
+
* kit.scale.y.continuous(),
|
|
13
|
+
* kit.scale.color.palette()
|
|
14
|
+
* );
|
|
15
|
+
*/
|
|
16
|
+
export declare const dumbbell: BoundGeomRendererDefinition<DumbbellGeom>;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { SceneLayer } from '@graphysdk/react';
|
|
2
|
+
import { Dumbbell, DumbbellDot } from '../../utils/group-dumbbells';
|
|
3
|
+
/**
|
|
4
|
+
* A dot keys on its `(group, category)` and a connector on its category, read from raw values rather than
|
|
5
|
+
* the band: the band moves with the domain, the very change a mark should spring through, not remount on.
|
|
6
|
+
*/
|
|
7
|
+
export interface DumbbellKeys {
|
|
8
|
+
forDot: (dot: DumbbellDot) => string;
|
|
9
|
+
forConnector: (dumbbell: Dumbbell) => string;
|
|
10
|
+
}
|
|
11
|
+
export declare const createDumbbellKeys: (layer: SceneLayer) => DumbbellKeys;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { MainAxis, Observation } from '@graphysdk/react';
|
|
2
|
+
/** A dot, placed by where its category sits on the main axis and its value on the other. */
|
|
3
|
+
export interface DumbbellDot {
|
|
4
|
+
observation: Observation;
|
|
5
|
+
/** The category's position on the main axis, as a `[0, 1]` fraction. */
|
|
6
|
+
band: number;
|
|
7
|
+
/** The dot's position on the value axis, as a `[0, 1]` fraction. */
|
|
8
|
+
value: number;
|
|
9
|
+
}
|
|
10
|
+
/** One category's dots and the span its connector covers. */
|
|
11
|
+
export interface Dumbbell {
|
|
12
|
+
band: number;
|
|
13
|
+
/** The category's dots, in data order. */
|
|
14
|
+
dots: readonly DumbbellDot[];
|
|
15
|
+
/** The smallest dot's value-axis position: one end of the connector. */
|
|
16
|
+
low: number;
|
|
17
|
+
/** The largest dot's value-axis position: the other end. */
|
|
18
|
+
high: number;
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* Reads where a dot sits. The flip is already baked into the position columns, so `getX` is always
|
|
22
|
+
* across and `getY` always up; the main axis only says which of the two names the category.
|
|
23
|
+
*/
|
|
24
|
+
export declare const readDot: (observation: Observation, mainAxis: MainAxis) => DumbbellDot | null;
|
|
25
|
+
/** Groups dots into one dumbbell per category, in the order the categories first appear. */
|
|
26
|
+
export declare const groupDumbbells: (observations: Iterable<Observation>, mainAxis: MainAxis) => Dumbbell[];
|
|
27
|
+
/**
|
|
28
|
+
* The dumbbells `subset` holds every dot of, out of the whole layer's `source`. A connector joins a category's
|
|
29
|
+
* dots across groups, so a subset that takes only some of them keeps its dots and loses the connector.
|
|
30
|
+
*/
|
|
31
|
+
export declare const findWholeDumbbells: (subset: readonly Dumbbell[], source: readonly Dumbbell[]) => Dumbbell[];
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
# PolyForm Free Trial License 1.0.0
|
|
2
|
+
|
|
3
|
+
<https://polyformproject.org/licenses/free-trial/1.0.0>
|
|
4
|
+
|
|
5
|
+
## Acceptance
|
|
6
|
+
|
|
7
|
+
In order to get any license under these terms, you must agree
|
|
8
|
+
to them as both strict obligations and conditions to all
|
|
9
|
+
your licenses.
|
|
10
|
+
|
|
11
|
+
## Copyright License
|
|
12
|
+
|
|
13
|
+
The licensor grants you a copyright license for the software
|
|
14
|
+
to do everything you might do with the software that would
|
|
15
|
+
otherwise infringe the licensor's copyright in it for any
|
|
16
|
+
permitted purpose. However, you may only make changes or
|
|
17
|
+
new works based on the software according to [Changes and New
|
|
18
|
+
Works License](#changes-and-new-works-license), and you may
|
|
19
|
+
not distribute copies of the software.
|
|
20
|
+
|
|
21
|
+
## Changes and New Works License
|
|
22
|
+
|
|
23
|
+
The licensor grants you an additional copyright license to
|
|
24
|
+
make changes and new works based on the software for any
|
|
25
|
+
permitted purpose.
|
|
26
|
+
|
|
27
|
+
## Patent License
|
|
28
|
+
|
|
29
|
+
The licensor grants you a patent license for the software that
|
|
30
|
+
covers patent claims the licensor can license, or becomes able
|
|
31
|
+
to license, that you would infringe by using the software.
|
|
32
|
+
|
|
33
|
+
## Fair Use
|
|
34
|
+
|
|
35
|
+
You may have "fair use" rights for the software under the
|
|
36
|
+
law. These terms do not limit them.
|
|
37
|
+
|
|
38
|
+
## Free Trial
|
|
39
|
+
|
|
40
|
+
Use to evaluate whether the software suits a particular
|
|
41
|
+
application for less than 32 consecutive calendar days, on
|
|
42
|
+
behalf of you or your company, is use for a permitted purpose.
|
|
43
|
+
|
|
44
|
+
## No Other Rights
|
|
45
|
+
|
|
46
|
+
These terms do not allow you to sublicense or transfer any of
|
|
47
|
+
your licenses to anyone else, or prevent the licensor from
|
|
48
|
+
granting licenses to anyone else. These terms do not imply
|
|
49
|
+
any other licenses.
|
|
50
|
+
|
|
51
|
+
## Patent Defense
|
|
52
|
+
|
|
53
|
+
If you make any written claim that the software infringes or
|
|
54
|
+
contributes to infringement of any patent, your patent license
|
|
55
|
+
for the software granted under these terms ends immediately. If
|
|
56
|
+
your company makes such a claim, your patent license ends
|
|
57
|
+
immediately for work on behalf of your company.
|
|
58
|
+
|
|
59
|
+
## Violations
|
|
60
|
+
|
|
61
|
+
If you violate any of these terms, or do anything with the
|
|
62
|
+
software not covered by your licenses, all your licenses
|
|
63
|
+
end immediately.
|
|
64
|
+
|
|
65
|
+
## No Liability
|
|
66
|
+
|
|
67
|
+
_**As far as the law allows, the software comes as is, without
|
|
68
|
+
any warranty or condition, and the licensor will not be liable
|
|
69
|
+
to you for any damages arising out of these terms or the use
|
|
70
|
+
or nature of the software, under any kind of legal claim.**_
|
|
71
|
+
|
|
72
|
+
## Definitions
|
|
73
|
+
|
|
74
|
+
The **licensor** is the individual or entity offering these
|
|
75
|
+
terms, and the **software** is the software the licensor makes
|
|
76
|
+
available under these terms.
|
|
77
|
+
|
|
78
|
+
**You** refers to the individual or entity agreeing to these
|
|
79
|
+
terms.
|
|
80
|
+
|
|
81
|
+
**Your company** is any legal entity, sole proprietorship,
|
|
82
|
+
or other kind of organization that you work for, plus all
|
|
83
|
+
organizations that have control over, are under the control of,
|
|
84
|
+
or are under common control with that organization. **Control**
|
|
85
|
+
means ownership of substantially all the assets of an entity,
|
|
86
|
+
or the power to direct its management and policies by vote,
|
|
87
|
+
contract, or otherwise. Control can be direct or indirect.
|
|
88
|
+
|
|
89
|
+
**Your licenses** are all the licenses granted to you for the
|
|
90
|
+
software under these terms.
|
|
91
|
+
|
|
92
|
+
**Use** means anything you do with the software requiring one
|
|
93
|
+
of your licenses.
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
# PolyForm Noncommercial License 1.0.0
|
|
2
|
+
|
|
3
|
+
<https://polyformproject.org/licenses/noncommercial/1.0.0>
|
|
4
|
+
|
|
5
|
+
## Acceptance
|
|
6
|
+
|
|
7
|
+
In order to get any license under these terms, you must agree
|
|
8
|
+
to them as both strict obligations and conditions to all
|
|
9
|
+
your licenses.
|
|
10
|
+
|
|
11
|
+
## Copyright License
|
|
12
|
+
|
|
13
|
+
The licensor grants you a copyright license for the
|
|
14
|
+
software to do everything you might do with the software
|
|
15
|
+
that would otherwise infringe the licensor's copyright
|
|
16
|
+
in it for any permitted purpose. However, you may
|
|
17
|
+
only distribute the software according to [Distribution
|
|
18
|
+
License](#distribution-license) and make changes or new works
|
|
19
|
+
based on the software according to [Changes and New Works
|
|
20
|
+
License](#changes-and-new-works-license).
|
|
21
|
+
|
|
22
|
+
## Distribution License
|
|
23
|
+
|
|
24
|
+
The licensor grants you an additional copyright license
|
|
25
|
+
to distribute copies of the software. Your license
|
|
26
|
+
to distribute covers distributing the software with
|
|
27
|
+
changes and new works permitted by [Changes and New Works
|
|
28
|
+
License](#changes-and-new-works-license).
|
|
29
|
+
|
|
30
|
+
## Notices
|
|
31
|
+
|
|
32
|
+
You must ensure that anyone who gets a copy of any part of
|
|
33
|
+
the software from you also gets a copy of these terms or the
|
|
34
|
+
URL for them above, as well as copies of any plain-text lines
|
|
35
|
+
beginning with `Required Notice:` that the licensor provided
|
|
36
|
+
with the software. For example:
|
|
37
|
+
|
|
38
|
+
> Required Notice: Copyright Graphy Technologies Ltd. (https://graphy.dev)
|
|
39
|
+
|
|
40
|
+
## Changes and New Works License
|
|
41
|
+
|
|
42
|
+
The licensor grants you an additional copyright license to
|
|
43
|
+
make changes and new works based on the software for any
|
|
44
|
+
permitted purpose.
|
|
45
|
+
|
|
46
|
+
## Patent License
|
|
47
|
+
|
|
48
|
+
The licensor grants you a patent license for the software that
|
|
49
|
+
covers patent claims the licensor can license, or becomes able
|
|
50
|
+
to license, that you would infringe by using the software.
|
|
51
|
+
|
|
52
|
+
## Noncommercial Purposes
|
|
53
|
+
|
|
54
|
+
Any noncommercial purpose is a permitted purpose.
|
|
55
|
+
|
|
56
|
+
## Personal Uses
|
|
57
|
+
|
|
58
|
+
Personal use for research, experiment, and testing for
|
|
59
|
+
the benefit of public knowledge, personal study, private
|
|
60
|
+
entertainment, hobby projects, amateur pursuits, or religious
|
|
61
|
+
observance, without any anticipated commercial application,
|
|
62
|
+
is use for a permitted purpose.
|
|
63
|
+
|
|
64
|
+
## Noncommercial Organizations
|
|
65
|
+
|
|
66
|
+
Use by any charitable organization, educational institution,
|
|
67
|
+
public research organization, public safety or health
|
|
68
|
+
organization, environmental protection organization,
|
|
69
|
+
or government institution is use for a permitted purpose
|
|
70
|
+
regardless of the source of funding or obligations resulting
|
|
71
|
+
from the funding.
|
|
72
|
+
|
|
73
|
+
## Fair Use
|
|
74
|
+
|
|
75
|
+
You may have "fair use" rights for the software under the
|
|
76
|
+
law. These terms do not limit them.
|
|
77
|
+
|
|
78
|
+
## No Other Rights
|
|
79
|
+
|
|
80
|
+
These terms do not allow you to sublicense or transfer any of
|
|
81
|
+
your licenses to anyone else, or prevent the licensor from
|
|
82
|
+
granting licenses to anyone else. These terms do not imply
|
|
83
|
+
any other licenses.
|
|
84
|
+
|
|
85
|
+
## Patent Defense
|
|
86
|
+
|
|
87
|
+
If you make any written claim that the software infringes or
|
|
88
|
+
contributes to infringement of any patent, your patent license
|
|
89
|
+
for the software granted under these terms ends immediately. If
|
|
90
|
+
your company makes such a claim, your patent license ends
|
|
91
|
+
immediately for work on behalf of your company.
|
|
92
|
+
|
|
93
|
+
## Violations
|
|
94
|
+
|
|
95
|
+
The first time you are notified in writing that you have
|
|
96
|
+
violated any of these terms, or done anything with the software
|
|
97
|
+
not covered by your licenses, your licenses can nonetheless
|
|
98
|
+
continue if you come into full compliance with these terms,
|
|
99
|
+
and take practical steps to correct past violations, within
|
|
100
|
+
32 days of receiving notice. Otherwise, all your licenses
|
|
101
|
+
end immediately.
|
|
102
|
+
|
|
103
|
+
## No Liability
|
|
104
|
+
|
|
105
|
+
_**As far as the law allows, the software comes as is, without
|
|
106
|
+
any warranty or condition, and the licensor will not be liable
|
|
107
|
+
to you for any damages arising out of these terms or the use
|
|
108
|
+
or nature of the software, under any kind of legal claim.**_
|
|
109
|
+
|
|
110
|
+
## Definitions
|
|
111
|
+
|
|
112
|
+
The **licensor** is the individual or entity offering these
|
|
113
|
+
terms, and the **software** is the software the licensor makes
|
|
114
|
+
available under these terms.
|
|
115
|
+
|
|
116
|
+
**You** refers to the individual or entity agreeing to these
|
|
117
|
+
terms.
|
|
118
|
+
|
|
119
|
+
**Your company** is any legal entity, sole proprietorship,
|
|
120
|
+
or other kind of organization that you work for, plus all
|
|
121
|
+
organizations that have control over, are under the control of,
|
|
122
|
+
or are under common control with that organization. **Control**
|
|
123
|
+
means ownership of substantially all the assets of an entity,
|
|
124
|
+
or the power to direct its management and policies by vote,
|
|
125
|
+
contract, or otherwise. Control can be direct or indirect.
|
|
126
|
+
|
|
127
|
+
**Your licenses** are all the licenses granted to you for the
|
|
128
|
+
software under these terms.
|
|
129
|
+
|
|
130
|
+
**Use** means anything you do with the software requiring one
|
|
131
|
+
of your licenses.
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
# PolyForm Small Business License 1.0.0
|
|
2
|
+
|
|
3
|
+
<https://polyformproject.org/licenses/small-business/1.0.0>
|
|
4
|
+
|
|
5
|
+
## Acceptance
|
|
6
|
+
|
|
7
|
+
In order to get any license under these terms, you must agree
|
|
8
|
+
to them as both strict obligations and conditions to all
|
|
9
|
+
your licenses.
|
|
10
|
+
|
|
11
|
+
## Copyright License
|
|
12
|
+
|
|
13
|
+
The licensor grants you a copyright license for the
|
|
14
|
+
software to do everything you might do with the software
|
|
15
|
+
that would otherwise infringe the licensor's copyright
|
|
16
|
+
in it for any permitted purpose. However, you may
|
|
17
|
+
only distribute the software according to [Distribution
|
|
18
|
+
License](#distribution-license) and make changes or new works
|
|
19
|
+
based on the software according to [Changes and New Works
|
|
20
|
+
License](#changes-and-new-works-license).
|
|
21
|
+
|
|
22
|
+
## Distribution License
|
|
23
|
+
|
|
24
|
+
The licensor grants you an additional copyright license
|
|
25
|
+
to distribute copies of the software. Your license
|
|
26
|
+
to distribute covers distributing the software with
|
|
27
|
+
changes and new works permitted by [Changes and New Works
|
|
28
|
+
License](#changes-and-new-works-license).
|
|
29
|
+
|
|
30
|
+
## Notices
|
|
31
|
+
|
|
32
|
+
You must ensure that anyone who gets a copy of any part of
|
|
33
|
+
the software from you also gets a copy of these terms or the
|
|
34
|
+
URL for them above, as well as copies of any plain-text lines
|
|
35
|
+
beginning with `Required Notice:` that the licensor provided
|
|
36
|
+
with the software. For example:
|
|
37
|
+
|
|
38
|
+
> Required Notice: Copyright Graphy Technologies Ltd. (https://graphy.dev)
|
|
39
|
+
|
|
40
|
+
## Changes and New Works License
|
|
41
|
+
|
|
42
|
+
The licensor grants you an additional copyright license to
|
|
43
|
+
make changes and new works based on the software for any
|
|
44
|
+
permitted purpose.
|
|
45
|
+
|
|
46
|
+
## Patent License
|
|
47
|
+
|
|
48
|
+
The licensor grants you a patent license for the software that
|
|
49
|
+
covers patent claims the licensor can license, or becomes able
|
|
50
|
+
to license, that you would infringe by using the software.
|
|
51
|
+
|
|
52
|
+
## Fair Use
|
|
53
|
+
|
|
54
|
+
You may have "fair use" rights for the software under the
|
|
55
|
+
law. These terms do not limit them.
|
|
56
|
+
|
|
57
|
+
## Small Business
|
|
58
|
+
|
|
59
|
+
Use of the software for the benefit of your company is use for
|
|
60
|
+
a permitted purpose if your company has fewer than 100 total
|
|
61
|
+
individuals working as employees and independent contractors,
|
|
62
|
+
and less than 1,000,000 USD (2019) total revenue in the prior
|
|
63
|
+
tax year. Adjust this revenue threshold for inflation according
|
|
64
|
+
to the United States Bureau of Labor Statistics' consumer price
|
|
65
|
+
index for all urban consumers, U.S. city average, for all items,
|
|
66
|
+
not seasonally adjusted, with 1982–1984=100 reference base.
|
|
67
|
+
|
|
68
|
+
## No Other Rights
|
|
69
|
+
|
|
70
|
+
These terms do not allow you to sublicense or transfer any of
|
|
71
|
+
your licenses to anyone else, or prevent the licensor from
|
|
72
|
+
granting licenses to anyone else. These terms do not imply
|
|
73
|
+
any other licenses.
|
|
74
|
+
|
|
75
|
+
## Patent Defense
|
|
76
|
+
|
|
77
|
+
If you make any written claim that the software infringes or
|
|
78
|
+
contributes to infringement of any patent, your patent license
|
|
79
|
+
for the software granted under these terms ends immediately. If
|
|
80
|
+
your company makes such a claim, your patent license ends
|
|
81
|
+
immediately for work on behalf of your company.
|
|
82
|
+
|
|
83
|
+
## Violations
|
|
84
|
+
|
|
85
|
+
The first time you are notified in writing that you have
|
|
86
|
+
violated any of these terms, or done anything with the software
|
|
87
|
+
not covered by your licenses, your licenses can nonetheless
|
|
88
|
+
continue if you come into full compliance with these terms,
|
|
89
|
+
and take practical steps to correct past violations, within
|
|
90
|
+
32 days of receiving notice. Otherwise, all your licenses
|
|
91
|
+
end immediately.
|
|
92
|
+
|
|
93
|
+
## No Liability
|
|
94
|
+
|
|
95
|
+
_**As far as the law allows, the software comes as is, without
|
|
96
|
+
any warranty or condition, and the licensor will not be liable
|
|
97
|
+
to you for any damages arising out of these terms or the use
|
|
98
|
+
or nature of the software, under any kind of legal claim.**_
|
|
99
|
+
|
|
100
|
+
## Definitions
|
|
101
|
+
|
|
102
|
+
The **licensor** is the individual or entity offering these
|
|
103
|
+
terms, and the **software** is the software the licensor makes
|
|
104
|
+
available under these terms.
|
|
105
|
+
|
|
106
|
+
**You** refers to the individual or entity agreeing to these
|
|
107
|
+
terms.
|
|
108
|
+
|
|
109
|
+
**Your company** is any legal entity, sole proprietorship,
|
|
110
|
+
or other kind of organization that you work for, plus all
|
|
111
|
+
organizations that have control over, are under the control of,
|
|
112
|
+
or are under common control with that organization. **Control**
|
|
113
|
+
means ownership of substantially all the assets of an entity,
|
|
114
|
+
or the power to direct its management and policies by vote,
|
|
115
|
+
contract, or otherwise. Control can be direct or indirect.
|
|
116
|
+
|
|
117
|
+
**Your licenses** are all the licenses granted to you for the
|
|
118
|
+
software under these terms.
|
|
119
|
+
|
|
120
|
+
**Use** means anything you do with the software requiring one
|
|
121
|
+
of your licenses.
|
package/package.json
ADDED
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@graphysdk/geom-dumbbell",
|
|
3
|
+
"author": "Graphy",
|
|
4
|
+
"description": "Dumbbell geom for the Graphy charting SDK (beta)",
|
|
5
|
+
"homepage": "https://docs.graphy.dev/sdk-next/graph-types/dumbbell",
|
|
6
|
+
"license": "SEE LICENSE IN LICENSE.md",
|
|
7
|
+
"keywords": [
|
|
8
|
+
"graphy",
|
|
9
|
+
"chart",
|
|
10
|
+
"react",
|
|
11
|
+
"visualization",
|
|
12
|
+
"grammar-of-graphics",
|
|
13
|
+
"dumbbell"
|
|
14
|
+
],
|
|
15
|
+
"version": "0.1.0",
|
|
16
|
+
"type": "module",
|
|
17
|
+
"sideEffects": false,
|
|
18
|
+
"types": "./dist/index.d.ts",
|
|
19
|
+
"files": [
|
|
20
|
+
"dist",
|
|
21
|
+
"LICENSE.md",
|
|
22
|
+
"licenses",
|
|
23
|
+
"README.md"
|
|
24
|
+
],
|
|
25
|
+
"exports": {
|
|
26
|
+
".": {
|
|
27
|
+
"types": "./dist/index.d.ts",
|
|
28
|
+
"import": "./dist/index.mjs",
|
|
29
|
+
"require": "./dist/index.cjs"
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
"peerDependencies": {
|
|
33
|
+
"react": "^19.0.0",
|
|
34
|
+
"@graphysdk/react": "^1.9.0-beta.1790720825915"
|
|
35
|
+
},
|
|
36
|
+
"devDependencies": {
|
|
37
|
+
"@testing-library/react": "^16.3.1",
|
|
38
|
+
"@types/react": "^19.2.14",
|
|
39
|
+
"@types/react-dom": "^19.2.3",
|
|
40
|
+
"react": "^19.2.4",
|
|
41
|
+
"react-dom": "^19.2.4",
|
|
42
|
+
"rollup-plugin-node-externals": "^8.1.1",
|
|
43
|
+
"vite": "^8.1.5",
|
|
44
|
+
"vite-plugin-dts": "^4.5.4",
|
|
45
|
+
"vitest": "^4.1.11",
|
|
46
|
+
"@graphysdk/react": "1.9.0-beta.1790720825915",
|
|
47
|
+
"@graphysdk/viz-engine": "1.8.0",
|
|
48
|
+
"@graphytools/typescript-config": "0.0.1",
|
|
49
|
+
"@graphytools/eslint-config": "0.0.1",
|
|
50
|
+
"@graphytools/vitest-config": "1.0.0"
|
|
51
|
+
},
|
|
52
|
+
"publishConfig": {
|
|
53
|
+
"access": "public"
|
|
54
|
+
},
|
|
55
|
+
"lint-staged": {
|
|
56
|
+
"*.{ts,tsx,js,jsx,json,css,md}": [
|
|
57
|
+
"prettier --write"
|
|
58
|
+
],
|
|
59
|
+
"*.{ts,tsx}": [
|
|
60
|
+
"eslint --max-warnings=0 --fix"
|
|
61
|
+
]
|
|
62
|
+
},
|
|
63
|
+
"scripts": {
|
|
64
|
+
"build": "vite build",
|
|
65
|
+
"test": "vitest run",
|
|
66
|
+
"test:watch": "TZ=utc vitest",
|
|
67
|
+
"lint": "eslint . --max-warnings 0",
|
|
68
|
+
"lint:fix": "eslint . --fix",
|
|
69
|
+
"format": "prettier --write .",
|
|
70
|
+
"format:check": "prettier --check .",
|
|
71
|
+
"typecheck": "tsc --noEmit"
|
|
72
|
+
}
|
|
73
|
+
}
|