@czi-sds/data-viz 2.4.3 → 2.5.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/dist/ProteinStructureScene.cjs.d.ts +2 -0
- package/dist/ProteinStructureScene.cjs.js +5 -0
- package/dist/ProteinStructureScene.esm.d.ts +2 -0
- package/dist/ProteinStructureScene.esm.js +3 -0
- package/dist/ProteinStructureViewer.cjs.d.ts +3 -2
- package/dist/ProteinStructureViewer.cjs.js +9 -5
- package/dist/ProteinStructureViewer.esm.d.ts +3 -2
- package/dist/ProteinStructureViewer.esm.js +3 -2
- package/dist/StackedBarChart.cjs.d.ts +1 -1
- package/dist/StackedBarChart.esm.d.ts +1 -1
- package/dist/index.cjs.d.ts +4 -3
- package/dist/index.cjs.js +9 -5
- package/dist/index.esm.d.ts +4 -3
- package/dist/index.esm.js +3 -2
- package/dist/shared/HeatmapChart.cjs.js +2 -1
- package/dist/shared/ProteinStructureViewer.cjs.js +438 -1351
- package/dist/shared/ProteinStructureViewer.esm.js +413 -1297
- package/dist/shared/StackedBarChart.cjs.js +2 -1
- package/dist/shared/chunk.cjs.js +29 -0
- package/dist/shared/index2.cjs.d.ts +306 -54
- package/dist/shared/index2.esm.d.ts +305 -55
- package/dist/shared/index3.cjs.d.ts +66 -163
- package/dist/shared/index3.esm.d.ts +67 -162
- package/dist/shared/index4.cjs.d.ts +166 -0
- package/dist/shared/index4.esm.d.ts +166 -0
- package/dist/shared/objectSpread2.cjs.js +0 -28
- package/dist/shared/renderStructureImage.cjs.js +2360 -0
- package/dist/shared/renderStructureImage.esm.js +2157 -0
- package/package.json +12 -2
|
@@ -1,166 +1,71 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
2
|
+
import { t as ColorScale } from "./colorScales.esm.js";
|
|
3
|
+
import { u as ProteinStructureViewerProps } from "./index2.esm.js";
|
|
4
|
+
import { Color } from "molstar/lib/mol-util/color";
|
|
4
5
|
|
|
5
|
-
//#region src/core/
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
* A unit for this item's counted value, for data that mixes units across
|
|
23
|
-
* categories.
|
|
24
|
-
*/
|
|
25
|
-
unit?: string;
|
|
26
|
-
/**
|
|
27
|
-
* Takes the segment and its legend item out of every interaction: no hover,
|
|
28
|
-
* no tooltip, no selection.
|
|
29
|
-
* @default false
|
|
30
|
-
*/
|
|
31
|
-
disabled?: boolean;
|
|
32
|
-
/**
|
|
33
|
-
* Content for a TooltipTable shown above the segment on hover. Use it for the
|
|
34
|
-
* breakdown behind the number; a segment without it has no tooltip.
|
|
35
|
-
*/
|
|
36
|
-
tooltip?: TooltipTableContentProps;
|
|
37
|
-
}
|
|
38
|
-
interface StackedBarChartProps extends HTMLAttributes<HTMLDivElement> {
|
|
39
|
-
/**
|
|
40
|
-
* A heading above the bar. It is also what makes room for the badge; with no
|
|
41
|
-
* title, no badge is drawn.
|
|
42
|
-
*/
|
|
43
|
-
title?: string;
|
|
44
|
-
/**
|
|
45
|
-
* Overrides the badge text, which otherwise counts the data and the selection
|
|
46
|
-
* ("7", or "3 of 7").
|
|
47
|
-
*/
|
|
48
|
-
badge?: string;
|
|
49
|
-
/**
|
|
50
|
-
* Removes the badge, leaving the title on its own.
|
|
51
|
-
* @default false
|
|
52
|
-
*/
|
|
53
|
-
hideBadge?: boolean;
|
|
54
|
-
/**
|
|
55
|
-
* The segments, in the order they are drawn.
|
|
56
|
-
*/
|
|
57
|
-
data: StackedBarChartDataItem[];
|
|
58
|
-
/**
|
|
59
|
-
* Any CSS width; a number is read as pixels. It sets the width of the whole
|
|
60
|
-
* chart, legend included.
|
|
61
|
-
* @default 100%
|
|
62
|
-
*/
|
|
63
|
-
width?: number | string;
|
|
64
|
-
/**
|
|
65
|
-
* Height of the bar in pixels. Values below 1 are clamped to 1, so the bar
|
|
66
|
-
* cannot disappear.
|
|
67
|
-
* @default 16
|
|
68
|
-
*/
|
|
69
|
-
barHeight?: number;
|
|
70
|
-
/**
|
|
71
|
-
* Draws the legend below the bar. It is the only place segment names appear,
|
|
72
|
-
* and the only part of the chart a keyboard can reach.
|
|
73
|
-
* @default true
|
|
74
|
-
*/
|
|
75
|
-
showLegend?: boolean;
|
|
76
|
-
/**
|
|
77
|
-
* Shows each item's value beside its name in the legend.
|
|
78
|
-
* @default true
|
|
79
|
-
*/
|
|
80
|
-
showLegendValues?: boolean;
|
|
81
|
-
/**
|
|
82
|
-
* "percentage" shows the segment's share of the bar, rounded. "count" shows
|
|
83
|
-
* the raw value followed by the item's unit, or the chart's unit if the item
|
|
84
|
-
* has none.
|
|
85
|
-
* @default "percentage"
|
|
86
|
-
*/
|
|
87
|
-
legendValueFormat?: "percentage" | "count";
|
|
88
|
-
/**
|
|
89
|
-
* Indices into data that are currently selected. The chart is controlled: it
|
|
90
|
-
* draws this and never changes it.
|
|
91
|
-
*/
|
|
92
|
-
selectedIndices?: number[];
|
|
93
|
-
/**
|
|
94
|
-
* Called with the next selection when a segment or legend item is clicked.
|
|
95
|
-
* Without it, clicking selects nothing.
|
|
96
|
-
*/
|
|
97
|
-
onSelectionChange?: (selectedIndices: number[], selectedData: StackedBarChartDataItem[]) => void;
|
|
98
|
-
/**
|
|
99
|
-
* Called when the pointer enters a segment. The chart already syncs its own
|
|
100
|
-
* hover highlight between bar and legend, so this is for driving something
|
|
101
|
-
* outside it.
|
|
102
|
-
*/
|
|
103
|
-
onSegmentMouseEnter?: (item: StackedBarChartDataItem, index: number) => void;
|
|
104
|
-
/**
|
|
105
|
-
* Called when the pointer leaves a segment.
|
|
106
|
-
*/
|
|
107
|
-
onSegmentMouseLeave?: (item: StackedBarChartDataItem, index: number) => void;
|
|
108
|
-
/**
|
|
109
|
-
* Called when the pointer enters a legend item.
|
|
110
|
-
*/
|
|
111
|
-
onLegendItemMouseEnter?: (item: StackedBarChartDataItem, index: number) => void;
|
|
112
|
-
/**
|
|
113
|
-
* Called when the pointer leaves a legend item.
|
|
114
|
-
*/
|
|
115
|
-
onLegendItemMouseLeave?: (item: StackedBarChartDataItem, index: number) => void;
|
|
116
|
-
/**
|
|
117
|
-
* Fires on a segment click, alongside any selection change rather than
|
|
118
|
-
* instead of it.
|
|
119
|
-
*/
|
|
120
|
-
onSegmentClick?: (item: StackedBarChartDataItem, index: number) => void;
|
|
121
|
-
/**
|
|
122
|
-
* The same, for a click on a legend item.
|
|
123
|
-
*/
|
|
124
|
-
onLegendItemClick?: (item: StackedBarChartDataItem, index: number) => void;
|
|
125
|
-
/**
|
|
126
|
-
* What a selection does to the unselected segments: fade them to 20% opacity,
|
|
127
|
-
* or drop them from the bar and let the rest take the space.
|
|
128
|
-
* @default "dim"
|
|
129
|
-
*/
|
|
130
|
-
selectionBehavior?: "dim" | "hide";
|
|
131
|
-
/**
|
|
132
|
-
* Whether the bar shows a breakdown of the data (segments always fill it) or
|
|
133
|
-
* progress towards maxAmount.
|
|
134
|
-
* @default "proportional"
|
|
135
|
-
*/
|
|
136
|
-
mode?: "proportional" | "cumulative";
|
|
137
|
-
/**
|
|
138
|
-
* Cumulative mode only. The value the full bar represents. Any difference
|
|
139
|
-
* between it and the sum of the data is drawn as the Remaining segment.
|
|
140
|
-
*/
|
|
141
|
-
maxAmount?: number;
|
|
142
|
-
/**
|
|
143
|
-
* Name of the grey gap segment in cumulative mode.
|
|
144
|
-
* @default "Remaining"
|
|
145
|
-
*/
|
|
146
|
-
remainingLabel?: string;
|
|
147
|
-
/**
|
|
148
|
-
* A unit for the Remaining segment's value alone.
|
|
149
|
-
*/
|
|
150
|
-
remainingUnit?: string;
|
|
151
|
-
/**
|
|
152
|
-
* The unit appended to counted values, for items that do not carry one of
|
|
153
|
-
* their own.
|
|
154
|
-
*/
|
|
155
|
-
unit?: string;
|
|
156
|
-
/**
|
|
157
|
-
* Tunes the generated palette (start hue, rotations, lightness range, gamma).
|
|
158
|
-
* Items with their own color are untouched by it.
|
|
159
|
-
*/
|
|
160
|
-
colorGeneratorOptions?: DiscreteColorGeneratorOptions;
|
|
161
|
-
}
|
|
6
|
+
//#region src/core/ProteinStructureViewer/utils/structureFormat.d.ts
|
|
7
|
+
/**
|
|
8
|
+
* Structure text formats Mol* can parse from the viewer's `structure` prop.
|
|
9
|
+
*
|
|
10
|
+
* `"mmcif"` covers both mmCIF and PDBx; they are the same text format, and
|
|
11
|
+
* that is the name Mol*'s trajectory parser uses. Binary CIF (`.bcif`) is not
|
|
12
|
+
* accepted: the prop is a string.
|
|
13
|
+
*/
|
|
14
|
+
type StructureFormat = "pdb" | "mmcif";
|
|
15
|
+
/**
|
|
16
|
+
* Infers whether `text` is PDB or mmCIF (PDBx).
|
|
17
|
+
*
|
|
18
|
+
* mmCIF documents start with a `data_` block and name their coordinates
|
|
19
|
+
* `_atom_site.`. PDB never does either, so either marker is enough. A leading
|
|
20
|
+
* comment (`# ...`) before `data_` is still mmCIF.
|
|
21
|
+
*/
|
|
22
|
+
declare function detectStructureFormat(text: string): StructureFormat;
|
|
162
23
|
//#endregion
|
|
163
|
-
//#region src/core/
|
|
164
|
-
|
|
24
|
+
//#region src/core/ProteinStructureViewer/utils/plddt.d.ts
|
|
25
|
+
/**
|
|
26
|
+
* AlphaFold's pLDDT confidence bands. Thresholds are on the 0-1 scale that
|
|
27
|
+
* `plddt` values use, ascending from lowest to highest confidence.
|
|
28
|
+
*/
|
|
29
|
+
declare const PLDDT_COLOR_SCALE: ColorScale;
|
|
30
|
+
/**
|
|
31
|
+
* Rewrites a PDB file's B-factor column with pLDDT scores so Mol* can read them
|
|
32
|
+
* off the parsed model. B-factors occupy columns 60-66 of ATOM/HETATM lines;
|
|
33
|
+
* scores arrive on a 0-1 scale and are stored on the conventional 0-100 one.
|
|
34
|
+
* Residues past the end of `plddtValues` fall back to a mid-confidence 50.
|
|
35
|
+
*
|
|
36
|
+
* A residue is identified by chain, sequence number and insertion code. The
|
|
37
|
+
* code has to be part of that: `10` and `10A` are two residues, Mol* counts
|
|
38
|
+
* them as two, and treating them as one here would hand every residue after
|
|
39
|
+
* them its neighbour's score.
|
|
40
|
+
*/
|
|
41
|
+
declare function injectPlddtIntoPdb(pdbData: string, plddtValues: number[]): string;
|
|
42
|
+
/**
|
|
43
|
+
* Rewrites an mmCIF (PDBx) file's `_atom_site.B_iso_or_equiv` column with
|
|
44
|
+
* pLDDT scores so Mol* can read them off the parsed model, the same way
|
|
45
|
+
* `injectPlddtIntoPdb` rewrites the PDB B-factor column. Scores arrive on a
|
|
46
|
+
* 0-1 scale and are stored on the conventional 0-100 one. Residues past the
|
|
47
|
+
* end of `plddtValues` fall back to a mid-confidence 50.
|
|
48
|
+
*
|
|
49
|
+
* If the file has no B-factor column, one is appended to the atom-site loop
|
|
50
|
+
* rather than leaving the scores behind.
|
|
51
|
+
*/
|
|
52
|
+
declare function injectPlddtIntoMmcif(mmcifData: string, plddtValues: number[]): string;
|
|
53
|
+
/**
|
|
54
|
+
* Rewrites a structure file's B-factors with pLDDT scores. Dispatches to
|
|
55
|
+
* `injectPlddtIntoPdb` or `injectPlddtIntoMmcif` from `format`, or from
|
|
56
|
+
* detecting the format of `data` when `format` is omitted.
|
|
57
|
+
*/
|
|
58
|
+
declare function injectPlddt(data: string, plddtValues: number[], format?: StructureFormat): string;
|
|
165
59
|
//#endregion
|
|
166
|
-
|
|
60
|
+
//#region src/core/ProteinStructureViewer/utils/highlights.d.ts
|
|
61
|
+
/**
|
|
62
|
+
* Colors for highlights that name none, in the order the highlights are given.
|
|
63
|
+
* Saturated enough to stand out over a chain, pLDDT or overlay coloring, and
|
|
64
|
+
* wrapping around once they run out.
|
|
65
|
+
*/
|
|
66
|
+
declare const HIGHLIGHT_COLOR_PALETTE: readonly ["#E64545", "#F0C229", "#12A9A0", "#BD57D4", "#FF8A32", "#559DF3"];
|
|
67
|
+
//#endregion
|
|
68
|
+
//#region src/core/ProteinStructureViewer/index.d.ts
|
|
69
|
+
declare const _default: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<ProteinStructureViewerProps & import("react").RefAttributes<HTMLDivElement>>>;
|
|
70
|
+
//#endregion
|
|
71
|
+
export { injectPlddtIntoMmcif as a, detectStructureFormat as c, injectPlddt as i, HIGHLIGHT_COLOR_PALETTE as n, injectPlddtIntoPdb as o, PLDDT_COLOR_SCALE as r, StructureFormat as s, _default as t };
|
|
@@ -0,0 +1,166 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { HTMLAttributes } from "react";
|
|
3
|
+
import { DiscreteColorGeneratorOptions, TooltipTableContentProps } from "@czi-sds/components";
|
|
4
|
+
|
|
5
|
+
//#region src/core/StackedBarChart/StackedBarChart.types.d.ts
|
|
6
|
+
interface StackedBarChartDataItem {
|
|
7
|
+
/**
|
|
8
|
+
* The segment's label in the legend, and the key the animations track it by.
|
|
9
|
+
* Must be unique within the chart.
|
|
10
|
+
*/
|
|
11
|
+
name: string;
|
|
12
|
+
/**
|
|
13
|
+
* The quantity the segment stands for.
|
|
14
|
+
*/
|
|
15
|
+
value: number;
|
|
16
|
+
/**
|
|
17
|
+
* Any CSS color. Without it the segment takes a generated palette color,
|
|
18
|
+
* which can shift as categories come and go.
|
|
19
|
+
*/
|
|
20
|
+
color?: string;
|
|
21
|
+
/**
|
|
22
|
+
* A unit for this item's counted value, for data that mixes units across
|
|
23
|
+
* categories.
|
|
24
|
+
*/
|
|
25
|
+
unit?: string;
|
|
26
|
+
/**
|
|
27
|
+
* Takes the segment and its legend item out of every interaction: no hover,
|
|
28
|
+
* no tooltip, no selection.
|
|
29
|
+
* @default false
|
|
30
|
+
*/
|
|
31
|
+
disabled?: boolean;
|
|
32
|
+
/**
|
|
33
|
+
* Content for a TooltipTable shown above the segment on hover. Use it for the
|
|
34
|
+
* breakdown behind the number; a segment without it has no tooltip.
|
|
35
|
+
*/
|
|
36
|
+
tooltip?: TooltipTableContentProps;
|
|
37
|
+
}
|
|
38
|
+
interface StackedBarChartProps extends HTMLAttributes<HTMLDivElement> {
|
|
39
|
+
/**
|
|
40
|
+
* A heading above the bar. It is also what makes room for the badge; with no
|
|
41
|
+
* title, no badge is drawn.
|
|
42
|
+
*/
|
|
43
|
+
title?: string;
|
|
44
|
+
/**
|
|
45
|
+
* Overrides the badge text, which otherwise counts the data and the selection
|
|
46
|
+
* ("7", or "3 of 7").
|
|
47
|
+
*/
|
|
48
|
+
badge?: string;
|
|
49
|
+
/**
|
|
50
|
+
* Removes the badge, leaving the title on its own.
|
|
51
|
+
* @default false
|
|
52
|
+
*/
|
|
53
|
+
hideBadge?: boolean;
|
|
54
|
+
/**
|
|
55
|
+
* The segments, in the order they are drawn.
|
|
56
|
+
*/
|
|
57
|
+
data: StackedBarChartDataItem[];
|
|
58
|
+
/**
|
|
59
|
+
* Any CSS width; a number is read as pixels. It sets the width of the whole
|
|
60
|
+
* chart, legend included.
|
|
61
|
+
* @default 100%
|
|
62
|
+
*/
|
|
63
|
+
width?: number | string;
|
|
64
|
+
/**
|
|
65
|
+
* Height of the bar in pixels. Values below 1 are clamped to 1, so the bar
|
|
66
|
+
* cannot disappear.
|
|
67
|
+
* @default 16
|
|
68
|
+
*/
|
|
69
|
+
barHeight?: number;
|
|
70
|
+
/**
|
|
71
|
+
* Draws the legend below the bar. It is the only place segment names appear,
|
|
72
|
+
* and the only part of the chart a keyboard can reach.
|
|
73
|
+
* @default true
|
|
74
|
+
*/
|
|
75
|
+
showLegend?: boolean;
|
|
76
|
+
/**
|
|
77
|
+
* Shows each item's value beside its name in the legend.
|
|
78
|
+
* @default true
|
|
79
|
+
*/
|
|
80
|
+
showLegendValues?: boolean;
|
|
81
|
+
/**
|
|
82
|
+
* "percentage" shows the segment's share of the bar, rounded. "count" shows
|
|
83
|
+
* the raw value followed by the item's unit, or the chart's unit if the item
|
|
84
|
+
* has none.
|
|
85
|
+
* @default "percentage"
|
|
86
|
+
*/
|
|
87
|
+
legendValueFormat?: "percentage" | "count";
|
|
88
|
+
/**
|
|
89
|
+
* Indices into data that are currently selected. The chart is controlled: it
|
|
90
|
+
* draws this and never changes it.
|
|
91
|
+
*/
|
|
92
|
+
selectedIndices?: number[];
|
|
93
|
+
/**
|
|
94
|
+
* Called with the next selection when a segment or legend item is clicked.
|
|
95
|
+
* Without it, clicking selects nothing.
|
|
96
|
+
*/
|
|
97
|
+
onSelectionChange?: (selectedIndices: number[], selectedData: StackedBarChartDataItem[]) => void;
|
|
98
|
+
/**
|
|
99
|
+
* Called when the pointer enters a segment. The chart already syncs its own
|
|
100
|
+
* hover highlight between bar and legend, so this is for driving something
|
|
101
|
+
* outside it.
|
|
102
|
+
*/
|
|
103
|
+
onSegmentMouseEnter?: (item: StackedBarChartDataItem, index: number) => void;
|
|
104
|
+
/**
|
|
105
|
+
* Called when the pointer leaves a segment.
|
|
106
|
+
*/
|
|
107
|
+
onSegmentMouseLeave?: (item: StackedBarChartDataItem, index: number) => void;
|
|
108
|
+
/**
|
|
109
|
+
* Called when the pointer enters a legend item.
|
|
110
|
+
*/
|
|
111
|
+
onLegendItemMouseEnter?: (item: StackedBarChartDataItem, index: number) => void;
|
|
112
|
+
/**
|
|
113
|
+
* Called when the pointer leaves a legend item.
|
|
114
|
+
*/
|
|
115
|
+
onLegendItemMouseLeave?: (item: StackedBarChartDataItem, index: number) => void;
|
|
116
|
+
/**
|
|
117
|
+
* Fires on a segment click, alongside any selection change rather than
|
|
118
|
+
* instead of it.
|
|
119
|
+
*/
|
|
120
|
+
onSegmentClick?: (item: StackedBarChartDataItem, index: number) => void;
|
|
121
|
+
/**
|
|
122
|
+
* The same, for a click on a legend item.
|
|
123
|
+
*/
|
|
124
|
+
onLegendItemClick?: (item: StackedBarChartDataItem, index: number) => void;
|
|
125
|
+
/**
|
|
126
|
+
* What a selection does to the unselected segments: fade them to 20% opacity,
|
|
127
|
+
* or drop them from the bar and let the rest take the space.
|
|
128
|
+
* @default "dim"
|
|
129
|
+
*/
|
|
130
|
+
selectionBehavior?: "dim" | "hide";
|
|
131
|
+
/**
|
|
132
|
+
* Whether the bar shows a breakdown of the data (segments always fill it) or
|
|
133
|
+
* progress towards maxAmount.
|
|
134
|
+
* @default "proportional"
|
|
135
|
+
*/
|
|
136
|
+
mode?: "proportional" | "cumulative";
|
|
137
|
+
/**
|
|
138
|
+
* Cumulative mode only. The value the full bar represents. Any difference
|
|
139
|
+
* between it and the sum of the data is drawn as the Remaining segment.
|
|
140
|
+
*/
|
|
141
|
+
maxAmount?: number;
|
|
142
|
+
/**
|
|
143
|
+
* Name of the grey gap segment in cumulative mode.
|
|
144
|
+
* @default "Remaining"
|
|
145
|
+
*/
|
|
146
|
+
remainingLabel?: string;
|
|
147
|
+
/**
|
|
148
|
+
* A unit for the Remaining segment's value alone.
|
|
149
|
+
*/
|
|
150
|
+
remainingUnit?: string;
|
|
151
|
+
/**
|
|
152
|
+
* The unit appended to counted values, for items that do not carry one of
|
|
153
|
+
* their own.
|
|
154
|
+
*/
|
|
155
|
+
unit?: string;
|
|
156
|
+
/**
|
|
157
|
+
* Tunes the generated palette (start hue, rotations, lightness range, gamma).
|
|
158
|
+
* Items with their own color are untouched by it.
|
|
159
|
+
*/
|
|
160
|
+
colorGeneratorOptions?: DiscreteColorGeneratorOptions;
|
|
161
|
+
}
|
|
162
|
+
//#endregion
|
|
163
|
+
//#region src/core/StackedBarChart/index.d.ts
|
|
164
|
+
declare const StackedBarChart: (props: StackedBarChartProps) => JSX.Element;
|
|
165
|
+
//#endregion
|
|
166
|
+
export { StackedBarChartDataItem as n, StackedBarChartProps as r, StackedBarChart as t };
|
|
@@ -0,0 +1,166 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { HTMLAttributes } from "react";
|
|
3
|
+
import { DiscreteColorGeneratorOptions, TooltipTableContentProps } from "@czi-sds/components";
|
|
4
|
+
|
|
5
|
+
//#region src/core/StackedBarChart/StackedBarChart.types.d.ts
|
|
6
|
+
interface StackedBarChartDataItem {
|
|
7
|
+
/**
|
|
8
|
+
* The segment's label in the legend, and the key the animations track it by.
|
|
9
|
+
* Must be unique within the chart.
|
|
10
|
+
*/
|
|
11
|
+
name: string;
|
|
12
|
+
/**
|
|
13
|
+
* The quantity the segment stands for.
|
|
14
|
+
*/
|
|
15
|
+
value: number;
|
|
16
|
+
/**
|
|
17
|
+
* Any CSS color. Without it the segment takes a generated palette color,
|
|
18
|
+
* which can shift as categories come and go.
|
|
19
|
+
*/
|
|
20
|
+
color?: string;
|
|
21
|
+
/**
|
|
22
|
+
* A unit for this item's counted value, for data that mixes units across
|
|
23
|
+
* categories.
|
|
24
|
+
*/
|
|
25
|
+
unit?: string;
|
|
26
|
+
/**
|
|
27
|
+
* Takes the segment and its legend item out of every interaction: no hover,
|
|
28
|
+
* no tooltip, no selection.
|
|
29
|
+
* @default false
|
|
30
|
+
*/
|
|
31
|
+
disabled?: boolean;
|
|
32
|
+
/**
|
|
33
|
+
* Content for a TooltipTable shown above the segment on hover. Use it for the
|
|
34
|
+
* breakdown behind the number; a segment without it has no tooltip.
|
|
35
|
+
*/
|
|
36
|
+
tooltip?: TooltipTableContentProps;
|
|
37
|
+
}
|
|
38
|
+
interface StackedBarChartProps extends HTMLAttributes<HTMLDivElement> {
|
|
39
|
+
/**
|
|
40
|
+
* A heading above the bar. It is also what makes room for the badge; with no
|
|
41
|
+
* title, no badge is drawn.
|
|
42
|
+
*/
|
|
43
|
+
title?: string;
|
|
44
|
+
/**
|
|
45
|
+
* Overrides the badge text, which otherwise counts the data and the selection
|
|
46
|
+
* ("7", or "3 of 7").
|
|
47
|
+
*/
|
|
48
|
+
badge?: string;
|
|
49
|
+
/**
|
|
50
|
+
* Removes the badge, leaving the title on its own.
|
|
51
|
+
* @default false
|
|
52
|
+
*/
|
|
53
|
+
hideBadge?: boolean;
|
|
54
|
+
/**
|
|
55
|
+
* The segments, in the order they are drawn.
|
|
56
|
+
*/
|
|
57
|
+
data: StackedBarChartDataItem[];
|
|
58
|
+
/**
|
|
59
|
+
* Any CSS width; a number is read as pixels. It sets the width of the whole
|
|
60
|
+
* chart, legend included.
|
|
61
|
+
* @default 100%
|
|
62
|
+
*/
|
|
63
|
+
width?: number | string;
|
|
64
|
+
/**
|
|
65
|
+
* Height of the bar in pixels. Values below 1 are clamped to 1, so the bar
|
|
66
|
+
* cannot disappear.
|
|
67
|
+
* @default 16
|
|
68
|
+
*/
|
|
69
|
+
barHeight?: number;
|
|
70
|
+
/**
|
|
71
|
+
* Draws the legend below the bar. It is the only place segment names appear,
|
|
72
|
+
* and the only part of the chart a keyboard can reach.
|
|
73
|
+
* @default true
|
|
74
|
+
*/
|
|
75
|
+
showLegend?: boolean;
|
|
76
|
+
/**
|
|
77
|
+
* Shows each item's value beside its name in the legend.
|
|
78
|
+
* @default true
|
|
79
|
+
*/
|
|
80
|
+
showLegendValues?: boolean;
|
|
81
|
+
/**
|
|
82
|
+
* "percentage" shows the segment's share of the bar, rounded. "count" shows
|
|
83
|
+
* the raw value followed by the item's unit, or the chart's unit if the item
|
|
84
|
+
* has none.
|
|
85
|
+
* @default "percentage"
|
|
86
|
+
*/
|
|
87
|
+
legendValueFormat?: "percentage" | "count";
|
|
88
|
+
/**
|
|
89
|
+
* Indices into data that are currently selected. The chart is controlled: it
|
|
90
|
+
* draws this and never changes it.
|
|
91
|
+
*/
|
|
92
|
+
selectedIndices?: number[];
|
|
93
|
+
/**
|
|
94
|
+
* Called with the next selection when a segment or legend item is clicked.
|
|
95
|
+
* Without it, clicking selects nothing.
|
|
96
|
+
*/
|
|
97
|
+
onSelectionChange?: (selectedIndices: number[], selectedData: StackedBarChartDataItem[]) => void;
|
|
98
|
+
/**
|
|
99
|
+
* Called when the pointer enters a segment. The chart already syncs its own
|
|
100
|
+
* hover highlight between bar and legend, so this is for driving something
|
|
101
|
+
* outside it.
|
|
102
|
+
*/
|
|
103
|
+
onSegmentMouseEnter?: (item: StackedBarChartDataItem, index: number) => void;
|
|
104
|
+
/**
|
|
105
|
+
* Called when the pointer leaves a segment.
|
|
106
|
+
*/
|
|
107
|
+
onSegmentMouseLeave?: (item: StackedBarChartDataItem, index: number) => void;
|
|
108
|
+
/**
|
|
109
|
+
* Called when the pointer enters a legend item.
|
|
110
|
+
*/
|
|
111
|
+
onLegendItemMouseEnter?: (item: StackedBarChartDataItem, index: number) => void;
|
|
112
|
+
/**
|
|
113
|
+
* Called when the pointer leaves a legend item.
|
|
114
|
+
*/
|
|
115
|
+
onLegendItemMouseLeave?: (item: StackedBarChartDataItem, index: number) => void;
|
|
116
|
+
/**
|
|
117
|
+
* Fires on a segment click, alongside any selection change rather than
|
|
118
|
+
* instead of it.
|
|
119
|
+
*/
|
|
120
|
+
onSegmentClick?: (item: StackedBarChartDataItem, index: number) => void;
|
|
121
|
+
/**
|
|
122
|
+
* The same, for a click on a legend item.
|
|
123
|
+
*/
|
|
124
|
+
onLegendItemClick?: (item: StackedBarChartDataItem, index: number) => void;
|
|
125
|
+
/**
|
|
126
|
+
* What a selection does to the unselected segments: fade them to 20% opacity,
|
|
127
|
+
* or drop them from the bar and let the rest take the space.
|
|
128
|
+
* @default "dim"
|
|
129
|
+
*/
|
|
130
|
+
selectionBehavior?: "dim" | "hide";
|
|
131
|
+
/**
|
|
132
|
+
* Whether the bar shows a breakdown of the data (segments always fill it) or
|
|
133
|
+
* progress towards maxAmount.
|
|
134
|
+
* @default "proportional"
|
|
135
|
+
*/
|
|
136
|
+
mode?: "proportional" | "cumulative";
|
|
137
|
+
/**
|
|
138
|
+
* Cumulative mode only. The value the full bar represents. Any difference
|
|
139
|
+
* between it and the sum of the data is drawn as the Remaining segment.
|
|
140
|
+
*/
|
|
141
|
+
maxAmount?: number;
|
|
142
|
+
/**
|
|
143
|
+
* Name of the grey gap segment in cumulative mode.
|
|
144
|
+
* @default "Remaining"
|
|
145
|
+
*/
|
|
146
|
+
remainingLabel?: string;
|
|
147
|
+
/**
|
|
148
|
+
* A unit for the Remaining segment's value alone.
|
|
149
|
+
*/
|
|
150
|
+
remainingUnit?: string;
|
|
151
|
+
/**
|
|
152
|
+
* The unit appended to counted values, for items that do not carry one of
|
|
153
|
+
* their own.
|
|
154
|
+
*/
|
|
155
|
+
unit?: string;
|
|
156
|
+
/**
|
|
157
|
+
* Tunes the generated palette (start hue, rotations, lightness range, gamma).
|
|
158
|
+
* Items with their own color are untouched by it.
|
|
159
|
+
*/
|
|
160
|
+
colorGeneratorOptions?: DiscreteColorGeneratorOptions;
|
|
161
|
+
}
|
|
162
|
+
//#endregion
|
|
163
|
+
//#region src/core/StackedBarChart/index.d.ts
|
|
164
|
+
declare const StackedBarChart: (props: StackedBarChartProps) => JSX.Element;
|
|
165
|
+
//#endregion
|
|
166
|
+
export { StackedBarChartDataItem as n, StackedBarChartProps as r, StackedBarChart as t };
|
|
@@ -1,26 +1,4 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
//#region \0rolldown/runtime.js
|
|
3
|
-
var __create = Object.create;
|
|
4
|
-
var __defProp = Object.defineProperty;
|
|
5
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
8
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
|
-
var __copyProps = (to, from, except, desc) => {
|
|
10
|
-
if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
|
|
11
|
-
key = keys[i];
|
|
12
|
-
if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
|
13
|
-
get: ((k) => from[k]).bind(null, key),
|
|
14
|
-
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
15
|
-
});
|
|
16
|
-
}
|
|
17
|
-
return to;
|
|
18
|
-
};
|
|
19
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
20
|
-
value: mod,
|
|
21
|
-
enumerable: true
|
|
22
|
-
}) : target, mod));
|
|
23
|
-
//#endregion
|
|
24
2
|
//#region \0@oxc-project+runtime@0.134.0/helpers/esm/objectWithoutPropertiesLoose.js
|
|
25
3
|
function _objectWithoutPropertiesLoose(r, e) {
|
|
26
4
|
if (null == r) return {};
|
|
@@ -104,12 +82,6 @@ function _objectSpread2(e) {
|
|
|
104
82
|
return e;
|
|
105
83
|
}
|
|
106
84
|
//#endregion
|
|
107
|
-
Object.defineProperty(exports, "__toESM", {
|
|
108
|
-
enumerable: true,
|
|
109
|
-
get: function() {
|
|
110
|
-
return __toESM;
|
|
111
|
-
}
|
|
112
|
-
});
|
|
113
85
|
Object.defineProperty(exports, "_objectSpread2", {
|
|
114
86
|
enumerable: true,
|
|
115
87
|
get: function() {
|