@graphysdk/theme-halloween 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/halloween.d.ts +17 -0
- package/dist/index.cjs +42 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.mjs +2156 -0
- package/dist/night.d.ts +10 -0
- package/dist/renderer/area.d.ts +5 -0
- package/dist/renderer/bar.d.ts +71 -0
- package/dist/renderer/candle.d.ts +41 -0
- package/dist/renderer/ghost.d.ts +11 -0
- package/dist/renderer/line.d.ts +9 -0
- package/dist/renderer/motion.d.ts +34 -0
- package/dist/renderer/plugins.d.ts +8 -0
- package/dist/renderer/point.d.ts +8 -0
- package/dist/renderer/pumpkin.d.ts +31 -0
- package/dist/renderer/railing.d.ts +45 -0
- package/dist/renderer/slice.d.ts +45 -0
- package/dist/renderer/utils/bar-box.d.ts +27 -0
- package/dist/renderer/utils/box-path.d.ts +7 -0
- package/dist/renderer/utils/ink.d.ts +17 -0
- package/dist/renderer/utils/paint.d.ts +21 -0
- package/dist/renderer/utils/paths.d.ts +7 -0
- package/dist/renderer/utils/projections.d.ts +16 -0
- package/dist/renderer/utils/trace.d.ts +19 -0
- package/dist/styles.d.ts +47 -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/dist/night.d.ts
ADDED
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { ResolvedGeomRenderer } from '@graphysdk/react';
|
|
2
|
+
/** Each area as a drift of mist in its colour, densest at its glowing upper edge. */
|
|
3
|
+
export declare const halloweenArea: ResolvedGeomRenderer;
|
|
4
|
+
/** A filled radar as a drift of mist. */
|
|
5
|
+
export declare const halloweenRadarArea: ResolvedGeomRenderer;
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import { ResolvedGeomRenderer } from '@graphysdk/react';
|
|
2
|
+
import { BarBox } from './utils/bar-box';
|
|
3
|
+
import { Point } from './utils/box-path';
|
|
4
|
+
/** What a headstone is made of, in its own across-and-along measure. */
|
|
5
|
+
export interface HeadstoneShape {
|
|
6
|
+
plinth: number;
|
|
7
|
+
left: number;
|
|
8
|
+
right: number;
|
|
9
|
+
/** Where the square shoulders sit, along the stone. */
|
|
10
|
+
shoulder: number;
|
|
11
|
+
/** How far in from each side the arch begins. */
|
|
12
|
+
step: number;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* The parts of a headstone for a column that stands alone on the baseline, or `null` for a bar laid
|
|
16
|
+
* as a plain slab: a course of a stack, a bar along a horizontal axis, one below zero, or one too
|
|
17
|
+
* short to carve. The crown of the arch is the stone's full length: the value.
|
|
18
|
+
*/
|
|
19
|
+
export declare const shapeHeadstone: (box: BarBox) => HeadstoneShape | null;
|
|
20
|
+
/** The upright stone's outline: up one side, in at the shoulder, over the arch, out and down the other. */
|
|
21
|
+
export declare const traceHeadstone: (box: BarBox, shape: HeadstoneShape) => Point[][];
|
|
22
|
+
interface Carving {
|
|
23
|
+
text: string;
|
|
24
|
+
fontSize: number;
|
|
25
|
+
/** Where the figures stand, along the stone. */
|
|
26
|
+
baseline: number;
|
|
27
|
+
/** The figures' middle, across the stone. */
|
|
28
|
+
across: number;
|
|
29
|
+
}
|
|
30
|
+
/**
|
|
31
|
+
* Where a stone's value is carved: under the cross on a headstone, in the middle of a plain slab, or
|
|
32
|
+
* `null` when the figures will not fit at a legible size.
|
|
33
|
+
*/
|
|
34
|
+
export declare const fitCarving: (box: BarBox, shape: HeadstoneShape | null, text: string) => Carving | null;
|
|
35
|
+
/** The inks a stone's carving is cut in: the cut itself, and its lip a pixel below it. */
|
|
36
|
+
export declare const readCarvingInks: (color: string) => {
|
|
37
|
+
groove: string;
|
|
38
|
+
lip: string;
|
|
39
|
+
isPale: boolean;
|
|
40
|
+
};
|
|
41
|
+
/** The object a graph's columns are drawn as, chosen once for the whole graph from the room its bars have. */
|
|
42
|
+
export type GraveObject = 'headstone' | 'candle' | 'railing';
|
|
43
|
+
/** A column at least this broad, in pixels, has room for a headstone that looks like one. */
|
|
44
|
+
export declare const HEADSTONE_BREADTH = 44;
|
|
45
|
+
/** A column at least this broad, and narrower than a headstone's, is a candle; any narrower, a railing post. */
|
|
46
|
+
export declare const CANDLE_BREADTH = 14;
|
|
47
|
+
/**
|
|
48
|
+
* The object every column of a graph is drawn as, from the breadth its columns have: a headstone where
|
|
49
|
+
* there is room for one, a candle where the bars are slender, and an iron railing where they are packed
|
|
50
|
+
* close. Chosen for the graph, never for a bar, so a change of object never reads as a change of meaning.
|
|
51
|
+
*/
|
|
52
|
+
export declare const chooseGraveObject: (breadth: number) => GraveObject;
|
|
53
|
+
/**
|
|
54
|
+
* The breadth a layer's columns are given: the broadest of them, which every column of a dodged or a
|
|
55
|
+
* plain graph shares, so a single bar drawn on its own when hovered measures the same as the whole graph.
|
|
56
|
+
*/
|
|
57
|
+
export declare const readColumnBreadth: (boxes: ReadonlyArray<BarBox | null>) => number;
|
|
58
|
+
/**
|
|
59
|
+
* Each column is one object of the churchyard, the same object for every column of a graph, chosen by
|
|
60
|
+
* how much room the columns have: a headstone where they are broad, a wax candle where they are
|
|
61
|
+
* slender, and a wrought-iron railing post where they are packed close. A headstone stands on a low
|
|
62
|
+
* plinth across its band, its upright kept to a stone's proportions, its arch's crown exactly the
|
|
63
|
+
* value, with its thickness, grain and an inscription cut into it. A candle's wax ends exactly at the
|
|
64
|
+
* value, its drips run down from the rim, and only its wick and flame stand above it. A railing post's
|
|
65
|
+
* spear tip is exactly the value, and a low rail joins it to the posts beside it. A stack is a pile of
|
|
66
|
+
* plain carved courses, and a horizontal bar a plain ledger slab, at every density. On the graph's
|
|
67
|
+
* intro each object rises up through its own fixed rectangle from below its foot, like a ghost through
|
|
68
|
+
* the floor.
|
|
69
|
+
*/
|
|
70
|
+
export declare const halloweenBar: ResolvedGeomRenderer;
|
|
71
|
+
export {};
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { BarBox } from './utils/bar-box';
|
|
3
|
+
/** Where a candle stands in its bar, in the bar's own across-and-along measure. */
|
|
4
|
+
export interface CandleShape {
|
|
5
|
+
left: number;
|
|
6
|
+
right: number;
|
|
7
|
+
/** The top of the dish, where the wax begins. */
|
|
8
|
+
dish: number;
|
|
9
|
+
/** The top of the wax: the bar's whole length, its value. */
|
|
10
|
+
top: number;
|
|
11
|
+
wick: number;
|
|
12
|
+
/** The flame's foot and tip, both above the value. */
|
|
13
|
+
flameFoot: number;
|
|
14
|
+
flameTip: number;
|
|
15
|
+
}
|
|
16
|
+
/** The candle that stands in a column's rectangle, its wax ending exactly at the value. */
|
|
17
|
+
export declare const shapeCandle: (box: BarBox) => CandleShape;
|
|
18
|
+
interface CandleWaxProps {
|
|
19
|
+
box: BarBox;
|
|
20
|
+
candleKey: string;
|
|
21
|
+
color: string;
|
|
22
|
+
fillOpacity: number;
|
|
23
|
+
/** The wax's gradient, which runs through `color` at its middle. */
|
|
24
|
+
waxId: string;
|
|
25
|
+
}
|
|
26
|
+
/** The candle's dish, wax and drips, all inside its bar's rectangle. */
|
|
27
|
+
export declare const CandleWax: ({ box, candleKey, color, fillOpacity, waxId }: CandleWaxProps) => ReactNode;
|
|
28
|
+
interface CandleFlameProps {
|
|
29
|
+
box: BarBox;
|
|
30
|
+
/** The candlelight's soft glow, a radial gradient fading to nothing. */
|
|
31
|
+
haloId: string;
|
|
32
|
+
/** Whether the flame flickers: only on a graph that animates, and never for reduced motion. */
|
|
33
|
+
isFlickering: boolean;
|
|
34
|
+
}
|
|
35
|
+
/** The glow round every flame of a layer, written once into its definitions. */
|
|
36
|
+
export declare const CandleHalo: ({ id }: {
|
|
37
|
+
id: string;
|
|
38
|
+
}) => ReactNode;
|
|
39
|
+
/** The wick and the flame, above the top of the wax: the one thing drawn past a bar's value. */
|
|
40
|
+
export declare const CandleFlame: ({ box, haloId, isFlickering }: CandleFlameProps) => ReactNode;
|
|
41
|
+
export {};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { ReactNode, Ref } from 'react';
|
|
2
|
+
interface GhostProps {
|
|
3
|
+
x: number;
|
|
4
|
+
y: number;
|
|
5
|
+
/** The colour of the line the ghost rides, which its outline and its halo take. */
|
|
6
|
+
color: string;
|
|
7
|
+
ghostRef?: Ref<SVGGElement>;
|
|
8
|
+
}
|
|
9
|
+
/** A ghost hovering over and just behind (`x`, `y`), its hem clear of the point. */
|
|
10
|
+
export declare const Ghost: ({ x, y, color, ghostRef }: GhostProps) => ReactNode;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ResolvedGeomRenderer } from '@graphysdk/react';
|
|
2
|
+
/**
|
|
3
|
+
* A line is a glowing trail with a lit bead on each reading and a little ghost hovering over its last
|
|
4
|
+
* one. On the graph's intro the trail draws in from its first reading with the ghost riding its head,
|
|
5
|
+
* and each bead lights as the ghost passes.
|
|
6
|
+
*/
|
|
7
|
+
export declare const halloweenLine: ResolvedGeomRenderer;
|
|
8
|
+
/** A radar's outline as a glowing trail, closed, with a bead on each reading and no ghost. */
|
|
9
|
+
export declare const halloweenRadarLine: ResolvedGeomRenderer;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { CSSProperties, ReactNode } from 'react';
|
|
2
|
+
import { LayerIntroPlan } from '@graphysdk/react';
|
|
3
|
+
/** The class names the keyframes below are played through. */
|
|
4
|
+
export declare const MOTION_CLASSES: {
|
|
5
|
+
/** A pile of pumpkins rises into its bar from below its foot, like a ghost through the floor. */
|
|
6
|
+
readonly rise: "halloween-rise";
|
|
7
|
+
/** A lantern lights up: it swells from a spark to its own size. */
|
|
8
|
+
readonly light: "halloween-light";
|
|
9
|
+
/** A rose window's panes light up one after another, as the moon comes up behind them. */
|
|
10
|
+
readonly kindle: "halloween-kindle";
|
|
11
|
+
/** A candle's flame flickers, for as long as the graph is shown. */
|
|
12
|
+
readonly flicker: "halloween-flicker";
|
|
13
|
+
};
|
|
14
|
+
/** The keyframes, written once into each layer that plays any. */
|
|
15
|
+
export declare const MotionKeyframes: () => ReactNode;
|
|
16
|
+
/** How long a pile takes to rise, or a lantern to light, and how long it waits first, from the layer's intro plan. */
|
|
17
|
+
export declare const readEntranceTiming: (intro: LayerIntroPlan | null | undefined, key: string) => {
|
|
18
|
+
duration: number;
|
|
19
|
+
delay: number;
|
|
20
|
+
} | null;
|
|
21
|
+
/** The custom properties one animated shape reads its timing and starting offset from. */
|
|
22
|
+
export declare const toMotionStyle: (timing: {
|
|
23
|
+
duration: number;
|
|
24
|
+
delay: number;
|
|
25
|
+
}, from?: {
|
|
26
|
+
x: number;
|
|
27
|
+
y: number;
|
|
28
|
+
}) => CSSProperties;
|
|
29
|
+
/**
|
|
30
|
+
* Whether a layer's ambient motion (a candle's flicker) plays: only on a graph that plays its intro,
|
|
31
|
+
* which the engine never asks of a graph drawn with `animation={false}` or for a viewer who prefers
|
|
32
|
+
* reduced motion. Settled when the layer first mounts, so the flicker carries on once the intro ends.
|
|
33
|
+
*/
|
|
34
|
+
export declare const usePlaysMotion: (intro: LayerIntroPlan | null | undefined) => boolean;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ResolvedGeomRenderer } from '@graphysdk/react';
|
|
2
|
+
/**
|
|
3
|
+
* Every built-in geom the Halloween theme repaints, under each coordinate system it is drawn in. A
|
|
4
|
+
* tile keeps the built-in renderer, rounded and parted by the stylesheet, since a heatmap reads from
|
|
5
|
+
* its colours and its labels. Positions, scales and axes come from the compiled layer unchanged, and
|
|
6
|
+
* colour and opacity come from the stylesheet.
|
|
7
|
+
*/
|
|
8
|
+
export declare const halloweenPlugins: readonly ResolvedGeomRenderer[];
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ResolvedGeomRenderer } from '@graphysdk/react';
|
|
2
|
+
/**
|
|
3
|
+
* Scatter and bubble: a little jack-o'-lantern whose body is centred on each reading, so the reading
|
|
4
|
+
* is the middle of the pumpkin, not its stem. On the graph's intro each lantern lights up in turn.
|
|
5
|
+
*/
|
|
6
|
+
export declare const halloweenPoint: ResolvedGeomRenderer;
|
|
7
|
+
/** A radar's vertices as lanterns. */
|
|
8
|
+
export declare const halloweenRadarPoint: ResolvedGeomRenderer;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
/** Candlelight showing through a carved face. */
|
|
3
|
+
export declare const CANDLELIGHT = "#FFE9A3";
|
|
4
|
+
/** The dark inside a pumpkin, seen through a face carved into a pale one. */
|
|
5
|
+
export declare const HOLLOW = "#2A1533";
|
|
6
|
+
/** The colour a face carved into a pumpkin of `color` shows. */
|
|
7
|
+
export declare const readFaceColor: (color: string) => string;
|
|
8
|
+
/** The colour a pumpkin's ribs are drawn in: its own colour, deeper. */
|
|
9
|
+
export declare const readRibColor: (color: string) => string;
|
|
10
|
+
/**
|
|
11
|
+
* A body lit from inside: brightest just below its middle, where the candle sits, and deepening to
|
|
12
|
+
* its edge. Measured on each shape it fills, so one gradient serves every pumpkin of a colour.
|
|
13
|
+
*/
|
|
14
|
+
export declare const PumpkinGlow: ({ id, color }: {
|
|
15
|
+
id: string;
|
|
16
|
+
color: string;
|
|
17
|
+
}) => ReactNode;
|
|
18
|
+
interface PumpkinProps {
|
|
19
|
+
cx: number;
|
|
20
|
+
cy: number;
|
|
21
|
+
width: number;
|
|
22
|
+
height: number;
|
|
23
|
+
color: string;
|
|
24
|
+
/** The `url()` of the pumpkin's glow gradient. */
|
|
25
|
+
fill: string;
|
|
26
|
+
/** Whether to draw its stem: a pumpkin piled under another has its stem hidden. */
|
|
27
|
+
hasStem?: boolean;
|
|
28
|
+
}
|
|
29
|
+
/** A carved pumpkin centred on (`cx`, `cy`), filling a box `width` by `height`. */
|
|
30
|
+
export declare const Pumpkin: ({ cx, cy, width, height, color, fill, hasStem }: PumpkinProps) => ReactNode;
|
|
31
|
+
export {};
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { BarBox } from './utils/bar-box';
|
|
3
|
+
export declare const RAIL_IRON = "#5B4E66";
|
|
4
|
+
/** Where a post stands in its bar, in the bar's own across-and-along measure. */
|
|
5
|
+
export interface PostShape {
|
|
6
|
+
left: number;
|
|
7
|
+
right: number;
|
|
8
|
+
/** The foot of the spear's head, where the post ends. */
|
|
9
|
+
neck: number;
|
|
10
|
+
headHalf: number;
|
|
11
|
+
/** The spear's tip: the bar's whole length, its value. */
|
|
12
|
+
tip: number;
|
|
13
|
+
}
|
|
14
|
+
/** The post that stands in a column's rectangle, its spear's tip exactly on the value. */
|
|
15
|
+
export declare const shapePost: (box: BarBox) => PostShape;
|
|
16
|
+
interface PostProps {
|
|
17
|
+
box: BarBox;
|
|
18
|
+
color: string;
|
|
19
|
+
fillOpacity: number;
|
|
20
|
+
/** The paint's gradient across the post, which runs through `color` at its middle. */
|
|
21
|
+
paintId: string;
|
|
22
|
+
}
|
|
23
|
+
/** The iron post and its spear-point finial, inside its bar's rectangle. */
|
|
24
|
+
export declare const RailingPost: ({ box, color, fillOpacity, paintId }: PostProps) => ReactNode;
|
|
25
|
+
/** The posts either side of one along the fence: how far away each is, and where its spear begins. */
|
|
26
|
+
export interface RailNeighbours {
|
|
27
|
+
before: {
|
|
28
|
+
gap: number;
|
|
29
|
+
neck: number;
|
|
30
|
+
} | null;
|
|
31
|
+
after: {
|
|
32
|
+
gap: number;
|
|
33
|
+
neck: number;
|
|
34
|
+
} | null;
|
|
35
|
+
}
|
|
36
|
+
interface RailProps {
|
|
37
|
+
box: BarBox;
|
|
38
|
+
neighbours: RailNeighbours;
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* The rails through a post, each reaching halfway to the post beside it, where that post draws the other
|
|
42
|
+
* half. A rail runs only between two posts that both stand clear above it.
|
|
43
|
+
*/
|
|
44
|
+
export declare const RailingRail: ({ box, neighbours }: RailProps) => ReactNode;
|
|
45
|
+
export {};
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { ResolvedGeomRenderer } from '@graphysdk/react';
|
|
2
|
+
/** Carved stone: the tracery, the rim, the boss and a donut's roundel. */
|
|
3
|
+
export declare const TRACERY_STONE = "#A39A8C";
|
|
4
|
+
interface Centre {
|
|
5
|
+
x: number;
|
|
6
|
+
y: number;
|
|
7
|
+
}
|
|
8
|
+
interface Sector {
|
|
9
|
+
startAngle: number;
|
|
10
|
+
endAngle: number;
|
|
11
|
+
innerRadius: number;
|
|
12
|
+
outerRadius: number;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* A mullion's width for a window of `radius` whose panes are `sectors`: a share of the radius, held
|
|
16
|
+
* between a least and a most in pixels, and thinner where the typical pane is narrow or shallow, so the
|
|
17
|
+
* stone never crowds out a rose's thin petals or a radial bar's bands. Measured on every pane of the
|
|
18
|
+
* layer, so a hovered pane is traced exactly as it is drawn.
|
|
19
|
+
*/
|
|
20
|
+
export declare const readMullionWidth: (radius: number, sectors?: readonly Sector[]) => number;
|
|
21
|
+
/**
|
|
22
|
+
* A pointed Gothic lancet filling a piece of glass: straight sides along the piece's radii, its foot on
|
|
23
|
+
* the piece's inner arc and a pointed arch for a head, whose tip touches the piece's outer arc. It lies
|
|
24
|
+
* wholly inside the piece, so it is leading within the pane and never moves the pane's edge.
|
|
25
|
+
*/
|
|
26
|
+
export declare const buildLancet: (piece: Sector, panelRadius: number, centre: Centre) => string;
|
|
27
|
+
/**
|
|
28
|
+
* The pieces of glass a pane is leaded into, as sectors of the pane's own sector: whole rings out from
|
|
29
|
+
* the middle, each split across into more pieces than the ring inside it, as a real window's are.
|
|
30
|
+
* Every piece lies inside the pane, so the leading between them never reaches past its slice.
|
|
31
|
+
*/
|
|
32
|
+
export declare const splitPane: (sector: Sector, panelRadius: number, hasLancets?: boolean) => Array<Sector & {
|
|
33
|
+
isLancet: boolean;
|
|
34
|
+
}>;
|
|
35
|
+
/** A quatrefoil of four lobes, each a circle, centred on `centre` and reaching `radius` from it. */
|
|
36
|
+
export declare const buildQuatrefoil: (centre: Centre, radius: number) => string;
|
|
37
|
+
/**
|
|
38
|
+
* Pie, donut, rose and radial bar as a church's rose window lit from behind by the moon. Each slice
|
|
39
|
+
* keeps its own honest sector as a pane of stained glass in its group's colour, glowing at its heart
|
|
40
|
+
* and leaded into pieces inside its own edge. The stone tracery is drawn centred on every slice's
|
|
41
|
+
* outline, so it takes as much from one pane as from its neighbour. A pie's mullions meet at a stone
|
|
42
|
+
* boss; a donut's hole is the window's carved stone roundel.
|
|
43
|
+
*/
|
|
44
|
+
export declare const halloweenSlice: ResolvedGeomRenderer;
|
|
45
|
+
export {};
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { MainAxis, Observation, XYPoint } from '@graphysdk/react';
|
|
2
|
+
import { PixelRect, PixelSize } from './projections';
|
|
3
|
+
export type Edge = 'top' | 'right' | 'bottom' | 'left';
|
|
4
|
+
export interface BarBox {
|
|
5
|
+
/** The bar's rectangle in panel pixels, drawn in from any edge it shares with a neighbour in its stack. */
|
|
6
|
+
rect: PixelRect;
|
|
7
|
+
/** The edge the value ends at. */
|
|
8
|
+
valueEdge: Edge;
|
|
9
|
+
/** Whether the bar ends its stack, so its value's edge is the one a reader measures. */
|
|
10
|
+
endsStack: boolean;
|
|
11
|
+
/** Whether the bar starts its stack, so its foot stands on the baseline. */
|
|
12
|
+
startsStack: boolean;
|
|
13
|
+
/** Whether the bar stands upright, so its breadth runs across the page. */
|
|
14
|
+
isColumn: boolean;
|
|
15
|
+
/** Across the band. */
|
|
16
|
+
breadth: number;
|
|
17
|
+
/** Along the value, from the foot. */
|
|
18
|
+
length: number;
|
|
19
|
+
/** The middle of the foot, where the bar grows from. */
|
|
20
|
+
foot: XYPoint;
|
|
21
|
+
/** The way the bar grows from its foot, one pixel long. */
|
|
22
|
+
growth: XYPoint;
|
|
23
|
+
/** A point `across` the band from one side and `along` the value from the foot, in panel pixels. */
|
|
24
|
+
at: (across: number, along: number) => XYPoint;
|
|
25
|
+
}
|
|
26
|
+
/** A bar's box in panel pixels, or `null` for a bar with no area to draw. */
|
|
27
|
+
export declare const readBarBox: (observation: Observation, mainAxis: MainAxis, panel: PixelSize, stackGap: number) => BarBox | null;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { BarBox } from './bar-box';
|
|
2
|
+
/** A point in a bar's own measure: `across` its band from one side, `along` its value from its foot. */
|
|
3
|
+
export type Point = [across: number, along: number];
|
|
4
|
+
/** A rectangle in a bar's measure, from `across` and `along` corners. */
|
|
5
|
+
export declare const traceBlock: (left: number, right: number, foot: number, top: number) => Point[][];
|
|
6
|
+
/** A traced outline in panel pixels: `M` at the first point, `L` to a single point, `C` through three. */
|
|
7
|
+
export declare const toPath: (box: BarBox, segments: Point[][], isClosed?: boolean) => string;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/** `color` moved `amount` of the way to `target`; a colour either cannot read is returned as it is. */
|
|
2
|
+
export declare const mixColors: (color: string, target: string, amount: number) => string;
|
|
3
|
+
/** An id a `url()` can name: React's own holds characters one cannot. */
|
|
4
|
+
export declare const useDefId: (prefix: string) => string;
|
|
5
|
+
/** Ids for one definition per colour under one prefix, for shapes that share a gradient or a pattern. */
|
|
6
|
+
export declare const useColorIds: (prefix: string) => ((color: string) => string);
|
|
7
|
+
/** A number from a string, so a shape's details fall the same way every time it is drawn. */
|
|
8
|
+
export declare const hashSeed: (text: string) => number;
|
|
9
|
+
/** Numbers in `[0, 1)` from a seed, the same run of them for the same seed. */
|
|
10
|
+
export declare const createRandom: (seed: number) => (() => number);
|
|
11
|
+
/** How bright a colour looks, from 0 for black to 1 for white; a colour that cannot be read counts as mid-grey. */
|
|
12
|
+
export declare const measureLuminance: (color: string) => number;
|
|
13
|
+
/**
|
|
14
|
+
* `color` with its saturation scaled by `factor` and its hue and lightness kept, as coloured glass
|
|
15
|
+
* shows a stone's own hue more richly; a colour that cannot be read is returned as it is.
|
|
16
|
+
*/
|
|
17
|
+
export declare const saturateColor: (color: string, factor: number) => string;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { Observation, SceneLayerFor, StyleState } from '@graphysdk/react';
|
|
2
|
+
/** What a filled shape is drawn with. */
|
|
3
|
+
export interface ShapePaint {
|
|
4
|
+
color: string;
|
|
5
|
+
opacity: number;
|
|
6
|
+
fillOpacity: number;
|
|
7
|
+
/** The edge that parts it from its neighbours, or rules it when hovered. */
|
|
8
|
+
edge: string;
|
|
9
|
+
edgeWidth: number;
|
|
10
|
+
}
|
|
11
|
+
/** What a line is drawn with. Its rails take `color`; the ground shows between them. */
|
|
12
|
+
export interface LinePaint {
|
|
13
|
+
color: string;
|
|
14
|
+
opacity: number;
|
|
15
|
+
width: number;
|
|
16
|
+
dashArray: string | undefined;
|
|
17
|
+
}
|
|
18
|
+
export type ReadShapePaint = (observation: Observation, state?: StyleState) => ShapePaint;
|
|
19
|
+
export type ReadLinePaint = (observation: Observation, state?: StyleState) => LinePaint;
|
|
20
|
+
export declare const useShapePaint: (layer: SceneLayerFor<"bar" | "point" | "tile" | "area">) => ReadShapePaint;
|
|
21
|
+
export declare const useLinePaint: (layer: SceneLayerFor<"line">) => ReadLinePaint;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { PixelSize } from './projections';
|
|
2
|
+
/**
|
|
3
|
+
* A path written in the unit square, in the panel's pixels. A shape is measured in pixels on every
|
|
4
|
+
* side, which a path stretched by a transform is not. Reads the commands a line or an area is written
|
|
5
|
+
* in; an arc is not one of them.
|
|
6
|
+
*/
|
|
7
|
+
export declare const scalePathToPanel: (path: string, panel: PixelSize) => string;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { Observation, XYPoint } from '@graphysdk/react';
|
|
2
|
+
export interface PixelSize {
|
|
3
|
+
width: number;
|
|
4
|
+
height: number;
|
|
5
|
+
}
|
|
6
|
+
export interface PixelRect extends PixelSize {
|
|
7
|
+
x: number;
|
|
8
|
+
y: number;
|
|
9
|
+
}
|
|
10
|
+
/** Where an observation is drawn in the panel, in pixels; `null` for one missing a position. */
|
|
11
|
+
export type Projection = (observation: Observation, panel: PixelSize) => XYPoint | null;
|
|
12
|
+
export declare const projectCartesian: Projection;
|
|
13
|
+
export declare const projectPolar: Projection;
|
|
14
|
+
/** The whole panel, for a shape that may reach any part of it. */
|
|
15
|
+
export declare const toPanelBounds: (panel: PixelSize) => PixelRect;
|
|
16
|
+
export declare const toClosedPath: (points: XYPoint[]) => string;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { Observation, SceneLayer, XYPoint } from '@graphysdk/react';
|
|
2
|
+
import { PixelSize, Projection } from './projections';
|
|
3
|
+
/** One group's path in panel pixels, with the observation its paint is read for. */
|
|
4
|
+
export interface Trace {
|
|
5
|
+
key: string;
|
|
6
|
+
path: string;
|
|
7
|
+
observation: Observation;
|
|
8
|
+
}
|
|
9
|
+
/** One trace per group, from whatever turns a group's observations into its path. */
|
|
10
|
+
export declare const readTraces: (layer: SceneLayer, buildPath: (observations: Observation[]) => string | null) => Trace[];
|
|
11
|
+
/** A radar group's vertices in panel pixels, in angular order so its outline never crosses itself. */
|
|
12
|
+
export declare const readRadarPoints: (observations: Observation[], panel: PixelSize) => XYPoint[];
|
|
13
|
+
export declare const buildRadarPath: (observations: Observation[], panel: PixelSize) => string | null;
|
|
14
|
+
/** Each reading of every group in panel pixels, with the observation it is read from. */
|
|
15
|
+
export declare const readReadings: (layer: SceneLayer, panel: PixelSize, project: Projection) => Array<{
|
|
16
|
+
key: string;
|
|
17
|
+
observation: Observation;
|
|
18
|
+
point: XYPoint;
|
|
19
|
+
}>;
|
package/dist/styles.d.ts
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { Stylesheet } from '@graphysdk/react';
|
|
2
|
+
export declare const HALLOWEEN_COLORS: {
|
|
3
|
+
readonly sky: "#24132F";
|
|
4
|
+
readonly ground: "#130A1A";
|
|
5
|
+
readonly raised: "#2C1A38";
|
|
6
|
+
readonly text: "#F1E8D6";
|
|
7
|
+
readonly secondary: "#BCA9CC";
|
|
8
|
+
readonly moon: "#F6EBC8";
|
|
9
|
+
readonly shadow: "#0A0510";
|
|
10
|
+
readonly grid: "rgba(241, 232, 214, 0.1)";
|
|
11
|
+
readonly baseline: "rgba(241, 232, 214, 0.55)";
|
|
12
|
+
readonly silk: "rgba(241, 232, 214, 0.85)";
|
|
13
|
+
readonly tag: "#EFE4CC";
|
|
14
|
+
readonly tagInk: "#2A1533";
|
|
15
|
+
};
|
|
16
|
+
/** Candlelight, kept for what the night itself lights: a pinned value and a comment. Groups never take it. */
|
|
17
|
+
export declare const HALLOWEEN_HUES: {
|
|
18
|
+
readonly candle: "#FFD24A";
|
|
19
|
+
};
|
|
20
|
+
/**
|
|
21
|
+
* The stones of a churchyard, which groups are told apart by: a headstone is stone, so a group is a
|
|
22
|
+
* material, not a bright. Pale marble, dark slate, buff sandstone, moss-weathered stone, rose granite
|
|
23
|
+
* and grey granite.
|
|
24
|
+
*/
|
|
25
|
+
export declare const HALLOWEEN_STONES: {
|
|
26
|
+
readonly marble: "#E6E1D8";
|
|
27
|
+
readonly slate: "#56637A";
|
|
28
|
+
readonly sandstone: "#C9A677";
|
|
29
|
+
readonly moss: "#6E8058";
|
|
30
|
+
readonly rose: "#D6B3B0";
|
|
31
|
+
readonly granite: "#949089";
|
|
32
|
+
};
|
|
33
|
+
/**
|
|
34
|
+
* The order groups take their stones in, set by lightness so neighbours part even for a reader who
|
|
35
|
+
* sees no hue at all: marble and slate are the lightest and nearly the darkest, so a two-group graph is
|
|
36
|
+
* always clear, and each stone after differs from the one before it by at least fifteen steps of
|
|
37
|
+
* lightness, for every kind of colour vision. Every stone stays well clear of the night behind it.
|
|
38
|
+
*/
|
|
39
|
+
export declare const HALLOWEEN_PALETTE: readonly string[];
|
|
40
|
+
/** For a colour that stands for a number: from embers in the dark up to candlelight, lighter as it rises. */
|
|
41
|
+
export declare const HALLOWEEN_COLORMAP: readonly string[];
|
|
42
|
+
/**
|
|
43
|
+
* The Halloween look: a moonlit night inside the graph with no frame round it, a faint grid, a bone
|
|
44
|
+
* baseline, a goal line spun as a spider's thread, a shaded period as a drift of mist, and notes
|
|
45
|
+
* written on paper tags. Titles are set in Creepster and everything else in Nunito.
|
|
46
|
+
*/
|
|
47
|
+
export declare const halloweenStyles: Stylesheet;
|
package/fonts.css
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
/* Creepster for the titles, Cinzel for the numbers carved into the headstones, and Nunito for everything else, the faces the theme's stylesheet names. Import this once, before the first graph is measured. */
|
|
2
|
+
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Creepster&family=Nunito:wght@400;600;700;800&display=swap');
|
|
@@ -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.
|