@graphysdk/react-renderer 0.0.1-plugins.8 → 1.8.1-beta.1786024899180
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 +42 -3
- package/dist/editable.cjs +1 -0
- package/dist/editable.css +1 -0
- package/dist/editable.d.ts +4034 -0
- package/dist/editable.mjs +2829 -0
- package/dist/font-values-BOsqFcT9.js +425 -0
- package/dist/font-values-DAorZ_7T.cjs +2 -0
- package/dist/graph-config.cjs +1 -0
- package/dist/graph-config.d.ts +285 -0
- package/dist/graph-config.mjs +58 -0
- package/dist/history-chords-HlgDDT-6.js +8955 -0
- package/dist/history-chords-xdwpWM21.cjs +1 -0
- package/dist/history-chords.css +1 -0
- package/dist/index.cjs +1 -3
- package/dist/index.css +1 -1
- package/dist/index.d.ts +912 -324
- package/dist/index.mjs +685 -4620
- package/package.json +50 -22
|
@@ -0,0 +1,285 @@
|
|
|
1
|
+
import { GraphConfig } from '@graphysdk/viz-engine/graph-config';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Extracts the renderer-side half of a `GraphConfig` — `themeOverrides` and the fonts named by
|
|
5
|
+
* `appearance.textStyle` — as {@link ThemeOverrides} to hand to `<GraphProvider themeOverrides>`.
|
|
6
|
+
* The data half goes through viz-engine's `convertGraphConfig`.
|
|
7
|
+
*
|
|
8
|
+
* `fontList` resolves the font *ids* a config stores into the CSS families to render them with; omit
|
|
9
|
+
* it and `textStyle` is ignored.
|
|
10
|
+
*/
|
|
11
|
+
export declare const convertGraphConfigTheme: (config: GraphConfig, fontList?: FontListInput) => ThemeOverrides;
|
|
12
|
+
|
|
13
|
+
declare const FONT_STYLES: readonly ["normal", "italic", "oblique"];
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
* A CSS length keeping its unit so measurement can treat it like CSS paint does: em scales with
|
|
17
|
+
* `textScale` (see `emToPx`), px stays absolute.
|
|
18
|
+
*/
|
|
19
|
+
declare interface FontLength {
|
|
20
|
+
value: number;
|
|
21
|
+
unit: 'px' | 'em';
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/** Host font catalog mapping each font id a `GraphConfig` may reference to a CSS `font-family` string. */
|
|
25
|
+
export declare type FontListInput = Array<{
|
|
26
|
+
id: string;
|
|
27
|
+
fontFamily: string;
|
|
28
|
+
}>;
|
|
29
|
+
|
|
30
|
+
/** A CSS `font-style` keyword accepted by a measured font token override. */
|
|
31
|
+
declare type FontStyle = (typeof FONT_STYLES)[number];
|
|
32
|
+
|
|
33
|
+
/**
|
|
34
|
+
* A structured override of a measured font token. Omitted fields keep the token's default (which
|
|
35
|
+
* still cascades from the leaf tokens, e.g. `fontSizeXs`), so `{ weight: 600 }` changes only the
|
|
36
|
+
* weight.
|
|
37
|
+
*/
|
|
38
|
+
declare interface FontTokenOverride {
|
|
39
|
+
family?: string;
|
|
40
|
+
weight?: number;
|
|
41
|
+
style?: FontStyle;
|
|
42
|
+
size?: FontLength;
|
|
43
|
+
/** Unitless multiplier; sizes HTML line boxes (legend band). Canvas measurement ignores it. */
|
|
44
|
+
lineHeight?: number;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/**
|
|
48
|
+
* The element font tokens JS measurement reproduces. Overridden structurally
|
|
49
|
+
* ({@link FontTokenOverride}); the CSS variable's shorthand is serialized from the same object
|
|
50
|
+
* measurement reads, so paint and layout move together.
|
|
51
|
+
*/
|
|
52
|
+
declare type MeasuredFontTokenKey = 'fontDataLabel' | 'fontStackTotal' | 'fontCategoryLabel' | 'fontTickLabel' | 'fontAxisLabel' | 'fontLegendLabel' | 'fontGoalLineLabel';
|
|
53
|
+
|
|
54
|
+
/**
|
|
55
|
+
* A partial set of token values layered over a base theme — the shape of the `themeOverrides`
|
|
56
|
+
* prop. Measured font tokens take a {@link FontTokenOverride}; every other token takes its CSS
|
|
57
|
+
* string value.
|
|
58
|
+
*/
|
|
59
|
+
declare type ThemeOverrides = Partial<Omit<ThemeValues, MeasuredFontTokenKey>> & {
|
|
60
|
+
[Key in MeasuredFontTokenKey]?: FontTokenOverride;
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
/** Every theme token mapped to its resolved CSS string value. */
|
|
64
|
+
declare type ThemeValues = Record<keyof typeof vars, string>;
|
|
65
|
+
|
|
66
|
+
/** CSS custom-property references for every theme token; read at paint sites as `vars.tooltipBackground`, etc. */
|
|
67
|
+
declare const vars: {
|
|
68
|
+
white: `var(--${string})`;
|
|
69
|
+
black: `var(--${string})`;
|
|
70
|
+
transparent: `var(--${string})`;
|
|
71
|
+
grey100: `var(--${string})`;
|
|
72
|
+
grey95: `var(--${string})`;
|
|
73
|
+
grey90: `var(--${string})`;
|
|
74
|
+
grey85: `var(--${string})`;
|
|
75
|
+
grey80: `var(--${string})`;
|
|
76
|
+
grey75: `var(--${string})`;
|
|
77
|
+
grey70: `var(--${string})`;
|
|
78
|
+
grey60: `var(--${string})`;
|
|
79
|
+
grey50: `var(--${string})`;
|
|
80
|
+
grey0: `var(--${string})`;
|
|
81
|
+
greyGradient80: `var(--${string})`;
|
|
82
|
+
green60: `var(--${string})`;
|
|
83
|
+
green50: `var(--${string})`;
|
|
84
|
+
red60: `var(--${string})`;
|
|
85
|
+
red50: `var(--${string})`;
|
|
86
|
+
amber70: `var(--${string})`;
|
|
87
|
+
amber50: `var(--${string})`;
|
|
88
|
+
amber40: `var(--${string})`;
|
|
89
|
+
amber30: `var(--${string})`;
|
|
90
|
+
blue80: `var(--${string})`;
|
|
91
|
+
blue60: `var(--${string})`;
|
|
92
|
+
purple50: `var(--${string})`;
|
|
93
|
+
purple30: `var(--${string})`;
|
|
94
|
+
brand: `var(--${string})`;
|
|
95
|
+
success: `var(--${string})`;
|
|
96
|
+
warning: `var(--${string})`;
|
|
97
|
+
alert: `var(--${string})`;
|
|
98
|
+
textPrimary: `var(--${string})`;
|
|
99
|
+
textSecondary: `var(--${string})`;
|
|
100
|
+
textDisabled: `var(--${string})`;
|
|
101
|
+
iconPrimary: `var(--${string})`;
|
|
102
|
+
iconSecondary: `var(--${string})`;
|
|
103
|
+
iconStickerBackground: `var(--${string})`;
|
|
104
|
+
border100: `var(--${string})`;
|
|
105
|
+
border50: `var(--${string})`;
|
|
106
|
+
border10: `var(--${string})`;
|
|
107
|
+
sunkenBackground: `var(--${string})`;
|
|
108
|
+
defaultBackground: `var(--${string})`;
|
|
109
|
+
raisedBackground: `var(--${string})`;
|
|
110
|
+
overlayBackground: `var(--${string})`;
|
|
111
|
+
overlayBorderGradient: `var(--${string})`;
|
|
112
|
+
graphBackground: `var(--${string})`;
|
|
113
|
+
gridLineColor: `var(--${string})`;
|
|
114
|
+
originLineColor: `var(--${string})`;
|
|
115
|
+
legendBackground: `var(--${string})`;
|
|
116
|
+
legendBorderColor: `var(--${string})`;
|
|
117
|
+
legendFocusOutlineColor: `var(--${string})`;
|
|
118
|
+
legendTextColor: `var(--${string})`;
|
|
119
|
+
dimmedSeriesLabelTextColor: `var(--${string})`;
|
|
120
|
+
dimmedSeriesLabelLineColor: `var(--${string})`;
|
|
121
|
+
trendNegativeColor: `var(--${string})`;
|
|
122
|
+
trendPositiveColor: `var(--${string})`;
|
|
123
|
+
trendNeutralColor: `var(--${string})`;
|
|
124
|
+
defaultAnnotationArrowStroke: `var(--${string})`;
|
|
125
|
+
defaultAnnotationShapeStroke: `var(--${string})`;
|
|
126
|
+
defaultAnnotationShapeFill: `var(--${string})`;
|
|
127
|
+
arrowAnnotationStickerOutlineColor: `var(--${string})`;
|
|
128
|
+
arrowAnnotationStickerOutlineColorInverse: `var(--${string})`;
|
|
129
|
+
annotationFrameBorderColor: `var(--${string})`;
|
|
130
|
+
editMenuTriggerIconColor: `var(--${string})`;
|
|
131
|
+
heatmapEmptyTileBackground: `var(--${string})`;
|
|
132
|
+
dataLabelOutsideBackground: `var(--${string})`;
|
|
133
|
+
dataLabelTextColor: `var(--${string})`;
|
|
134
|
+
dataLabelInsideTextColor: `var(--${string})`;
|
|
135
|
+
stackTotalTextColor: `var(--${string})`;
|
|
136
|
+
stackTotalBackground: `var(--${string})`;
|
|
137
|
+
stackTotalStroke: `var(--${string})`;
|
|
138
|
+
gridLineWidth: `var(--${string})`;
|
|
139
|
+
gridLineDash: `var(--${string})`;
|
|
140
|
+
gridLineDotted: `var(--${string})`;
|
|
141
|
+
tooltipBorderRadius: `var(--${string})`;
|
|
142
|
+
tooltipBorderWidth: `var(--${string})`;
|
|
143
|
+
tooltipPaddingBlock: `var(--${string})`;
|
|
144
|
+
tooltipPaddingInline: `var(--${string})`;
|
|
145
|
+
tooltipRowGap: `var(--${string})`;
|
|
146
|
+
tooltipShadow: `var(--${string})`;
|
|
147
|
+
editorControlHeight: `var(--${string})`;
|
|
148
|
+
tickLabelOffset: `var(--${string})`;
|
|
149
|
+
legendItemGap: `var(--${string})`;
|
|
150
|
+
legendSwatchGap: `var(--${string})`;
|
|
151
|
+
legendSwatchWidth: `var(--${string})`;
|
|
152
|
+
legendSwatchHeight: `var(--${string})`;
|
|
153
|
+
legendPillPaddingInline: `var(--${string})`;
|
|
154
|
+
legendPillPaddingBlock: `var(--${string})`;
|
|
155
|
+
legendPillBorderWidth: `var(--${string})`;
|
|
156
|
+
headlineRowGap: `var(--${string})`;
|
|
157
|
+
headlineItemGap: `var(--${string})`;
|
|
158
|
+
canvasDefault: `var(--${string})`;
|
|
159
|
+
canvasBlue: `var(--${string})`;
|
|
160
|
+
canvasCyan: `var(--${string})`;
|
|
161
|
+
canvasGreen: `var(--${string})`;
|
|
162
|
+
canvasYellow: `var(--${string})`;
|
|
163
|
+
canvasOrange: `var(--${string})`;
|
|
164
|
+
canvasRed: `var(--${string})`;
|
|
165
|
+
canvasPink: `var(--${string})`;
|
|
166
|
+
canvasPurple: `var(--${string})`;
|
|
167
|
+
canvasGray: `var(--${string})`;
|
|
168
|
+
canvasInverse: `var(--${string})`;
|
|
169
|
+
elevationXs: `var(--${string})`;
|
|
170
|
+
elevationSm: `var(--${string})`;
|
|
171
|
+
elevationMd: `var(--${string})`;
|
|
172
|
+
elevationLg: `var(--${string})`;
|
|
173
|
+
radiiXs: `var(--${string})`;
|
|
174
|
+
radiiSm: `var(--${string})`;
|
|
175
|
+
radiiMd: `var(--${string})`;
|
|
176
|
+
radiiLg: `var(--${string})`;
|
|
177
|
+
spaceXxs: `var(--${string})`;
|
|
178
|
+
spaceXs: `var(--${string})`;
|
|
179
|
+
spaceSm: `var(--${string})`;
|
|
180
|
+
spaceMd: `var(--${string})`;
|
|
181
|
+
spaceLg: `var(--${string})`;
|
|
182
|
+
spaceXl: `var(--${string})`;
|
|
183
|
+
zIndexToolbar: `var(--${string})`;
|
|
184
|
+
zIndexToolbarTooltip: `var(--${string})`;
|
|
185
|
+
zIndexToolbarPopover: `var(--${string})`;
|
|
186
|
+
zIndexEditorPopover: `var(--${string})`;
|
|
187
|
+
toolbarBackgroundColor: `var(--${string})`;
|
|
188
|
+
toolbarButtonBackgroundColor: `var(--${string})`;
|
|
189
|
+
toolbarButtonBackgroundColorHovered: `var(--${string})`;
|
|
190
|
+
toolbarButtonBackgroundColorSelected: `var(--${string})`;
|
|
191
|
+
toolbarSeparatorColor: `var(--${string})`;
|
|
192
|
+
tooltipBackground: `var(--${string})`;
|
|
193
|
+
tooltipBorderColor: `var(--${string})`;
|
|
194
|
+
tooltipHeadingTextColor: `var(--${string})`;
|
|
195
|
+
tooltipLabelTextColor: `var(--${string})`;
|
|
196
|
+
tooltipValueTextColor: `var(--${string})`;
|
|
197
|
+
tooltipPrimaryRowColor: `var(--${string})`;
|
|
198
|
+
hoverGuideLineColor: `var(--${string})`;
|
|
199
|
+
hoverGuideFillColor: `var(--${string})`;
|
|
200
|
+
fontFamilyDefault: `var(--${string})`;
|
|
201
|
+
fontFamilyHeading: `var(--${string})`;
|
|
202
|
+
fontWeightRegular: `var(--${string})`;
|
|
203
|
+
fontWeightMedium: `var(--${string})`;
|
|
204
|
+
fontWeightSemibold: `var(--${string})`;
|
|
205
|
+
fontWeightBold: `var(--${string})`;
|
|
206
|
+
fontWeightExtraBold: `var(--${string})`;
|
|
207
|
+
fontWeightBlack: `var(--${string})`;
|
|
208
|
+
textScale: `var(--${string})`;
|
|
209
|
+
fontSizeXxs: `var(--${string})`;
|
|
210
|
+
fontSizeXs: `var(--${string})`;
|
|
211
|
+
fontSizeSm: `var(--${string})`;
|
|
212
|
+
fontSizeMd: `var(--${string})`;
|
|
213
|
+
fontSizeLg: `var(--${string})`;
|
|
214
|
+
fontSizeXl: `var(--${string})`;
|
|
215
|
+
fontLineHeightXxs: `var(--${string})`;
|
|
216
|
+
fontLineHeightXs: `var(--${string})`;
|
|
217
|
+
fontLineHeightSm: `var(--${string})`;
|
|
218
|
+
fontLineHeightMd: `var(--${string})`;
|
|
219
|
+
fontLineHeightLg: `var(--${string})`;
|
|
220
|
+
fontLineHeightXl: `var(--${string})`;
|
|
221
|
+
fontSizeEditorBody: `var(--${string})`;
|
|
222
|
+
fontSizeHeadingSm: `var(--${string})`;
|
|
223
|
+
fontSizeHeadingMd: `var(--${string})`;
|
|
224
|
+
fontSizeHeadingLg: `var(--${string})`;
|
|
225
|
+
fontLineHeightEditorBody: `var(--${string})`;
|
|
226
|
+
fontLineHeightHeadingSm: `var(--${string})`;
|
|
227
|
+
fontLineHeightHeadingMd: `var(--${string})`;
|
|
228
|
+
fontLineHeightHeadingLg: `var(--${string})`;
|
|
229
|
+
fontTickLabel: `var(--${string})`;
|
|
230
|
+
fontAxisLabel: `var(--${string})`;
|
|
231
|
+
fontDataLabel: `var(--${string})`;
|
|
232
|
+
fontStackTotal: `var(--${string})`;
|
|
233
|
+
fontCategoryLabel: `var(--${string})`;
|
|
234
|
+
fontLegendLabel: `var(--${string})`;
|
|
235
|
+
fontSeriesLabel: `var(--${string})`;
|
|
236
|
+
fontTooltipLabel: `var(--${string})`;
|
|
237
|
+
fontTooltipHeading: `var(--${string})`;
|
|
238
|
+
fontTooltipFooter: `var(--${string})`;
|
|
239
|
+
fontJumboTooltipLabel: `var(--${string})`;
|
|
240
|
+
fontJumboTooltip: `var(--${string})`;
|
|
241
|
+
fontMiniTooltipLabel: `var(--${string})`;
|
|
242
|
+
fontMiniTooltipFooter: `var(--${string})`;
|
|
243
|
+
fontTooltipCaption: `var(--${string})`;
|
|
244
|
+
fontTooltipCaptionSmall: `var(--${string})`;
|
|
245
|
+
fontTrendTag: `var(--${string})`;
|
|
246
|
+
fontTrendTagSmall: `var(--${string})`;
|
|
247
|
+
fontGoalLineLabel: `var(--${string})`;
|
|
248
|
+
fontPieLabel: `var(--${string})`;
|
|
249
|
+
fontPieChartTotal: `var(--${string})`;
|
|
250
|
+
fontDifferenceArrowSmall: `var(--${string})`;
|
|
251
|
+
fontDifferenceArrowMedium: `var(--${string})`;
|
|
252
|
+
fontDifferenceArrowLarge: `var(--${string})`;
|
|
253
|
+
fontButton: `var(--${string})`;
|
|
254
|
+
fontInput: `var(--${string})`;
|
|
255
|
+
fontInputLabel: `var(--${string})`;
|
|
256
|
+
fontSelectLabel: `var(--${string})`;
|
|
257
|
+
fontSelectDescription: `var(--${string})`;
|
|
258
|
+
fontColorSelectLabel: `var(--${string})`;
|
|
259
|
+
fontMenuTitle: `var(--${string})`;
|
|
260
|
+
fontMenuGroupTitle: `var(--${string})`;
|
|
261
|
+
fontMenuItemLabel: `var(--${string})`;
|
|
262
|
+
fontMenuItemLabelSecondary: `var(--${string})`;
|
|
263
|
+
fontUITooltip: `var(--${string})`;
|
|
264
|
+
fontUITooltipSecondary: `var(--${string})`;
|
|
265
|
+
fontErrorBoundaryTitle: `var(--${string})`;
|
|
266
|
+
fontErrorBoundaryMessage: `var(--${string})`;
|
|
267
|
+
fontTableCell: `var(--${string})`;
|
|
268
|
+
fontTableHeaderCell: `var(--${string})`;
|
|
269
|
+
fontSourceLabel: `var(--${string})`;
|
|
270
|
+
fontSourceLink: `var(--${string})`;
|
|
271
|
+
fontTextEditorH1: `var(--${string})`;
|
|
272
|
+
fontTextEditorH2: `var(--${string})`;
|
|
273
|
+
fontTextEditorH3: `var(--${string})`;
|
|
274
|
+
fontTextEditorH6: `var(--${string})`;
|
|
275
|
+
fontTextEditorBody: `var(--${string})`;
|
|
276
|
+
fontTextEditorLink: `var(--${string})`;
|
|
277
|
+
fontHighlightModeTitle: `var(--${string})`;
|
|
278
|
+
fontHighlightModeSubtitle: `var(--${string})`;
|
|
279
|
+
fontEditorControlLabel: `var(--${string})`;
|
|
280
|
+
fontEditorControlValue: `var(--${string})`;
|
|
281
|
+
fontEditorSectionTitle: `var(--${string})`;
|
|
282
|
+
fontEditorCaption: `var(--${string})`;
|
|
283
|
+
};
|
|
284
|
+
|
|
285
|
+
export { }
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { i as v, n as h, p, r as m, t as g } from "./font-values-BOsqFcT9.js";
|
|
2
|
+
var w = (r, e) => {
|
|
3
|
+
const n = r.appearance?.textStyle;
|
|
4
|
+
return {
|
|
5
|
+
...b(r.themeOverrides),
|
|
6
|
+
...e && n ? F(n, e) : void 0
|
|
7
|
+
};
|
|
8
|
+
}, y = (r) => {
|
|
9
|
+
const e = r.trim().replace(/\s*\/\s*/g, "/").split(/\s+/);
|
|
10
|
+
let n = "normal", i = 400, t = 0;
|
|
11
|
+
for (; t < e.length; ) {
|
|
12
|
+
const s = e[t];
|
|
13
|
+
if (s === void 0) return null;
|
|
14
|
+
if (s === "normal") t++;
|
|
15
|
+
else if (g(s))
|
|
16
|
+
n = s, t++;
|
|
17
|
+
else {
|
|
18
|
+
const u = m(s);
|
|
19
|
+
if (u === null) break;
|
|
20
|
+
i = u, t++;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
const o = e[t];
|
|
24
|
+
if (o === void 0) return null;
|
|
25
|
+
const [a = "", l] = o.split("/"), d = h(a);
|
|
26
|
+
if (d === null) return null;
|
|
27
|
+
const c = l === void 0 ? null : v(l), f = e.slice(t + 1).join(" ").trim();
|
|
28
|
+
return f === "" ? null : {
|
|
29
|
+
style: n,
|
|
30
|
+
weight: i,
|
|
31
|
+
size: d,
|
|
32
|
+
family: f,
|
|
33
|
+
...c !== null ? { lineHeight: c } : {}
|
|
34
|
+
};
|
|
35
|
+
}, F = (r, e) => {
|
|
36
|
+
const n = (o) => o === void 0 ? void 0 : e.find((a) => a.id === o)?.fontFamily, i = n(r.body?.fontId), t = n(r.heading?.fontId);
|
|
37
|
+
return {
|
|
38
|
+
...i ? { fontFamilyDefault: i } : void 0,
|
|
39
|
+
...t ? { fontFamilyHeading: t } : void 0
|
|
40
|
+
};
|
|
41
|
+
}, b = (r) => {
|
|
42
|
+
if (r === void 0) return;
|
|
43
|
+
const e = {};
|
|
44
|
+
for (const [n, i] of Object.entries(r)) if (p(n) && typeof i == "string") {
|
|
45
|
+
const t = y(i);
|
|
46
|
+
if (t === null) {
|
|
47
|
+
k(n, i);
|
|
48
|
+
continue;
|
|
49
|
+
}
|
|
50
|
+
e[n] = t;
|
|
51
|
+
} else e[n] = i;
|
|
52
|
+
return e;
|
|
53
|
+
}, k = (r, e) => {
|
|
54
|
+
process.env.NODE_ENV !== "production" && console.warn(`[react-renderer] Ignoring GraphConfig themeOverrides."${r}": "${e}" is not a measurable font shorthand (needs a px/em size and a family).`);
|
|
55
|
+
};
|
|
56
|
+
export {
|
|
57
|
+
w as convertGraphConfigTheme
|
|
58
|
+
};
|