@unovis/ts 1.6.2 → 1.6.3
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/components/annotations/config.d.ts +2 -0
- package/components/annotations/config.js +1 -1
- package/components/annotations/config.js.map +1 -1
- package/components/annotations/index.d.ts +1 -0
- package/components/annotations/index.js +25 -10
- package/components/annotations/index.js.map +1 -1
- package/components/annotations/style.d.ts +2 -0
- package/components/annotations/style.js +8 -1
- package/components/annotations/style.js.map +1 -1
- package/components/area/config.d.ts +11 -1
- package/components/area/config.js +1 -1
- package/components/area/config.js.map +1 -1
- package/components/area/index.d.ts +6 -0
- package/components/area/index.js +80 -7
- package/components/area/index.js.map +1 -1
- package/components/area/style.d.ts +1 -0
- package/components/area/style.js +7 -1
- package/components/area/style.js.map +1 -1
- package/components/axis/index.d.ts +2 -0
- package/components/axis/index.js +46 -7
- package/components/axis/index.js.map +1 -1
- package/components/bullet-legend/index.d.ts +2 -0
- package/components/bullet-legend/index.js +9 -5
- package/components/bullet-legend/index.js.map +1 -1
- package/components/bullet-legend/modules/shape.js +3 -2
- package/components/bullet-legend/modules/shape.js.map +1 -1
- package/components/crosshair/config.d.ts +1 -1
- package/components/crosshair/config.js.map +1 -1
- package/components/crosshair/index.d.ts +1 -1
- package/components/crosshair/index.js +3 -2
- package/components/crosshair/index.js.map +1 -1
- package/components/flow-legend/config.d.ts +10 -0
- package/components/flow-legend/config.js +4 -0
- package/components/flow-legend/config.js.map +1 -1
- package/components/flow-legend/index.d.ts +6 -2
- package/components/flow-legend/index.js +34 -16
- package/components/flow-legend/index.js.map +1 -1
- package/components/flow-legend/style.d.ts +3 -3
- package/components/flow-legend/style.js +30 -26
- package/components/flow-legend/style.js.map +1 -1
- package/components/free-brush/types.js +1 -0
- package/components/free-brush/types.js.map +1 -1
- package/components/graph/index.d.ts +1 -0
- package/components/graph/index.js +35 -14
- package/components/graph/index.js.map +1 -1
- package/components/graph/modules/link/index.js +2 -2
- package/components/graph/modules/link/index.js.map +1 -1
- package/components/graph/modules/node/index.js +2 -1
- package/components/graph/modules/node/index.js.map +1 -1
- package/components/leaflet-map/leaflet.css.js +2 -2
- package/components/leaflet-map/modules/map.js +2 -2
- package/components/leaflet-map/modules/map.js.map +1 -1
- package/components/leaflet-map/renderer/mapboxgl-utils.d.ts +0 -1
- package/components/leaflet-map/renderer/mapboxgl-utils.js +1 -2
- package/components/leaflet-map/renderer/mapboxgl-utils.js.map +1 -1
- package/components/sankey/config.d.ts +28 -2
- package/components/sankey/config.js +2 -2
- package/components/sankey/config.js.map +1 -1
- package/components/sankey/index.d.ts +28 -2
- package/components/sankey/index.js +366 -46
- package/components/sankey/index.js.map +1 -1
- package/components/sankey/modules/label.d.ts +8 -5
- package/components/sankey/modules/label.js +64 -32
- package/components/sankey/modules/label.js.map +1 -1
- package/components/sankey/modules/link.d.ts +1 -0
- package/components/sankey/modules/link.js +20 -25
- package/components/sankey/modules/link.js.map +1 -1
- package/components/sankey/modules/node.d.ts +5 -4
- package/components/sankey/modules/node.js +78 -28
- package/components/sankey/modules/node.js.map +1 -1
- package/components/sankey/style.d.ts +67 -1
- package/components/sankey/style.js +78 -77
- package/components/sankey/style.js.map +1 -1
- package/components/sankey/types.d.ts +5 -0
- package/components/sankey/types.js +9 -2
- package/components/sankey/types.js.map +1 -1
- package/components/stacked-bar/index.d.ts +1 -1
- package/components/stacked-bar/index.js +24 -14
- package/components/stacked-bar/index.js.map +1 -1
- package/components/stacked-bar/types.d.ts +6 -4
- package/components/treemap/config.d.ts +2 -0
- package/components/treemap/config.js +1 -1
- package/components/treemap/config.js.map +1 -1
- package/components/treemap/index.d.ts +6 -2
- package/components/treemap/index.js +97 -71
- package/components/treemap/index.js.map +1 -1
- package/components/treemap/style.d.ts +1 -0
- package/components/treemap/style.js +5 -1
- package/components/treemap/style.js.map +1 -1
- package/components/treemap/types.d.ts +1 -0
- package/containers/single-container/config.d.ts +3 -0
- package/containers/single-container/config.js.map +1 -1
- package/containers/single-container/index.js +2 -1
- package/containers/single-container/index.js.map +1 -1
- package/containers/xy-container/config.d.ts +3 -0
- package/containers/xy-container/config.js.map +1 -1
- package/containers/xy-container/index.d.ts +1 -0
- package/containers/xy-container/index.js +13 -9
- package/containers/xy-container/index.js.map +1 -1
- package/index.js +1 -1
- package/package.json +41 -6
- package/types.js +1 -1
- package/utils/misc.js +13 -2
- package/utils/misc.js.map +1 -1
- package/utils/text.d.ts +1 -1
- package/utils/text.js +17 -15
- package/utils/text.js.map +1 -1
- package/utils/to-px.d.ts +1 -0
- package/utils/to-px.js +110 -0
- package/utils/to-px.js.map +1 -0
|
@@ -1,63 +1,54 @@
|
|
|
1
|
-
import { css
|
|
1
|
+
import { css } from '@emotion/css';
|
|
2
|
+
import { getCssVarNames, injectGlobalCssVariables } from '../../utils/style.js';
|
|
2
3
|
import { UNOVIS_ICON_FONT_FAMILY_DEFAULT } from '../../styles/index.js';
|
|
3
4
|
|
|
4
5
|
const SANKEY_ICON_SIZE = 22;
|
|
5
6
|
const root = css `
|
|
6
7
|
label: sankey-component;
|
|
7
8
|
`;
|
|
8
|
-
const
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
--vis-sankey-link-
|
|
12
|
-
--vis-sankey-link-
|
|
13
|
-
--vis-sankey-link-opacity: 0
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
--vis-sankey-node-
|
|
17
|
-
--vis-sankey-node-color:
|
|
18
|
-
--vis-sankey-node-
|
|
19
|
-
--vis-sankey-node-opacity: 0
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
--vis-sankey-node-
|
|
23
|
-
--vis-sankey-node-
|
|
24
|
-
|
|
25
|
-
--vis-sankey-node-label-color: #
|
|
26
|
-
--vis-sankey-node-label-
|
|
27
|
-
--vis-sankey-node-label-
|
|
28
|
-
--vis-sankey-node-label-
|
|
29
|
-
--vis-sankey-node-label-
|
|
30
|
-
|
|
31
|
-
--vis-sankey-node-
|
|
32
|
-
--vis-sankey-node-sublabel-font-
|
|
33
|
-
|
|
34
|
-
/* Icons */
|
|
35
|
-
--vis-sankey-icon-size:
|
|
36
|
-
--vis-sankey-icon-color: #ffffff
|
|
37
|
-
--vis-sankey-icon-stroke-opacity: 0.6
|
|
38
|
-
--vis-sankey-icon-font-family:
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
/*
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
--vis-dark-sankey-
|
|
45
|
-
--vis-dark-sankey-node-color:
|
|
46
|
-
--vis-dark-sankey-node-label-color: #
|
|
47
|
-
--vis-dark-sankey-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
body.theme-dark ${`.${root}`} {
|
|
53
|
-
--vis-sankey-node-color: var(--vis-dark-sankey-node-color);
|
|
54
|
-
--vis-sankey-link-color: var(--vis-dark-sankey-link-color);
|
|
55
|
-
--vis-sankey-node-label-color: var(--vis-dark-sankey-node-label-color);
|
|
56
|
-
--vis-sankey-node-label-background-fill-color: var(--vis-dark-sankey-label-background-fill-color);
|
|
57
|
-
--vis-sankey-node-label-background-stroke-color: var(--vis-dark-sankey-label-background-stroke-color);
|
|
58
|
-
--vis-sankey-icon-color: var(--vis-dark-sankey-icon-color);
|
|
59
|
-
}
|
|
60
|
-
`;
|
|
9
|
+
const cssVarDefaults = {
|
|
10
|
+
/* Links */
|
|
11
|
+
'--vis-sankey-link-cursor': 'default',
|
|
12
|
+
'--vis-sankey-link-color': 'var(--vis-color-main-light)',
|
|
13
|
+
'--vis-sankey-link-opacity': '0.5',
|
|
14
|
+
'--vis-sankey-link-hover-opacity': '1.0',
|
|
15
|
+
/* Nodes */
|
|
16
|
+
'--vis-sankey-node-cursor': 'default',
|
|
17
|
+
'--vis-sankey-node-color': 'var(--vis-color-main)',
|
|
18
|
+
'--vis-sankey-node-label-color': '#575c65',
|
|
19
|
+
'--vis-sankey-node-opacity': '0.9',
|
|
20
|
+
'--vis-sankey-node-hover-opacity': '1.0',
|
|
21
|
+
/* Node Selection */
|
|
22
|
+
'--vis-sankey-node-selection-stroke-width': '1.5px',
|
|
23
|
+
'--vis-sankey-node-selection-stroke-opacity': '0.6',
|
|
24
|
+
'--vis-sankey-node-selection-border-radius': '2px',
|
|
25
|
+
/* Node Labels */
|
|
26
|
+
'--vis-sankey-node-label-background-fill-color': '#ffffff',
|
|
27
|
+
'--vis-sankey-node-label-background-stroke-color': '#eaeaea',
|
|
28
|
+
'--vis-sankey-node-label-background-opacity': '0.9',
|
|
29
|
+
'--vis-sankey-node-label-cursor': 'default',
|
|
30
|
+
'--vis-sankey-node-label-font-weight': '600',
|
|
31
|
+
'--vis-sankey-node-label-font-size': '12px',
|
|
32
|
+
'--vis-sankey-node-label-text-decoration': 'none',
|
|
33
|
+
'--vis-sankey-node-sublabel-font-size': '10px',
|
|
34
|
+
'--vis-sankey-node-sublabel-font-weight': '500',
|
|
35
|
+
/* Icons */
|
|
36
|
+
'--vis-sankey-icon-size': `${SANKEY_ICON_SIZE}px`,
|
|
37
|
+
'--vis-sankey-icon-color': '#ffffff',
|
|
38
|
+
'--vis-sankey-icon-stroke-opacity': '0.6',
|
|
39
|
+
'--vis-sankey-icon-font-family': UNOVIS_ICON_FONT_FAMILY_DEFAULT,
|
|
40
|
+
// Undefined by default to allow proper fallback to var(--vis-font-family)
|
|
41
|
+
/* --vis-sankey-label-font-family: */
|
|
42
|
+
/* Dark Theme */
|
|
43
|
+
'--vis-dark-sankey-link-color': 'var(--vis-color-main-dark)',
|
|
44
|
+
'--vis-dark-sankey-node-color': 'var(--vis-color-main)',
|
|
45
|
+
'--vis-dark-sankey-node-label-color': '#eaeaea',
|
|
46
|
+
'--vis-dark-sankey-node-label-background-fill-color': '#292b34',
|
|
47
|
+
'--vis-dark-sankey-node-label-background-stroke-color': '#575c65',
|
|
48
|
+
'--vis-dark-sankey-icon-color': '#292b34',
|
|
49
|
+
};
|
|
50
|
+
const variables = getCssVarNames(cssVarDefaults);
|
|
51
|
+
injectGlobalCssVariables(cssVarDefaults, root);
|
|
61
52
|
const links = css `
|
|
62
53
|
label: links;
|
|
63
54
|
`;
|
|
@@ -68,14 +59,14 @@ const link = css `
|
|
|
68
59
|
label: link;
|
|
69
60
|
|
|
70
61
|
path {
|
|
71
|
-
cursor: var(
|
|
72
|
-
fill: var(
|
|
73
|
-
fill-opacity: var(
|
|
62
|
+
cursor: var(${variables.sankeyLinkCursor});
|
|
63
|
+
fill: var(${variables.sankeyLinkColor});
|
|
64
|
+
fill-opacity: var(${variables.sankeyLinkOpacity});
|
|
74
65
|
}
|
|
75
66
|
|
|
76
67
|
&:hover {
|
|
77
68
|
path {
|
|
78
|
-
fill-opacity: var(
|
|
69
|
+
fill-opacity: var(${variables.sankeyLinkHoverOpacity});
|
|
79
70
|
}
|
|
80
71
|
}
|
|
81
72
|
`;
|
|
@@ -88,7 +79,7 @@ const linkSelectionHelper = css `
|
|
|
88
79
|
`;
|
|
89
80
|
const labelGroup = css `
|
|
90
81
|
label: label-group;
|
|
91
|
-
cursor: var(
|
|
82
|
+
cursor: var(${variables.sankeyNodeLabelCursor});
|
|
92
83
|
`;
|
|
93
84
|
const labelTrimmed = css `
|
|
94
85
|
label: label-trimmed;
|
|
@@ -97,9 +88,9 @@ const label = css `
|
|
|
97
88
|
label: label;
|
|
98
89
|
dominant-baseline: hanging;
|
|
99
90
|
|
|
100
|
-
fill: var(
|
|
101
|
-
text-decoration: var(
|
|
102
|
-
font-weight: var(
|
|
91
|
+
fill: var(${variables.sankeyNodeLabelColor});
|
|
92
|
+
text-decoration: var(${variables.sankeyNodeLabelTextDecoration});
|
|
93
|
+
font-weight: var(${variables.sankeyNodeLabelFontWeight});
|
|
103
94
|
user-select: none;
|
|
104
95
|
|
|
105
96
|
&, tspan {
|
|
@@ -111,20 +102,20 @@ const sublabel = css `
|
|
|
111
102
|
label: sub-label;
|
|
112
103
|
dominant-baseline: hanging;
|
|
113
104
|
|
|
114
|
-
fill: var(
|
|
105
|
+
fill: var(${variables.sankeyNodeLabelColor});
|
|
115
106
|
user-select: none;
|
|
116
107
|
|
|
117
108
|
&, tspan {
|
|
118
109
|
font-family: var(--vis-sankey-label-font-family, var(--vis-font-family));
|
|
119
|
-
font-weight: var(
|
|
110
|
+
font-weight: var(${variables.sankeyNodeSublabelFontWeight});
|
|
120
111
|
dominant-baseline: hanging;
|
|
121
112
|
}
|
|
122
113
|
`;
|
|
123
114
|
const labelBackground = css `
|
|
124
115
|
label: label-background;
|
|
125
|
-
stroke: var(
|
|
126
|
-
fill: var(
|
|
127
|
-
opacity: var(
|
|
116
|
+
stroke: var(${variables.sankeyNodeLabelBackgroundStrokeColor});
|
|
117
|
+
fill: var(${variables.sankeyNodeLabelBackgroundFillColor});
|
|
118
|
+
opacity: var(${variables.sankeyNodeLabelBackgroundOpacity});
|
|
128
119
|
`;
|
|
129
120
|
const hidden = css `
|
|
130
121
|
label: hidden;
|
|
@@ -140,32 +131,42 @@ const nodeGroup = css `
|
|
|
140
131
|
const node = css `
|
|
141
132
|
label: node;
|
|
142
133
|
|
|
143
|
-
cursor: var(
|
|
144
|
-
fill: var(
|
|
145
|
-
opacity: var(
|
|
134
|
+
cursor: var(${variables.sankeyNodeCursor});
|
|
135
|
+
fill: var(${variables.sankeyNodeColor});
|
|
136
|
+
opacity: var(${variables.sankeyNodeOpacity});
|
|
146
137
|
|
|
147
138
|
&:hover {
|
|
148
|
-
opacity: var(
|
|
139
|
+
opacity: var(${variables.sankeyNodeHoverOpacity});
|
|
149
140
|
}
|
|
150
141
|
`;
|
|
151
142
|
const nodeIcon = css `
|
|
152
143
|
label: icon;
|
|
153
144
|
|
|
154
|
-
font-family: var(
|
|
145
|
+
font-family: var(${variables.sankeyIconFontFamily});
|
|
155
146
|
text-anchor: middle;
|
|
156
|
-
font-size: var(
|
|
157
|
-
fill: var(
|
|
158
|
-
stroke: var(
|
|
159
|
-
stroke-opacity: var(
|
|
147
|
+
font-size: var(${variables.sankeyIconSize});
|
|
148
|
+
fill: var(${variables.sankeyIconColor});
|
|
149
|
+
stroke: var(${variables.sankeyNodeColor});
|
|
150
|
+
stroke-opacity: var(${variables.sankeyIconStrokeOpacity});
|
|
160
151
|
user-select: none;
|
|
161
152
|
pointer-events: none;
|
|
153
|
+
dominant-baseline: central;
|
|
162
154
|
`;
|
|
163
155
|
const nodeExit = css `
|
|
164
156
|
label: node-exit;
|
|
165
157
|
`;
|
|
158
|
+
const nodeSelectionRect = css `
|
|
159
|
+
label: node-selection-rect;
|
|
160
|
+
fill: none;
|
|
161
|
+
stroke: var(${variables.sankeyNodeColor});
|
|
162
|
+
stroke-width: var(${variables.sankeyNodeSelectionStrokeWidth});
|
|
163
|
+
stroke-opacity: var(${variables.sankeyNodeSelectionStrokeOpacity});
|
|
164
|
+
rx: var(${variables.sankeyNodeSelectionBorderRadius});
|
|
165
|
+
ry: var(${variables.sankeyNodeSelectionBorderRadius});
|
|
166
|
+
`;
|
|
166
167
|
const background = css `
|
|
167
168
|
label: background;
|
|
168
169
|
`;
|
|
169
170
|
|
|
170
|
-
export { SANKEY_ICON_SIZE, background, forceShow, hidden, label, labelBackground, labelGroup, labelTrimmed, link, linkPath, linkSelectionHelper, links, node, nodeExit, nodeGroup, nodeIcon, nodes, root, sublabel, variables };
|
|
171
|
+
export { SANKEY_ICON_SIZE, background, cssVarDefaults, forceShow, hidden, label, labelBackground, labelGroup, labelTrimmed, link, linkPath, linkSelectionHelper, links, node, nodeExit, nodeGroup, nodeIcon, nodeSelectionRect, nodes, root, sublabel, variables };
|
|
171
172
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../src/components/sankey/style.ts"],"sourcesContent":["import { css
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../src/components/sankey/style.ts"],"sourcesContent":["import { css } from '@emotion/css'\nimport { getCssVarNames, injectGlobalCssVariables } from 'utils/style'\nimport { UNOVIS_ICON_FONT_FAMILY_DEFAULT } from 'styles/index'\n\nexport const SANKEY_ICON_SIZE = 22\n\nexport const root = css`\n label: sankey-component;\n`\n\nexport const cssVarDefaults = {\n /* Links */\n '--vis-sankey-link-cursor': 'default',\n '--vis-sankey-link-color': 'var(--vis-color-main-light)',\n '--vis-sankey-link-opacity': '0.5',\n '--vis-sankey-link-hover-opacity': '1.0',\n\n /* Nodes */\n '--vis-sankey-node-cursor': 'default',\n '--vis-sankey-node-color': 'var(--vis-color-main)',\n '--vis-sankey-node-label-color': '#575c65',\n '--vis-sankey-node-opacity': '0.9',\n '--vis-sankey-node-hover-opacity': '1.0',\n\n /* Node Selection */\n '--vis-sankey-node-selection-stroke-width': '1.5px',\n '--vis-sankey-node-selection-stroke-opacity': '0.6',\n '--vis-sankey-node-selection-border-radius': '2px',\n\n /* Node Labels */\n '--vis-sankey-node-label-background-fill-color': '#ffffff',\n '--vis-sankey-node-label-background-stroke-color': '#eaeaea',\n '--vis-sankey-node-label-background-opacity': '0.9',\n '--vis-sankey-node-label-cursor': 'default',\n '--vis-sankey-node-label-font-weight': '600',\n '--vis-sankey-node-label-font-size': '12px',\n '--vis-sankey-node-label-text-decoration': 'none',\n\n '--vis-sankey-node-sublabel-font-size': '10px',\n '--vis-sankey-node-sublabel-font-weight': '500',\n\n /* Icons */\n '--vis-sankey-icon-size': `${SANKEY_ICON_SIZE}px`,\n '--vis-sankey-icon-color': '#ffffff',\n '--vis-sankey-icon-stroke-opacity': '0.6',\n '--vis-sankey-icon-font-family': UNOVIS_ICON_FONT_FAMILY_DEFAULT,\n\n // Undefined by default to allow proper fallback to var(--vis-font-family)\n /* --vis-sankey-label-font-family: */\n\n /* Dark Theme */\n '--vis-dark-sankey-link-color': 'var(--vis-color-main-dark)',\n '--vis-dark-sankey-node-color': 'var(--vis-color-main)',\n '--vis-dark-sankey-node-label-color': '#eaeaea',\n '--vis-dark-sankey-node-label-background-fill-color': '#292b34',\n '--vis-dark-sankey-node-label-background-stroke-color': '#575c65',\n '--vis-dark-sankey-icon-color': '#292b34',\n}\n\nexport const variables = getCssVarNames(cssVarDefaults)\ninjectGlobalCssVariables(cssVarDefaults, root)\n\nexport const links = css`\n label: links;\n`\n\nexport const nodes = css`\n label: nodes;\n`\n\nexport const link = css`\n label: link;\n\n path {\n cursor: var(${variables.sankeyLinkCursor});\n fill: var(${variables.sankeyLinkColor});\n fill-opacity: var(${variables.sankeyLinkOpacity});\n }\n\n &:hover {\n path {\n fill-opacity: var(${variables.sankeyLinkHoverOpacity});\n }\n }\n`\n\nexport const linkPath = css`\n label: visible;\n`\n\nexport const linkSelectionHelper = css`\n label: transparent;\n opacity: 0;\n`\n\nexport const labelGroup = css`\n label: label-group;\n cursor: var(${variables.sankeyNodeLabelCursor});\n`\n\nexport const labelTrimmed = css`\n label: label-trimmed;\n`\n\nexport const label = css`\n label: label;\n dominant-baseline: hanging;\n\n fill: var(${variables.sankeyNodeLabelColor});\n text-decoration: var(${variables.sankeyNodeLabelTextDecoration});\n font-weight: var(${variables.sankeyNodeLabelFontWeight});\n user-select: none;\n\n &, tspan {\n font-family: var(--vis-sankey-label-font-family, var(--vis-font-family));\n dominant-baseline: hanging;\n }\n`\n\nexport const sublabel = css`\n label: sub-label;\n dominant-baseline: hanging;\n\n fill: var(${variables.sankeyNodeLabelColor});\n user-select: none;\n\n &, tspan {\n font-family: var(--vis-sankey-label-font-family, var(--vis-font-family));\n font-weight: var(${variables.sankeyNodeSublabelFontWeight});\n dominant-baseline: hanging;\n }\n`\n\nexport const labelBackground = css`\n label: label-background;\n stroke: var(${variables.sankeyNodeLabelBackgroundStrokeColor});\n fill: var(${variables.sankeyNodeLabelBackgroundFillColor});\n opacity: var(${variables.sankeyNodeLabelBackgroundOpacity});\n`\n\nexport const hidden = css`\n label: hidden;\n visibility: hidden;\n`\n\nexport const forceShow = css`\n label: forceShow;\n visibility: visible;\n`\n\nexport const nodeGroup = css`\n label: node-group;\n`\n\nexport const node = css`\n label: node;\n\n cursor: var(${variables.sankeyNodeCursor});\n fill: var(${variables.sankeyNodeColor});\n opacity: var(${variables.sankeyNodeOpacity});\n\n &:hover {\n opacity: var(${variables.sankeyNodeHoverOpacity});\n }\n`\n\nexport const nodeIcon = css`\n label: icon;\n\n font-family: var(${variables.sankeyIconFontFamily});\n text-anchor: middle;\n font-size: var(${variables.sankeyIconSize});\n fill: var(${variables.sankeyIconColor});\n stroke: var(${variables.sankeyNodeColor});\n stroke-opacity: var(${variables.sankeyIconStrokeOpacity});\n user-select: none;\n pointer-events: none;\n dominant-baseline: central;\n`\n\nexport const nodeExit = css`\n label: node-exit;\n`\n\nexport const nodeSelectionRect = css`\n label: node-selection-rect;\n fill: none;\n stroke: var(${variables.sankeyNodeColor});\n stroke-width: var(${variables.sankeyNodeSelectionStrokeWidth});\n stroke-opacity: var(${variables.sankeyNodeSelectionStrokeOpacity});\n rx: var(${variables.sankeyNodeSelectionBorderRadius});\n ry: var(${variables.sankeyNodeSelectionBorderRadius});\n`\n\nexport const background = css`\n label: background;\n`\n"],"names":[],"mappings":"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"}
|
|
@@ -28,7 +28,14 @@ var SankeyEnterTransitionType;
|
|
|
28
28
|
(function (SankeyEnterTransitionType) {
|
|
29
29
|
SankeyEnterTransitionType["Default"] = "default";
|
|
30
30
|
SankeyEnterTransitionType["FromAncestor"] = "from ancestor";
|
|
31
|
-
})(SankeyEnterTransitionType || (SankeyEnterTransitionType = {}));
|
|
31
|
+
})(SankeyEnterTransitionType || (SankeyEnterTransitionType = {}));
|
|
32
|
+
var SankeyZoomMode;
|
|
33
|
+
(function (SankeyZoomMode) {
|
|
34
|
+
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
35
|
+
SankeyZoomMode["XY"] = "xy";
|
|
36
|
+
SankeyZoomMode["X"] = "x";
|
|
37
|
+
SankeyZoomMode["Y"] = "y";
|
|
38
|
+
})(SankeyZoomMode || (SankeyZoomMode = {}));
|
|
32
39
|
|
|
33
|
-
export { SankeyEnterTransitionType, SankeyExitTransitionType, SankeyLayout, SankeyNodeAlign, SankeySubLabelPlacement };
|
|
40
|
+
export { SankeyEnterTransitionType, SankeyExitTransitionType, SankeyLayout, SankeyNodeAlign, SankeySubLabelPlacement, SankeyZoomMode };
|
|
34
41
|
//# sourceMappingURL=types.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sources":["../../../src/components/sankey/types.ts"],"sourcesContent":["/* eslint-disable no-use-before-define */\nimport { sankeyLeft, sankeyRight, sankeyCenter, sankeyJustify } from 'd3-sankey'\nimport { GraphInputLink, GraphLinkCore, GraphNodeCore } from 'types/graph'\nimport { GraphInputNode } from '../../types'\n\nexport type SankeyInputNode = GraphInputNode\n\nexport type SankeyInputLink = GraphInputLink\n\nexport type SankeyNode<N extends SankeyInputNode, L extends SankeyInputLink> = GraphNodeCore<N, L> & {\n id: string;\n /** the node’s value; this is the sum of link.value for the node’s incoming links, or node.fixedValue if defined */\n value: number;\n /** */\n fixedValue?: number;\n /** the node’s zero-based column index, corresponding to its horizontal position */\n layer: number;\n /** */\n isConnected: boolean;\n /** the array of incoming links which have this node as their source */\n sourceLinks?: SankeyLink<N, L>[];\n /** the array of outgoing links which have this node as their target */\n targetLinks: SankeyLink<N, L>[];\n /** the node’s zero-based index within the array of nodes */\n index: number;\n /** the node’s zero-based graph depth, derived from the graph topology */\n depth: number;\n /** node.height - the node’s zero-based graph height, derived from the graph topology */\n height: number;\n /** the node’s minimum horizontal position, derived from node.depth */\n x0: number;\n /** the node’s maximum horizontal position (node.x0 + sankey.nodeWidth) */\n x1: number;\n /** the node’s minimum vertical position */\n y0: number;\n /** the node’s maximum vertical position (node.y1 - node.y0 is proportional to node.value) */\n y1: number;\n /** calculated node width */\n width: number;\n /** internal ui state */\n _state?: {\n greyout?: boolean;\n /* Pre-calculated node height value in pixels that will be used to manually generate the layout when data has no links */\n precalculatedHeight?: number;\n };\n}\n\nexport type SankeyLink<N extends SankeyInputNode, L extends SankeyInputLink> = GraphLinkCore<N, L> & {\n value: number;\n /** the link’s source node */\n source: SankeyNode<N, L>;\n /** the link’s target node */\n target: SankeyNode<N, L>;\n /** the link’s vertical starting position (at source node) */\n y0: number;\n /** the link’s vertical end position (at target node) */\n y1: number;\n /** the link’s width (proportional to link.value) */\n width: number;\n /** the zero-based index of link within the array of links */\n index: number;\n /** internal ui state */\n _state?: {\n greyout?: boolean;\n };\n}\n\nexport enum SankeySubLabelPlacement {\n Inline = 'inline',\n Below = 'below',\n}\n\nexport enum SankeyNodeAlign {\n Left = 'left',\n Right = 'right',\n Center = 'center',\n Justify = 'justify',\n}\n\nexport const SankeyLayout = {\n [SankeyNodeAlign.Left]: sankeyLeft,\n [SankeyNodeAlign.Right]: sankeyRight,\n [SankeyNodeAlign.Center]: sankeyCenter,\n [SankeyNodeAlign.Justify]: sankeyJustify,\n}\n\nexport enum SankeyExitTransitionType {\n Default = 'default',\n ToAncestor = 'to ancestor',\n}\n\nexport enum SankeyEnterTransitionType {\n Default = 'default',\n FromAncestor = 'from ancestor',\n}\n"],"names":[],"mappings":";;AAAA;IAmEY,wBAGX;AAHD,CAAA,UAAY,uBAAuB,EAAA;AACjC,IAAA,uBAAA,CAAA,QAAA,CAAA,GAAA,QAAiB,CAAA;AACjB,IAAA,uBAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACjB,CAAC,EAHW,uBAAuB,KAAvB,uBAAuB,GAGlC,EAAA,CAAA,CAAA,CAAA;IAEW,gBAKX;AALD,CAAA,UAAY,eAAe,EAAA;AACzB,IAAA,eAAA,CAAA,MAAA,CAAA,GAAA,MAAa,CAAA;AACb,IAAA,eAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACf,IAAA,eAAA,CAAA,QAAA,CAAA,GAAA,QAAiB,CAAA;AACjB,IAAA,eAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AACrB,CAAC,EALW,eAAe,KAAf,eAAe,GAK1B,EAAA,CAAA,CAAA,CAAA;AAEY,MAAA,YAAY,GAAG;AAC1B,IAAA,CAAC,eAAe,CAAC,IAAI,GAAG,UAAU;AAClC,IAAA,CAAC,eAAe,CAAC,KAAK,GAAG,WAAW;AACpC,IAAA,CAAC,eAAe,CAAC,MAAM,GAAG,YAAY;AACtC,IAAA,CAAC,eAAe,CAAC,OAAO,GAAG,aAAa;EACzC;IAEW,yBAGX;AAHD,CAAA,UAAY,wBAAwB,EAAA;AAClC,IAAA,wBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AACnB,IAAA,wBAAA,CAAA,YAAA,CAAA,GAAA,aAA0B,CAAA;AAC5B,CAAC,EAHW,wBAAwB,KAAxB,wBAAwB,GAGnC,EAAA,CAAA,CAAA,CAAA;IAEW,0BAGX;AAHD,CAAA,UAAY,yBAAyB,EAAA;AACnC,IAAA,yBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AACnB,IAAA,yBAAA,CAAA,cAAA,CAAA,GAAA,eAA8B,CAAA;AAChC,CAAC,EAHW,yBAAyB,KAAzB,yBAAyB,GAGpC,EAAA,CAAA,CAAA;;;;"}
|
|
1
|
+
{"version":3,"file":"types.js","sources":["../../../src/components/sankey/types.ts"],"sourcesContent":["/* eslint-disable no-use-before-define */\nimport { sankeyLeft, sankeyRight, sankeyCenter, sankeyJustify } from 'd3-sankey'\nimport { GraphInputLink, GraphLinkCore, GraphNodeCore } from 'types/graph'\nimport { GraphInputNode } from '../../types'\n\nexport type SankeyInputNode = GraphInputNode\n\nexport type SankeyInputLink = GraphInputLink\n\nexport type SankeyNode<N extends SankeyInputNode, L extends SankeyInputLink> = GraphNodeCore<N, L> & {\n id: string;\n /** the node’s value; this is the sum of link.value for the node’s incoming links, or node.fixedValue if defined */\n value: number;\n /** */\n fixedValue?: number;\n /** the node’s zero-based column index, corresponding to its horizontal position */\n layer: number;\n /** */\n isConnected: boolean;\n /** the array of incoming links which have this node as their source */\n sourceLinks?: SankeyLink<N, L>[];\n /** the array of outgoing links which have this node as their target */\n targetLinks: SankeyLink<N, L>[];\n /** the node’s zero-based index within the array of nodes */\n index: number;\n /** the node’s zero-based graph depth, derived from the graph topology */\n depth: number;\n /** node.height - the node’s zero-based graph height, derived from the graph topology */\n height: number;\n /** the node’s minimum horizontal position, derived from node.depth */\n x0: number;\n /** the node’s maximum horizontal position (node.x0 + sankey.nodeWidth) */\n x1: number;\n /** the node’s minimum vertical position */\n y0: number;\n /** the node’s maximum vertical position (node.y1 - node.y0 is proportional to node.value) */\n y1: number;\n /** calculated node width */\n width: number;\n /** internal ui state */\n _state?: {\n greyout?: boolean;\n /* Pre-calculated node height value in pixels that will be used to manually generate the layout when data has no links */\n precalculatedHeight?: number;\n };\n}\n\nexport type SankeyLink<N extends SankeyInputNode, L extends SankeyInputLink> = GraphLinkCore<N, L> & {\n value: number;\n /** the link’s source node */\n source: SankeyNode<N, L>;\n /** the link’s target node */\n target: SankeyNode<N, L>;\n /** the link’s vertical starting position (at source node) */\n y0: number;\n /** the link’s vertical end position (at target node) */\n y1: number;\n /** the link’s width (proportional to link.value) */\n width: number;\n /** the zero-based index of link within the array of links */\n index: number;\n /** internal ui state */\n _state?: {\n greyout?: boolean;\n };\n}\n\nexport enum SankeySubLabelPlacement {\n Inline = 'inline',\n Below = 'below',\n}\n\nexport enum SankeyNodeAlign {\n Left = 'left',\n Right = 'right',\n Center = 'center',\n Justify = 'justify',\n}\n\nexport const SankeyLayout = {\n [SankeyNodeAlign.Left]: sankeyLeft,\n [SankeyNodeAlign.Right]: sankeyRight,\n [SankeyNodeAlign.Center]: sankeyCenter,\n [SankeyNodeAlign.Justify]: sankeyJustify,\n}\n\nexport enum SankeyExitTransitionType {\n Default = 'default',\n ToAncestor = 'to ancestor',\n}\n\nexport enum SankeyEnterTransitionType {\n Default = 'default',\n FromAncestor = 'from ancestor',\n}\n\nexport enum SankeyZoomMode {\n // eslint-disable-next-line @typescript-eslint/naming-convention\n XY = 'xy',\n X = 'x',\n Y = 'y',\n}\n"],"names":[],"mappings":";;AAAA;IAmEY,wBAGX;AAHD,CAAA,UAAY,uBAAuB,EAAA;AACjC,IAAA,uBAAA,CAAA,QAAA,CAAA,GAAA,QAAiB,CAAA;AACjB,IAAA,uBAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACjB,CAAC,EAHW,uBAAuB,KAAvB,uBAAuB,GAGlC,EAAA,CAAA,CAAA,CAAA;IAEW,gBAKX;AALD,CAAA,UAAY,eAAe,EAAA;AACzB,IAAA,eAAA,CAAA,MAAA,CAAA,GAAA,MAAa,CAAA;AACb,IAAA,eAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACf,IAAA,eAAA,CAAA,QAAA,CAAA,GAAA,QAAiB,CAAA;AACjB,IAAA,eAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AACrB,CAAC,EALW,eAAe,KAAf,eAAe,GAK1B,EAAA,CAAA,CAAA,CAAA;AAEY,MAAA,YAAY,GAAG;AAC1B,IAAA,CAAC,eAAe,CAAC,IAAI,GAAG,UAAU;AAClC,IAAA,CAAC,eAAe,CAAC,KAAK,GAAG,WAAW;AACpC,IAAA,CAAC,eAAe,CAAC,MAAM,GAAG,YAAY;AACtC,IAAA,CAAC,eAAe,CAAC,OAAO,GAAG,aAAa;EACzC;IAEW,yBAGX;AAHD,CAAA,UAAY,wBAAwB,EAAA;AAClC,IAAA,wBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AACnB,IAAA,wBAAA,CAAA,YAAA,CAAA,GAAA,aAA0B,CAAA;AAC5B,CAAC,EAHW,wBAAwB,KAAxB,wBAAwB,GAGnC,EAAA,CAAA,CAAA,CAAA;IAEW,0BAGX;AAHD,CAAA,UAAY,yBAAyB,EAAA;AACnC,IAAA,yBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AACnB,IAAA,yBAAA,CAAA,cAAA,CAAA,GAAA,eAA8B,CAAA;AAChC,CAAC,EAHW,yBAAyB,KAAzB,yBAAyB,GAGpC,EAAA,CAAA,CAAA,CAAA;IAEW,eAKX;AALD,CAAA,UAAY,cAAc,EAAA;;AAExB,IAAA,cAAA,CAAA,IAAA,CAAA,GAAA,IAAS,CAAA;AACT,IAAA,cAAA,CAAA,GAAA,CAAA,GAAA,GAAO,CAAA;AACP,IAAA,cAAA,CAAA,GAAA,CAAA,GAAA,GAAO,CAAA;AACT,CAAC,EALW,cAAc,KAAd,cAAc,GAKzB,EAAA,CAAA,CAAA;;;;"}
|
|
@@ -21,7 +21,7 @@ export declare class StackedBar<Datum> extends XYComponentCore<Datum, StackedBar
|
|
|
21
21
|
_render(customDuration?: number): void;
|
|
22
22
|
_getBarWidth(): number;
|
|
23
23
|
_getVisibleData(): Datum[];
|
|
24
|
-
_getBarPath(d: StackedBarDataRecord<Datum>,
|
|
24
|
+
_getBarPath(d: StackedBarDataRecord<Datum>, isEntering?: boolean): string;
|
|
25
25
|
getValueScaleExtent(scaleByVisibleData: boolean): number[];
|
|
26
26
|
getDataScaleExtent(): number[];
|
|
27
27
|
getYDataExtent(scaleByVisibleData: boolean): number[];
|
|
@@ -90,19 +90,29 @@ class StackedBar extends XYComponentCore {
|
|
|
90
90
|
// Render Bars
|
|
91
91
|
const bars = barGroupsMerged
|
|
92
92
|
.selectAll(`.${bar}`)
|
|
93
|
-
.data((d, j) => stacked
|
|
93
|
+
.data((d, j) => stacked
|
|
94
|
+
.map((s, i) => ({
|
|
95
|
+
datum: d,
|
|
96
|
+
index: j,
|
|
97
|
+
stacked: s[j],
|
|
98
|
+
stackIndex: i,
|
|
94
99
|
// Ending bar if the next stack is not the same as the current one
|
|
95
|
-
|
|
96
|
-
((
|
|
100
|
+
isEnding: (i === stacked.length - 1) ||
|
|
101
|
+
((i <= stacked.length - 1) && stacked[i + 1][j][0] !== s[j][1]),
|
|
102
|
+
}))
|
|
103
|
+
.filter(d => d.stacked[0] !== d.stacked[1]), // Skip zero-height bars
|
|
104
|
+
// Skip zero-height bars
|
|
105
|
+
d => d.stackIndex // Key function for proper transitions
|
|
106
|
+
);
|
|
97
107
|
const barsEnter = bars.enter().append('path')
|
|
98
108
|
.attr('class', bar)
|
|
99
|
-
.attr('d',
|
|
100
|
-
.style('fill',
|
|
109
|
+
.attr('d', d => this._getBarPath(d, true))
|
|
110
|
+
.style('fill', d => getColor(d.datum, config.color, d.stackIndex));
|
|
101
111
|
const barsMerged = barsEnter.merge(bars);
|
|
102
112
|
smartTransition(barsMerged, duration)
|
|
103
|
-
.attr('d',
|
|
104
|
-
.style('fill',
|
|
105
|
-
.style('cursor',
|
|
113
|
+
.attr('d', d => this._getBarPath(d))
|
|
114
|
+
.style('fill', d => getColor(d.datum, config.color, d.stackIndex))
|
|
115
|
+
.style('cursor', d => getString(d.datum, config.cursor, d.stackIndex));
|
|
106
116
|
smartTransition(bars.exit(), duration)
|
|
107
117
|
.style('opacity', 0)
|
|
108
118
|
.remove();
|
|
@@ -149,18 +159,18 @@ class StackedBar extends XYComponentCore {
|
|
|
149
159
|
});
|
|
150
160
|
return filtered;
|
|
151
161
|
}
|
|
152
|
-
_getBarPath(d,
|
|
162
|
+
_getBarPath(d, isEntering = false) {
|
|
153
163
|
const { config } = this;
|
|
154
164
|
const yAccessors = this.getAccessors();
|
|
155
165
|
const barWidth = this._getBarWidth();
|
|
156
|
-
const isNegative = d.
|
|
157
|
-
const isEnding = d.
|
|
158
|
-
const value = getNumber(d, yAccessors[
|
|
159
|
-
const height = isEntering ? 0 : Math.abs(this.valueScale(d.
|
|
166
|
+
const isNegative = d.stacked[1] < 0;
|
|
167
|
+
const isEnding = d.isEnding; // The most top bar or, if the value is negative, the most bottom bar
|
|
168
|
+
const value = getNumber(d.datum, yAccessors[d.stackIndex], d.index);
|
|
169
|
+
const height = isEntering ? 0 : Math.abs(this.valueScale(d.stacked[0]) - this.valueScale(d.stacked[1]));
|
|
160
170
|
const h = !isEntering && config.barMinHeight1Px && (height < 1) && isFinite(value) && (value !== config.barMinHeightZeroValue) ? 1 : height;
|
|
161
171
|
const y = isEntering
|
|
162
172
|
? this.valueScale(0)
|
|
163
|
-
: this.valueScale(isNegative ? d.
|
|
173
|
+
: this.valueScale(isNegative ? d.stacked[0] : d.stacked[1]) - (height < 1 && config.barMinHeight1Px ? 1 : 0);
|
|
164
174
|
const x = -barWidth / 2;
|
|
165
175
|
const width = barWidth;
|
|
166
176
|
const cornerRadius = config.roundedCorners
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/stacked-bar/index.ts"],"sourcesContent":["import { min, max } from 'd3-array'\n\n// Core\nimport { XYComponentCore } from 'core/xy-component'\n\n// Utils\nimport { isNumber, isArray, isEmpty, clamp, getStackedExtent, getString, getNumber, getStackedData, getExtent } from 'utils/data'\nimport { roundedRectPath } from 'utils/path'\nimport { smartTransition } from 'utils/d3'\nimport { getColor } from 'utils/color'\n\n// Types\nimport { ContinuousScale } from 'types/scale'\nimport { NumericAccessor } from 'types/accessor'\nimport { Spacing } from 'types/spacing'\nimport { Orientation } from 'types/position'\n\n// Local Types\nimport { StackedBarDataRecord } from './types'\n\n// Config\nimport { StackedBarDefaultConfig, StackedBarConfigInterface } from './config'\n\n// Styles\nimport * as s from './style'\n\nexport class StackedBar<Datum> extends XYComponentCore<Datum, StackedBarConfigInterface<Datum>> {\n static selectors = s\n protected _defaultConfig = StackedBarDefaultConfig as StackedBarConfigInterface<Datum>\n public config: StackedBarConfigInterface<Datum> = this._defaultConfig\n\n getAccessors = (): NumericAccessor<Datum>[] => (isArray(this.config.y) ? this.config.y : [this.config.y])\n stacked = true\n events = {}\n private _prevNegative: boolean[] | undefined // To help guessing the bar direction when an accessor was set to null or 0\n private _barData: Datum[] = []\n\n constructor (config?: StackedBarConfigInterface<Datum>) {\n super()\n if (config) this.setConfig(config)\n }\n\n get bleed (): Spacing {\n this._barData = this._getVisibleData()\n if (this._barData.length === 0) return { top: 0, bottom: 0, left: 0, right: 0 }\n\n // By default, horizontal orientation is \"flipped\", i.e. the `yDirection` of `XYContainer` is set to `Direction.North`\n const isHorizontalAndFlipped = !this.isVertical() && (this.dataScale.range()[0] > this.dataScale.range()[1])\n const dataDomain = this.dataScale.domain()\n const halfGroupWidth = this._getBarWidth() / 2\n\n const dataScaleValues = this._barData.map((d, i) => getNumber(d, this.config.x, i))\n const firstDataValue = min(dataScaleValues)\n const lastDataValue = max(dataScaleValues)\n const firstValuePx = this.dataScale(firstDataValue)\n const lastValuePx = this.dataScale(lastDataValue)\n\n const dataDomainRequiredStart = this.dataScale.invert(firstValuePx + (isHorizontalAndFlipped ? halfGroupWidth : -halfGroupWidth))\n const dataDomainRequiredEnd = this.dataScale.invert(lastValuePx + (isHorizontalAndFlipped ? -halfGroupWidth : halfGroupWidth))\n const bleedPxStart = dataDomainRequiredStart <= dataDomain[0] ? this.dataScale(dataDomain[0]) - this.dataScale(dataDomainRequiredStart) : 0\n const bleedPxEnd = dataDomainRequiredEnd > dataDomain[1] ? this.dataScale(dataDomainRequiredEnd) - this.dataScale(dataDomain[1]) : 0\n\n return {\n top: this.isVertical() ? 0 : (isHorizontalAndFlipped ? -bleedPxEnd : bleedPxStart),\n bottom: this.isVertical() ? 0 : (isHorizontalAndFlipped ? -bleedPxStart : bleedPxEnd),\n left: this.isVertical() ? bleedPxStart : 0,\n right: this.isVertical() ? bleedPxEnd : 0,\n }\n }\n\n private get dataScale (): ContinuousScale {\n return this.isVertical() ? this.xScale : this.yScale\n }\n\n private get valueScale (): ContinuousScale {\n return this.isVertical() ? this.yScale : this.xScale\n }\n\n private isVertical (): boolean {\n return this.config.orientation === Orientation.Vertical\n }\n\n _render (customDuration?: number): void {\n const { config } = this\n const duration = isNumber(customDuration) ? customDuration : config.duration\n\n const yAccessors = this.getAccessors()\n const stacked = getStackedData(this._barData, 0, yAccessors, this._prevNegative)\n this._prevNegative = stacked.map(s => !!s.isMostlyNegative)\n\n const barGroups = this.g\n .selectAll<SVGGElement, Datum>(`.${s.barGroup}`)\n .data(this._barData, (d, i) => `${getString(d, config.id, i) ?? i}`)\n\n const getBarGroupsTransform = (d: Datum, i: number): string => {\n const v = this.dataScale(getNumber(d, config.x, i))\n const x = this.isVertical() ? v : 0\n const y = this.isVertical() ? 0 : v\n return `translate(${x},${y})`\n }\n\n const barGroupsEnter = barGroups.enter().append('g')\n .attr('class', s.barGroup)\n .attr('transform', getBarGroupsTransform)\n .style('opacity', 1)\n\n const barGroupsMerged = barGroupsEnter.merge(barGroups)\n smartTransition(barGroupsMerged, duration)\n .attr('transform', getBarGroupsTransform)\n .style('opacity', 1)\n\n const barGroupExit = barGroups.exit()\n .attr('class', s.barGroupExit)\n\n smartTransition(barGroupExit, duration)\n .style('opacity', 0)\n .remove()\n\n // Animate bars from exiting groups going down\n smartTransition(barGroupExit.selectAll(`.${s.bar}`), duration)\n .attr('transform', this.isVertical()\n ? `translate(0,${this._height / 3})`\n : `translate(${this._width / 6},0)`\n )\n\n // Render Bars\n const bars = barGroupsMerged\n .selectAll<SVGPathElement, StackedBarDataRecord<Datum>>(`.${s.bar}`)\n .data((d, j) => stacked.map((s, stackIndex) =>\n ({\n ...d,\n _index: j,\n _stacked: s[j],\n // Ending bar if the next stack is not the same as the current one\n _ending: (stackIndex === stacked.length - 1) ||\n ((stackIndex <= stacked.length - 1) && stacked[stackIndex + 1][j][0] !== s[j][1]),\n }))\n )\n\n const barsEnter = bars.enter().append('path')\n .attr('class', s.bar)\n .attr('d', (d, j) => this._getBarPath(d, j, true))\n .style('fill', (d, j) => getColor(d, config.color, j))\n\n const barsMerged = barsEnter.merge(bars)\n\n smartTransition(barsMerged, duration)\n .attr('d', (d, j) => this._getBarPath(d, j))\n .style('fill', (d, j) => getColor(d, config.color, j))\n .style('cursor', (d, j) => getString(d, config.cursor, j))\n\n smartTransition(bars.exit(), duration)\n .style('opacity', 0)\n .remove()\n }\n\n _getBarWidth (): number {\n const { config, datamodel: { data } } = this\n if (isEmpty(data)) return 0\n if (config.barWidth) return min([config.barWidth, config.barMaxWidth])\n\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n const isOrdinal = this.dataScale.bandwidth\n const domain = (this.dataScale.domain ? this.dataScale.domain() : []) as number[]\n const domainLength = isOrdinal ? domain.length : domain[1] - domain[0]\n\n // If the dataStep property is provided the amount of data elements is calculates as domainLength / dataStep\n // otherwise we get the number of data elements within the domain range\n // Or if the scale is ordinal we use data.length\n let dataSize = (1 + domainLength / config.dataStep) ||\n (!isOrdinal && data.filter((d, i) => {\n const value = getNumber(d, config.x, i)\n return (value >= domain[0]) && (value <= domain[1])\n }).length) ||\n data.length\n\n // We increase the dataSize by 1 to take into account possible additional domain space\n if (!isOrdinal && dataSize >= 2) dataSize += 1\n\n const c = dataSize < 2 ? 1 : 1 - config.barPadding\n const barWidth = c * (this.isVertical() ? this._width : this._height) / dataSize\n\n return min([barWidth, config.barMaxWidth])\n }\n\n _getVisibleData (): Datum[] {\n const { config, datamodel: { data } } = this\n\n const groupWidth = this._getBarWidth()\n const halfGroupWidthPx = data.length < 2 ? 0 : groupWidth / 2\n\n const scale = this.dataScale\n const halfGroupWidth = Math.abs((scale.invert(halfGroupWidthPx) as number) - (scale.invert(0) as number))\n const filtered = data?.filter((d, i) => {\n const v = getNumber(d, config.x, i)\n const domain: number[] | Date[] = scale.domain()\n const domainMin = +domain[0]\n const domainMax = +domain[1]\n return (v >= (domainMin - halfGroupWidth)) && (v <= (domainMax + halfGroupWidth))\n })\n\n return filtered\n }\n\n _getBarPath (d: StackedBarDataRecord<Datum>, accessorIndex: number, isEntering = false): string {\n const { config } = this\n const yAccessors = this.getAccessors()\n const barWidth = this._getBarWidth()\n\n const isNegative = d._stacked[1] < 0\n const isEnding = d._ending // The most top bar or, if the value is negative, the most bottom bar\n const value = getNumber(d, yAccessors[accessorIndex], d._index)\n const height = isEntering ? 0 : Math.abs(this.valueScale(d._stacked[0]) - this.valueScale(d._stacked[1]))\n const h = !isEntering && config.barMinHeight1Px && (height < 1) && isFinite(value) && (value !== config.barMinHeightZeroValue) ? 1 : height\n const y = isEntering\n ? this.valueScale(0)\n : this.valueScale(isNegative ? d._stacked[0] : d._stacked[1]) - (height < 1 && config.barMinHeight1Px ? 1 : 0)\n\n const x = -barWidth / 2\n const width = barWidth\n\n const cornerRadius = config.roundedCorners\n ? isNumber(config.roundedCorners) ? +config.roundedCorners : width / 2\n : 0\n const cornerRadiusClamped = clamp(cornerRadius, 0, Math.min(height, width) / 2)\n const isNorthDirected = this.yScale.range()[0] > this.yScale.range()[1]\n\n return roundedRectPath({\n x: this.isVertical() ? x : y - h,\n y: this.isVertical() ? y + (isNorthDirected ? 0 : -h) : x,\n w: this.isVertical() ? width : h,\n h: this.isVertical() ? h : width,\n tl: isEnding && (this.isVertical()\n ? (!isNegative && isNorthDirected) || (isNegative && !isNorthDirected)\n : isNegative\n ),\n tr: isEnding && (this.isVertical()\n ? (!isNegative && isNorthDirected) || (isNegative && !isNorthDirected)\n : !isNegative\n ),\n br: isEnding && (this.isVertical()\n ? (isNegative && isNorthDirected) || (!isNegative && !isNorthDirected)\n : !isNegative\n ),\n bl: isEnding && (this.isVertical()\n ? (isNegative && isNorthDirected) || (!isNegative && !isNorthDirected)\n : isNegative\n ),\n r: cornerRadiusClamped,\n })\n }\n\n getValueScaleExtent (scaleByVisibleData: boolean): number[] {\n const { datamodel } = this\n const yAccessors = this.getAccessors()\n\n const data = scaleByVisibleData ? this._getVisibleData() : datamodel.data\n return getStackedExtent(data, ...yAccessors)\n }\n\n getDataScaleExtent (): number[] {\n const { config, datamodel } = this\n return getExtent(datamodel.data, config.x)\n }\n\n getYDataExtent (scaleByVisibleData: boolean): number[] {\n return this.isVertical() ? this.getValueScaleExtent(scaleByVisibleData) : this.getDataScaleExtent()\n }\n\n getXDataExtent (): number[] {\n return this.isVertical() ? this.getDataScaleExtent() : this.getValueScaleExtent(false)\n }\n}\n"],"names":["s.barGroup","barGroupExit","s.barGroupExit","s.bar","s"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/stacked-bar/index.ts"],"sourcesContent":["import { min, max } from 'd3-array'\n\n// Core\nimport { XYComponentCore } from 'core/xy-component'\n\n// Utils\nimport { isNumber, isArray, isEmpty, clamp, getStackedExtent, getString, getNumber, getStackedData, getExtent } from 'utils/data'\nimport { roundedRectPath } from 'utils/path'\nimport { smartTransition } from 'utils/d3'\nimport { getColor } from 'utils/color'\n\n// Types\nimport { ContinuousScale } from 'types/scale'\nimport { NumericAccessor } from 'types/accessor'\nimport { Spacing } from 'types/spacing'\nimport { Orientation } from 'types/position'\n\n// Local Types\nimport { StackedBarDataRecord } from './types'\n\n// Config\nimport { StackedBarDefaultConfig, StackedBarConfigInterface } from './config'\n\n// Styles\nimport * as s from './style'\n\nexport class StackedBar<Datum> extends XYComponentCore<Datum, StackedBarConfigInterface<Datum>> {\n static selectors = s\n protected _defaultConfig = StackedBarDefaultConfig as StackedBarConfigInterface<Datum>\n public config: StackedBarConfigInterface<Datum> = this._defaultConfig\n\n getAccessors = (): NumericAccessor<Datum>[] => (isArray(this.config.y) ? this.config.y : [this.config.y])\n stacked = true\n events = {}\n private _prevNegative: boolean[] | undefined // To help guessing the bar direction when an accessor was set to null or 0\n private _barData: Datum[] = []\n\n constructor (config?: StackedBarConfigInterface<Datum>) {\n super()\n if (config) this.setConfig(config)\n }\n\n get bleed (): Spacing {\n this._barData = this._getVisibleData()\n if (this._barData.length === 0) return { top: 0, bottom: 0, left: 0, right: 0 }\n\n // By default, horizontal orientation is \"flipped\", i.e. the `yDirection` of `XYContainer` is set to `Direction.North`\n const isHorizontalAndFlipped = !this.isVertical() && (this.dataScale.range()[0] > this.dataScale.range()[1])\n const dataDomain = this.dataScale.domain()\n const halfGroupWidth = this._getBarWidth() / 2\n\n const dataScaleValues = this._barData.map((d, i) => getNumber(d, this.config.x, i))\n const firstDataValue = min(dataScaleValues)\n const lastDataValue = max(dataScaleValues)\n const firstValuePx = this.dataScale(firstDataValue)\n const lastValuePx = this.dataScale(lastDataValue)\n\n const dataDomainRequiredStart = this.dataScale.invert(firstValuePx + (isHorizontalAndFlipped ? halfGroupWidth : -halfGroupWidth))\n const dataDomainRequiredEnd = this.dataScale.invert(lastValuePx + (isHorizontalAndFlipped ? -halfGroupWidth : halfGroupWidth))\n const bleedPxStart = dataDomainRequiredStart <= dataDomain[0] ? this.dataScale(dataDomain[0]) - this.dataScale(dataDomainRequiredStart) : 0\n const bleedPxEnd = dataDomainRequiredEnd > dataDomain[1] ? this.dataScale(dataDomainRequiredEnd) - this.dataScale(dataDomain[1]) : 0\n\n return {\n top: this.isVertical() ? 0 : (isHorizontalAndFlipped ? -bleedPxEnd : bleedPxStart),\n bottom: this.isVertical() ? 0 : (isHorizontalAndFlipped ? -bleedPxStart : bleedPxEnd),\n left: this.isVertical() ? bleedPxStart : 0,\n right: this.isVertical() ? bleedPxEnd : 0,\n }\n }\n\n private get dataScale (): ContinuousScale {\n return this.isVertical() ? this.xScale : this.yScale\n }\n\n private get valueScale (): ContinuousScale {\n return this.isVertical() ? this.yScale : this.xScale\n }\n\n private isVertical (): boolean {\n return this.config.orientation === Orientation.Vertical\n }\n\n _render (customDuration?: number): void {\n const { config } = this\n const duration = isNumber(customDuration) ? customDuration : config.duration\n\n const yAccessors = this.getAccessors()\n const stacked = getStackedData(this._barData, 0, yAccessors, this._prevNegative)\n this._prevNegative = stacked.map(s => !!s.isMostlyNegative)\n\n const barGroups = this.g\n .selectAll<SVGGElement, Datum>(`.${s.barGroup}`)\n .data(this._barData, (d, i) => `${getString(d, config.id, i) ?? i}`)\n\n const getBarGroupsTransform = (d: Datum, i: number): string => {\n const v = this.dataScale(getNumber(d, config.x, i))\n const x = this.isVertical() ? v : 0\n const y = this.isVertical() ? 0 : v\n return `translate(${x},${y})`\n }\n\n const barGroupsEnter = barGroups.enter().append('g')\n .attr('class', s.barGroup)\n .attr('transform', getBarGroupsTransform)\n .style('opacity', 1)\n\n const barGroupsMerged = barGroupsEnter.merge(barGroups)\n smartTransition(barGroupsMerged, duration)\n .attr('transform', getBarGroupsTransform)\n .style('opacity', 1)\n\n const barGroupExit = barGroups.exit()\n .attr('class', s.barGroupExit)\n\n smartTransition(barGroupExit, duration)\n .style('opacity', 0)\n .remove()\n\n // Animate bars from exiting groups going down\n smartTransition(barGroupExit.selectAll(`.${s.bar}`), duration)\n .attr('transform', this.isVertical()\n ? `translate(0,${this._height / 3})`\n : `translate(${this._width / 6},0)`\n )\n\n // Render Bars\n const bars = barGroupsMerged\n .selectAll<SVGPathElement, StackedBarDataRecord<Datum>>(`.${s.bar}`)\n .data(\n (d, j) => stacked\n .map((s, i) => ({\n datum: d,\n index: j,\n stacked: s[j],\n stackIndex: i,\n // Ending bar if the next stack is not the same as the current one\n isEnding: (i === stacked.length - 1) ||\n ((i <= stacked.length - 1) && stacked[i + 1][j][0] !== s[j][1]),\n }))\n .filter(d => d.stacked[0] !== d.stacked[1]), // Skip zero-height bars\n d => d.stackIndex // Key function for proper transitions\n )\n\n const barsEnter = bars.enter().append('path')\n .attr('class', s.bar)\n .attr('d', d => this._getBarPath(d, true))\n .style('fill', d => getColor(d.datum, config.color, d.stackIndex))\n\n const barsMerged = barsEnter.merge(bars)\n\n smartTransition(barsMerged, duration)\n .attr('d', d => this._getBarPath(d))\n .style('fill', d => getColor(d.datum, config.color, d.stackIndex))\n .style('cursor', d => getString(d.datum, config.cursor, d.stackIndex))\n\n smartTransition(bars.exit(), duration)\n .style('opacity', 0)\n .remove()\n }\n\n _getBarWidth (): number {\n const { config, datamodel: { data } } = this\n if (isEmpty(data)) return 0\n if (config.barWidth) return min([config.barWidth, config.barMaxWidth])\n\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n const isOrdinal = this.dataScale.bandwidth\n const domain = (this.dataScale.domain ? this.dataScale.domain() : []) as number[]\n const domainLength = isOrdinal ? domain.length : domain[1] - domain[0]\n\n // If the dataStep property is provided the amount of data elements is calculates as domainLength / dataStep\n // otherwise we get the number of data elements within the domain range\n // Or if the scale is ordinal we use data.length\n let dataSize = (1 + domainLength / config.dataStep) ||\n (!isOrdinal && data.filter((d, i) => {\n const value = getNumber(d, config.x, i)\n return (value >= domain[0]) && (value <= domain[1])\n }).length) ||\n data.length\n\n // We increase the dataSize by 1 to take into account possible additional domain space\n if (!isOrdinal && dataSize >= 2) dataSize += 1\n\n const c = dataSize < 2 ? 1 : 1 - config.barPadding\n const barWidth = c * (this.isVertical() ? this._width : this._height) / dataSize\n\n return min([barWidth, config.barMaxWidth])\n }\n\n _getVisibleData (): Datum[] {\n const { config, datamodel: { data } } = this\n\n const groupWidth = this._getBarWidth()\n const halfGroupWidthPx = data.length < 2 ? 0 : groupWidth / 2\n\n const scale = this.dataScale\n const halfGroupWidth = Math.abs((scale.invert(halfGroupWidthPx) as number) - (scale.invert(0) as number))\n const filtered = data?.filter((d, i) => {\n const v = getNumber(d, config.x, i)\n const domain: number[] | Date[] = scale.domain()\n const domainMin = +domain[0]\n const domainMax = +domain[1]\n return (v >= (domainMin - halfGroupWidth)) && (v <= (domainMax + halfGroupWidth))\n })\n\n return filtered\n }\n\n _getBarPath (d: StackedBarDataRecord<Datum>, isEntering = false): string {\n const { config } = this\n const yAccessors = this.getAccessors()\n const barWidth = this._getBarWidth()\n\n const isNegative = d.stacked[1] < 0\n const isEnding = d.isEnding // The most top bar or, if the value is negative, the most bottom bar\n const value = getNumber(d.datum, yAccessors[d.stackIndex], d.index)\n const height = isEntering ? 0 : Math.abs(this.valueScale(d.stacked[0]) - this.valueScale(d.stacked[1]))\n const h = !isEntering && config.barMinHeight1Px && (height < 1) && isFinite(value) && (value !== config.barMinHeightZeroValue) ? 1 : height\n const y = isEntering\n ? this.valueScale(0)\n : this.valueScale(isNegative ? d.stacked[0] : d.stacked[1]) - (height < 1 && config.barMinHeight1Px ? 1 : 0)\n\n const x = -barWidth / 2\n const width = barWidth\n\n const cornerRadius = config.roundedCorners\n ? isNumber(config.roundedCorners) ? +config.roundedCorners : width / 2\n : 0\n const cornerRadiusClamped = clamp(cornerRadius, 0, Math.min(height, width) / 2)\n const isNorthDirected = this.yScale.range()[0] > this.yScale.range()[1]\n\n return roundedRectPath({\n x: this.isVertical() ? x : y - h,\n y: this.isVertical() ? y + (isNorthDirected ? 0 : -h) : x,\n w: this.isVertical() ? width : h,\n h: this.isVertical() ? h : width,\n tl: isEnding && (this.isVertical()\n ? (!isNegative && isNorthDirected) || (isNegative && !isNorthDirected)\n : isNegative\n ),\n tr: isEnding && (this.isVertical()\n ? (!isNegative && isNorthDirected) || (isNegative && !isNorthDirected)\n : !isNegative\n ),\n br: isEnding && (this.isVertical()\n ? (isNegative && isNorthDirected) || (!isNegative && !isNorthDirected)\n : !isNegative\n ),\n bl: isEnding && (this.isVertical()\n ? (isNegative && isNorthDirected) || (!isNegative && !isNorthDirected)\n : isNegative\n ),\n r: cornerRadiusClamped,\n })\n }\n\n getValueScaleExtent (scaleByVisibleData: boolean): number[] {\n const { datamodel } = this\n const yAccessors = this.getAccessors()\n\n const data = scaleByVisibleData ? this._getVisibleData() : datamodel.data\n return getStackedExtent(data, ...yAccessors)\n }\n\n getDataScaleExtent (): number[] {\n const { config, datamodel } = this\n return getExtent(datamodel.data, config.x)\n }\n\n getYDataExtent (scaleByVisibleData: boolean): number[] {\n return this.isVertical() ? this.getValueScaleExtent(scaleByVisibleData) : this.getDataScaleExtent()\n }\n\n getXDataExtent (): number[] {\n return this.isVertical() ? this.getDataScaleExtent() : this.getValueScaleExtent(false)\n }\n}\n"],"names":["s.barGroup","barGroupExit","s.barGroupExit","s.bar","s"],"mappings":"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"}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
export declare type StackedBarDataRecord<D> =
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
export declare type StackedBarDataRecord<D> = {
|
|
2
|
+
datum: D;
|
|
3
|
+
index: number;
|
|
4
|
+
stacked: [number, number];
|
|
5
|
+
stackIndex: number;
|
|
6
|
+
isEnding: boolean;
|
|
5
7
|
};
|
|
@@ -25,6 +25,8 @@ export interface TreemapConfigInterface<Datum> extends ComponentConfigInterface
|
|
|
25
25
|
* Default: `undefined`
|
|
26
26
|
*/
|
|
27
27
|
tilePaddingTop?: number;
|
|
28
|
+
/** Append SVG `<title>` element to tile rects. It will be shown when hovering over the tile. Default: `false` */
|
|
29
|
+
tileShowHtmlTooltip?: boolean;
|
|
28
30
|
/** Label internal nodes. Default: `false` */
|
|
29
31
|
labelInternalNodes?: boolean;
|
|
30
32
|
/** Label offset in the X direction. Default: `4` */
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ComponentDefaultConfig } from '../../core/component/config.js';
|
|
2
2
|
import { FitMode, TrimMode } from '../../types/text.js';
|
|
3
3
|
|
|
4
|
-
const TreemapDefaultConfig = Object.assign(Object.assign({}, ComponentDefaultConfig), { id: (d, i) => { var _a; return (_a = d.id) !== null && _a !== void 0 ? _a : i; }, value: undefined, tileColor: undefined, layers: [], tilePadding: 2, tilePaddingTop: undefined, labelInternalNodes: false, labelOffsetX: 4, labelOffsetY: 4, labelFit: FitMode.Wrap, labelTrimMode: TrimMode.Middle, tileBorderRadius: 2, tileBorderRadiusFactor: 1 / 8, enableLightnessVariance: false, enableTileLabelFontSizeVariation: true, tileLabelSmallFontSize: 8, tileLabelMediumFontSize: 12, tileLabelLargeFontSize: 22, showTileClickAffordance: false, lightnessVariationAmount: 0.08, minTileSizeForLabel: 20, numberFormat: (value) => `${value}`, tileLabel: function (d) { return `${d.data.key}: ${this.numberFormat(d.value)}`; } });
|
|
4
|
+
const TreemapDefaultConfig = Object.assign(Object.assign({}, ComponentDefaultConfig), { id: (d, i) => { var _a; return (_a = d.id) !== null && _a !== void 0 ? _a : i; }, value: undefined, tileColor: undefined, layers: [], tilePadding: 2, tilePaddingTop: undefined, tileShowHtmlTooltip: true, labelInternalNodes: false, labelOffsetX: 4, labelOffsetY: 4, labelFit: FitMode.Wrap, labelTrimMode: TrimMode.Middle, tileBorderRadius: 2, tileBorderRadiusFactor: 1 / 8, enableLightnessVariance: false, enableTileLabelFontSizeVariation: true, tileLabelSmallFontSize: 8, tileLabelMediumFontSize: 12, tileLabelLargeFontSize: 22, showTileClickAffordance: false, lightnessVariationAmount: 0.08, minTileSizeForLabel: 20, numberFormat: (value) => `${value}`, tileLabel: function (d) { return `${d.data.key}: ${this.numberFormat(d.value)}`; } });
|
|
5
5
|
|
|
6
6
|
export { TreemapDefaultConfig };
|
|
7
7
|
//# sourceMappingURL=config.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"config.js","sources":["../../../src/components/treemap/config.ts"],"sourcesContent":["import { ComponentConfigInterface, ComponentDefaultConfig } from 'core/component/config'\nimport { ColorAccessor, NumericAccessor, StringAccessor } from 'types/accessor'\nimport { FitMode, TrimMode } from 'types/text'\nimport { TreemapNode } from './types'\n\nexport interface TreemapConfigInterface<Datum> extends ComponentConfigInterface {\n id?: ((d: Datum, i: number) => string | number);\n /* Numeric accessor for segment size value. Default: `undefined`. */\n value?: NumericAccessor<Datum>;\n\n /** Array of accessor functions to defined the nested groups. Default: `[]` */\n layers: StringAccessor<Datum>[];\n\n /** @deprecated Define `tileLabel` instead.\n * A function that accepts a value number and returns a string. Default: `(value: number) => `${value}`` */\n numberFormat?: (value: number) => string;\n\n /**\n * Function to generate the label text for each tile. Receives the `TreemapNode` and returns a `string`.\n * Default: shows key and formatted value (e.g., \"label: value\").\n */\n tileLabel?: (node: TreemapNode<Datum>) => string;\n\n /** Color accessor function for tiles. Default: `undefined` */\n tileColor?: ColorAccessor<TreemapNode<Datum>>;\n\n /** Padding passed to D3 treemap layout. Default: `2` */\n tilePadding?: number;\n\n /**\n * Top padding passed to D3 treemap layout.\n * Useful to make room for internal node labels.\n * Default: `undefined`\n */\n tilePaddingTop?: number;\n\n /** Label internal nodes. Default: `false` */\n labelInternalNodes?: boolean;\n\n /** Label offset in the X direction. Default: `4` */\n labelOffsetX?: number;\n\n /** Label offset in the Y direction. Default: `4` */\n labelOffsetY?: number;\n\n /** How labels should fit within tiles: wrap or trim. Applicable only for leaf nodes. Default: `FitMode.Wrap` */\n labelFit?: FitMode;\n\n /** Label trimming mode. Default: `TrimMode.Middle` */\n labelTrimMode?: TrimMode;\n\n /** Border radius of the tiles in pixels. Default: `2` */\n tileBorderRadius?: number;\n\n /** Minimum fraction of width for border radius. Default: `1/8` */\n tileBorderRadiusFactor?: number;\n\n /** Enable lightness variance for sibling tiles. Default: `false` */\n enableLightnessVariance?: boolean;\n\n /** Enable font size variation for leaf node labels based on value. Default: `false` */\n enableTileLabelFontSizeVariation?: boolean;\n\n /** Small font size for leaf labels (used when `enableTileLabelFontSizeVariation` is `true`). Default: `8` */\n tileLabelSmallFontSize?: number;\n\n /** Medium font size for leaf labels (used when `enableTileLabelFontSizeVariation` is `true`). Default: `12` */\n tileLabelMediumFontSize?: number;\n\n /** Large font size for leaf labels (used when `enableTileLabelFontSizeVariation` is `true`). Default: `24` */\n tileLabelLargeFontSize?: number;\n\n
|
|
1
|
+
{"version":3,"file":"config.js","sources":["../../../src/components/treemap/config.ts"],"sourcesContent":["import { ComponentConfigInterface, ComponentDefaultConfig } from 'core/component/config'\nimport { ColorAccessor, NumericAccessor, StringAccessor } from 'types/accessor'\nimport { FitMode, TrimMode } from 'types/text'\nimport { TreemapNode } from './types'\n\nexport interface TreemapConfigInterface<Datum> extends ComponentConfigInterface {\n id?: ((d: Datum, i: number) => string | number);\n /* Numeric accessor for segment size value. Default: `undefined`. */\n value?: NumericAccessor<Datum>;\n\n /** Array of accessor functions to defined the nested groups. Default: `[]` */\n layers: StringAccessor<Datum>[];\n\n /** @deprecated Define `tileLabel` instead.\n * A function that accepts a value number and returns a string. Default: `(value: number) => `${value}`` */\n numberFormat?: (value: number) => string;\n\n /**\n * Function to generate the label text for each tile. Receives the `TreemapNode` and returns a `string`.\n * Default: shows key and formatted value (e.g., \"label: value\").\n */\n tileLabel?: (node: TreemapNode<Datum>) => string;\n\n /** Color accessor function for tiles. Default: `undefined` */\n tileColor?: ColorAccessor<TreemapNode<Datum>>;\n\n /** Padding passed to D3 treemap layout. Default: `2` */\n tilePadding?: number;\n\n /**\n * Top padding passed to D3 treemap layout.\n * Useful to make room for internal node labels.\n * Default: `undefined`\n */\n tilePaddingTop?: number;\n\n /** Append SVG `<title>` element to tile rects. It will be shown when hovering over the tile. Default: `false` */\n tileShowHtmlTooltip?: boolean;\n\n /** Label internal nodes. Default: `false` */\n labelInternalNodes?: boolean;\n\n /** Label offset in the X direction. Default: `4` */\n labelOffsetX?: number;\n\n /** Label offset in the Y direction. Default: `4` */\n labelOffsetY?: number;\n\n /** How labels should fit within tiles: wrap or trim. Applicable only for leaf nodes. Default: `FitMode.Wrap` */\n labelFit?: FitMode;\n\n /** Label trimming mode. Default: `TrimMode.Middle` */\n labelTrimMode?: TrimMode;\n\n /** Border radius of the tiles in pixels. Default: `2` */\n tileBorderRadius?: number;\n\n /** Minimum fraction of width for border radius. Default: `1/8` */\n tileBorderRadiusFactor?: number;\n\n /** Enable lightness variance for sibling tiles. Default: `false` */\n enableLightnessVariance?: boolean;\n\n /** Enable font size variation for leaf node labels based on value. Default: `false` */\n enableTileLabelFontSizeVariation?: boolean;\n\n /** Small font size for leaf labels (used when `enableTileLabelFontSizeVariation` is `true`). Default: `8` */\n tileLabelSmallFontSize?: number;\n\n /** Medium font size for leaf labels (used when `enableTileLabelFontSizeVariation` is `true`). Default: `12` */\n tileLabelMediumFontSize?: number;\n\n /** Large font size for leaf labels (used when `enableTileLabelFontSizeVariation` is `true`). Default: `24` */\n tileLabelLargeFontSize?: number;\n\n /** Flag for showing cursor:pointer to indicate leaf tiles are clickable. Default: `undefined` */\n showTileClickAffordance?: boolean;\n\n /** Amount of lightness variation applied to sibling tiles when `enableLightnessVariance` is `true`. Default: `0.08` */\n lightnessVariationAmount?: number;\n\n /** Minimum size for labels in pixels. Default: `20` */\n minTileSizeForLabel?: number;\n}\n\nexport const TreemapDefaultConfig: TreemapConfigInterface<unknown> = {\n ...ComponentDefaultConfig,\n id: (d: unknown, i: number): string | number => (d as { id: string }).id ?? i,\n value: undefined,\n tileColor: undefined,\n layers: [],\n tilePadding: 2,\n tilePaddingTop: undefined,\n tileShowHtmlTooltip: true,\n labelInternalNodes: false,\n labelOffsetX: 4,\n labelOffsetY: 4,\n labelFit: FitMode.Wrap,\n labelTrimMode: TrimMode.Middle,\n tileBorderRadius: 2,\n tileBorderRadiusFactor: 1 / 8,\n enableLightnessVariance: false,\n enableTileLabelFontSizeVariation: true,\n tileLabelSmallFontSize: 8,\n tileLabelMediumFontSize: 12,\n tileLabelLargeFontSize: 22,\n showTileClickAffordance: false,\n lightnessVariationAmount: 0.08,\n minTileSizeForLabel: 20,\n numberFormat: (value: number) => `${value}`,\n tileLabel: function (d: TreemapNode<unknown>): string { return `${d.data.key}: ${this.numberFormat(d.value)}` },\n}\n"],"names":[],"mappings":";;;AAqFO,MAAM,oBAAoB,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAC5B,sBAAsB,CACzB,EAAA,EAAA,EAAE,EAAE,CAAC,CAAU,EAAE,CAAS,eAAsB,OAAA,CAAA,EAAA,GAAC,CAAoB,CAAC,EAAE,MAAI,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAA,CAAC,CAAA,EAAA,EAC7E,KAAK,EAAE,SAAS,EAChB,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,EAAE,EACV,WAAW,EAAE,CAAC,EACd,cAAc,EAAE,SAAS,EACzB,mBAAmB,EAAE,IAAI,EACzB,kBAAkB,EAAE,KAAK,EACzB,YAAY,EAAE,CAAC,EACf,YAAY,EAAE,CAAC,EACf,QAAQ,EAAE,OAAO,CAAC,IAAI,EACtB,aAAa,EAAE,QAAQ,CAAC,MAAM,EAC9B,gBAAgB,EAAE,CAAC,EACnB,sBAAsB,EAAE,CAAC,GAAG,CAAC,EAC7B,uBAAuB,EAAE,KAAK,EAC9B,gCAAgC,EAAE,IAAI,EACtC,sBAAsB,EAAE,CAAC,EACzB,uBAAuB,EAAE,EAAE,EAC3B,sBAAsB,EAAE,EAAE,EAC1B,uBAAuB,EAAE,KAAK,EAC9B,wBAAwB,EAAE,IAAI,EAC9B,mBAAmB,EAAE,EAAE,EACvB,YAAY,EAAE,CAAC,KAAa,KAAK,CAAG,EAAA,KAAK,CAAE,CAAA,EAC3C,SAAS,EAAE,UAAU,CAAuB,EAAA,EAAY,OAAO,CAAG,EAAA,CAAC,CAAC,IAAI,CAAC,GAAG,CAAA,EAAA,EAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAE,CAAA,CAAA,EAAE;;;;"}
|
|
@@ -9,8 +9,12 @@ export declare class Treemap<Datum> extends ComponentCore<Datum[], TreemapConfig
|
|
|
9
9
|
config: TreemapConfigInterface<Datum>;
|
|
10
10
|
datamodel: SeriesDataModel<Datum>;
|
|
11
11
|
tiles: Selection<SVGGElement, unknown, SVGGElement, unknown>;
|
|
12
|
-
private _isTileLargeEnough;
|
|
13
|
-
private _getTileLightness;
|
|
14
12
|
constructor(config?: TreemapConfigInterface<Datum>);
|
|
15
13
|
_render(customDuration?: number): void;
|
|
14
|
+
private _isTileLargeEnough;
|
|
15
|
+
private _getTopLevelParent;
|
|
16
|
+
private _getTileLightness;
|
|
17
|
+
private _getTileBorderRadius;
|
|
18
|
+
private _getTileHeight;
|
|
19
|
+
private _getTileWidth;
|
|
16
20
|
}
|