@codecademy/gamut 68.0.2-alpha.aec23e.0 → 68.0.2-alpha.f8c3b5.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/BarChart/BarRow/ValueLabelsContent.d.ts +7 -0
- package/dist/BarChart/BarRow/ValueLabelsContent.js +30 -0
- package/dist/BarChart/BarRow/index.js +39 -50
- package/dist/BarChart/index.js +10 -11
- package/dist/BarChart/utils/hooks.d.ts +0 -1
- package/dist/BarChart/utils/hooks.js +1 -3
- package/dist/BarChart/utils/index.d.ts +12 -0
- package/dist/BarChart/utils/index.js +18 -1
- package/package.json +2 -2
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { BarChartStyles } from '../shared/types';
|
|
2
|
+
export type ValueLabelsContentProps = {
|
|
3
|
+
seriesOneFormatted: string;
|
|
4
|
+
displayValueFormatted: string;
|
|
5
|
+
isStacked: boolean;
|
|
6
|
+
} & Pick<Required<BarChartStyles>, 'seriesOneLabel' | 'seriesTwoLabel'>;
|
|
7
|
+
export declare const ValueLabelsContent: ({ seriesOneFormatted, displayValueFormatted, isStacked, seriesOneLabel, seriesTwoLabel, }: ValueLabelsContentProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { MiniArrowRightIcon } from '@codecademy/gamut-icons';
|
|
2
|
+
import { Text } from '../../Typography';
|
|
3
|
+
import { iconPadding } from '../shared/styles';
|
|
4
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
5
|
+
export const ValueLabelsContent = ({
|
|
6
|
+
seriesOneFormatted,
|
|
7
|
+
displayValueFormatted,
|
|
8
|
+
isStacked,
|
|
9
|
+
seriesOneLabel,
|
|
10
|
+
seriesTwoLabel
|
|
11
|
+
}) => /*#__PURE__*/_jsxs(_Fragment, {
|
|
12
|
+
children: [isStacked && /*#__PURE__*/_jsxs(_Fragment, {
|
|
13
|
+
children: [/*#__PURE__*/_jsx(Text, {
|
|
14
|
+
color: seriesOneLabel,
|
|
15
|
+
variant: "p-small",
|
|
16
|
+
whiteSpace: "nowrap",
|
|
17
|
+
children: seriesOneFormatted
|
|
18
|
+
}), /*#__PURE__*/_jsx(MiniArrowRightIcon, {
|
|
19
|
+
color: seriesOneLabel,
|
|
20
|
+
mx: iconPadding,
|
|
21
|
+
size: 16
|
|
22
|
+
})]
|
|
23
|
+
}), /*#__PURE__*/_jsx(Text, {
|
|
24
|
+
color: isStacked ? seriesTwoLabel : seriesOneLabel,
|
|
25
|
+
fontWeight: isStacked ? 'bold' : 'normal',
|
|
26
|
+
variant: "p-small",
|
|
27
|
+
whiteSpace: "nowrap",
|
|
28
|
+
children: displayValueFormatted
|
|
29
|
+
})]
|
|
30
|
+
});
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { MiniArrowRightIcon } from '@codecademy/gamut-icons';
|
|
2
1
|
import { forwardRef, useMemo, useRef } from 'react';
|
|
3
2
|
import { Box, FlexBox } from '../../Box';
|
|
4
3
|
import { Text } from '../../Typography';
|
|
5
4
|
import { iconPadding, iconWidth, minBarWidth } from '../shared/styles';
|
|
6
|
-
import { calculateBarWidth, getValuesSummary } from '../utils';
|
|
5
|
+
import { calculateBarWidth, formatValueWithUnit, getValuesSummary } from '../utils';
|
|
7
6
|
import { useBarBorderColor, useBarChartContext, useMeasureLeftLabelWidth, useMeasureRightLabelWidth } from '../utils/hooks';
|
|
8
7
|
import { Bar, BarWrapper, RightLabelsHoverTarget, RowAnchor, RowButton, RowWrapper } from './elements';
|
|
8
|
+
import { ValueLabelsContent } from './ValueLabelsContent';
|
|
9
9
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
10
10
|
export const BarRow = /*#__PURE__*/forwardRef(({
|
|
11
11
|
yLabel,
|
|
@@ -81,11 +81,33 @@ export const BarRow = /*#__PURE__*/forwardRef(({
|
|
|
81
81
|
const animationDelay = animate ? index * 0.1 : 0;
|
|
82
82
|
const widthValue = widestLeftLabelWidth === null ? 'min-content' : widestLeftLabelWidth;
|
|
83
83
|
const rightWidthValue = widestRightLabelWidth === null ? 'min-content' : widestRightLabelWidth;
|
|
84
|
+
const {
|
|
85
|
+
seriesOneFormatted,
|
|
86
|
+
displayValueFormatted
|
|
87
|
+
} = useMemo(() => ({
|
|
88
|
+
seriesOneFormatted: formatValueWithUnit({
|
|
89
|
+
value: seriesOneValue,
|
|
90
|
+
unit,
|
|
91
|
+
locale: translations.locale
|
|
92
|
+
}),
|
|
93
|
+
displayValueFormatted: formatValueWithUnit({
|
|
94
|
+
value: displayValue,
|
|
95
|
+
unit,
|
|
96
|
+
locale: translations.locale
|
|
97
|
+
})
|
|
98
|
+
}), [seriesOneValue, displayValue, unit, translations.locale]);
|
|
99
|
+
const valueLabelsContent = useMemo(() => /*#__PURE__*/_jsx(ValueLabelsContent, {
|
|
100
|
+
displayValueFormatted: displayValueFormatted,
|
|
101
|
+
isStacked: isStacked,
|
|
102
|
+
seriesOneFormatted: seriesOneFormatted,
|
|
103
|
+
seriesOneLabel: seriesOneLabel,
|
|
104
|
+
seriesTwoLabel: seriesTwoLabel
|
|
105
|
+
}), [displayValueFormatted, isStacked, seriesOneFormatted, seriesOneLabel, seriesTwoLabel]);
|
|
84
106
|
const labelsContainer = useMemo(() => /*#__PURE__*/_jsxs(FlexBox, {
|
|
85
107
|
alignItems: "center",
|
|
86
108
|
display: {
|
|
87
109
|
_: 'flex',
|
|
88
|
-
|
|
110
|
+
c_xs: 'none'
|
|
89
111
|
},
|
|
90
112
|
gap: 8,
|
|
91
113
|
justifyContent: "space-between",
|
|
@@ -104,50 +126,34 @@ export const BarRow = /*#__PURE__*/forwardRef(({
|
|
|
104
126
|
whiteSpace: "nowrap",
|
|
105
127
|
children: yLabel
|
|
106
128
|
})]
|
|
107
|
-
}), /*#__PURE__*/
|
|
129
|
+
}), /*#__PURE__*/_jsx(RightLabelsHoverTarget, {
|
|
108
130
|
alignItems: "center",
|
|
109
131
|
flexShrink: 0,
|
|
110
132
|
gap: 8,
|
|
111
133
|
justifyContent: "flex-end",
|
|
112
|
-
children:
|
|
113
|
-
children: [/*#__PURE__*/_jsxs(Text, {
|
|
114
|
-
color: seriesOneLabel,
|
|
115
|
-
variant: "p-small",
|
|
116
|
-
whiteSpace: "nowrap",
|
|
117
|
-
children: [seriesOneValue.toLocaleString(translations.locale), unit && ` ${unit}`]
|
|
118
|
-
}), /*#__PURE__*/_jsx(MiniArrowRightIcon, {
|
|
119
|
-
color: seriesOneLabel,
|
|
120
|
-
size: 16
|
|
121
|
-
})]
|
|
122
|
-
}), /*#__PURE__*/_jsxs(Text, {
|
|
123
|
-
color: isStacked ? seriesTwoLabel : seriesOneLabel,
|
|
124
|
-
fontWeight: isStacked ? 'bold' : 'normal',
|
|
125
|
-
variant: "p-small",
|
|
126
|
-
whiteSpace: "nowrap",
|
|
127
|
-
children: [displayValue.toLocaleString(translations.locale), unit && ` ${unit}`]
|
|
128
|
-
})]
|
|
134
|
+
children: valueLabelsContent
|
|
129
135
|
})]
|
|
130
|
-
}), [textColor, Icon, yLabel,
|
|
136
|
+
}), [textColor, Icon, yLabel, valueLabelsContent]);
|
|
131
137
|
const leftLabel = useMemo(() => /*#__PURE__*/_jsxs(FlexBox, {
|
|
132
138
|
alignItems: "center",
|
|
133
139
|
color: textColor,
|
|
134
140
|
display: {
|
|
135
141
|
_: 'none',
|
|
136
|
-
|
|
142
|
+
c_xs: 'flex'
|
|
137
143
|
},
|
|
138
144
|
flexShrink: 0,
|
|
139
145
|
pr: {
|
|
140
146
|
_: 0,
|
|
141
|
-
|
|
147
|
+
c_xs: 24
|
|
142
148
|
},
|
|
143
149
|
ref: labelRef,
|
|
144
150
|
width: {
|
|
145
151
|
_: 'auto',
|
|
146
|
-
|
|
152
|
+
c_xs: widthValue
|
|
147
153
|
},
|
|
148
154
|
children: [Icon && /*#__PURE__*/_jsx(Icon, {
|
|
149
|
-
mr:
|
|
150
|
-
size:
|
|
155
|
+
mr: iconPadding,
|
|
156
|
+
size: iconWidth
|
|
151
157
|
}), /*#__PURE__*/_jsx(Text, {
|
|
152
158
|
fontWeight: "bold",
|
|
153
159
|
truncate: "ellipsis",
|
|
@@ -156,42 +162,25 @@ export const BarRow = /*#__PURE__*/forwardRef(({
|
|
|
156
162
|
children: yLabel
|
|
157
163
|
})]
|
|
158
164
|
}), [textColor, Icon, yLabel, widthValue]);
|
|
159
|
-
const rightLabel = useMemo(() => /*#__PURE__*/
|
|
165
|
+
const rightLabel = useMemo(() => /*#__PURE__*/_jsx(RightLabelsHoverTarget, {
|
|
160
166
|
alignItems: "center",
|
|
161
167
|
display: {
|
|
162
168
|
_: 'none',
|
|
163
|
-
|
|
169
|
+
c_xs: 'flex'
|
|
164
170
|
},
|
|
165
171
|
flexShrink: 0,
|
|
166
172
|
justifyContent: "flex-end",
|
|
167
173
|
pl: {
|
|
168
174
|
_: 0,
|
|
169
|
-
|
|
175
|
+
c_xs: 24
|
|
170
176
|
},
|
|
171
177
|
ref: rightLabelRef,
|
|
172
178
|
width: {
|
|
173
179
|
_: 'auto',
|
|
174
|
-
|
|
180
|
+
c_xs: rightWidthValue
|
|
175
181
|
},
|
|
176
|
-
children:
|
|
177
|
-
|
|
178
|
-
color: seriesOneLabel,
|
|
179
|
-
variant: "p-small",
|
|
180
|
-
whiteSpace: "nowrap",
|
|
181
|
-
children: [seriesOneValue.toLocaleString(translations.locale), unit && ` ${unit}`]
|
|
182
|
-
}), /*#__PURE__*/_jsx(MiniArrowRightIcon, {
|
|
183
|
-
color: seriesOneLabel,
|
|
184
|
-
mx: 12,
|
|
185
|
-
size: 16
|
|
186
|
-
})]
|
|
187
|
-
}), /*#__PURE__*/_jsxs(Text, {
|
|
188
|
-
color: isStacked ? seriesTwoLabel : seriesOneLabel,
|
|
189
|
-
fontWeight: isStacked ? 'bold' : 'normal',
|
|
190
|
-
variant: "p-small",
|
|
191
|
-
whiteSpace: "nowrap",
|
|
192
|
-
children: [displayValue.toLocaleString(translations.locale), unit && ` ${unit}`]
|
|
193
|
-
})]
|
|
194
|
-
}), [isStacked, seriesOneValue, seriesOneLabel, seriesTwoLabel, displayValue, unit, translations.locale, rightWidthValue]);
|
|
182
|
+
children: valueLabelsContent
|
|
183
|
+
}), [valueLabelsContent, rightWidthValue]);
|
|
195
184
|
const rowContent = useMemo(() => /*#__PURE__*/_jsxs(_Fragment, {
|
|
196
185
|
children: [labelsContainer, leftLabel, /*#__PURE__*/_jsxs(BarWrapper, {
|
|
197
186
|
children: [/*#__PURE__*/_jsx(Bar, {
|
package/dist/BarChart/index.js
CHANGED
|
@@ -11,6 +11,7 @@ import { GridLines } from './layout/GridLines';
|
|
|
11
11
|
import { ScaleChartHeader } from './layout/ScaleChartHeader';
|
|
12
12
|
import { BarsList } from './shared/elements';
|
|
13
13
|
import { defaultBarChartTranslations } from './shared/translations';
|
|
14
|
+
import { getBarRowKey } from './utils';
|
|
14
15
|
import { useBarChart, useBarChartSort } from './utils/hooks';
|
|
15
16
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
16
17
|
const StyledFormGroupLabel = /*#__PURE__*/_styled(FormGroupLabel, {
|
|
@@ -19,14 +20,14 @@ const StyledFormGroupLabel = /*#__PURE__*/_styled(FormGroupLabel, {
|
|
|
19
20
|
})(css({
|
|
20
21
|
mr: 8,
|
|
21
22
|
mt: 4
|
|
22
|
-
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
23
|
+
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9CYXJDaGFydC9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBbUM2QiIsImZpbGUiOiIuLi8uLi9zcmMvQmFyQ2hhcnQvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHVzZUlkLCB1c2VNZW1vIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBCb3gsIEZsZXhCb3ggfSBmcm9tICcuLi9Cb3gnO1xuaW1wb3J0IHsgRm9ybUdyb3VwTGFiZWwgfSBmcm9tICcuLi9Gb3JtJztcbmltcG9ydCB7IFNlbGVjdCB9IGZyb20gJy4uL0Zvcm0vaW5wdXRzL1NlbGVjdCc7XG5pbXBvcnQgeyBUZXh0IH0gZnJvbSAnLi4vVHlwb2dyYXBoeS9UZXh0JztcbmltcG9ydCB7IEJhckNoYXJ0UHJvdmlkZXIgfSBmcm9tICcuL0JhckNoYXJ0UHJvdmlkZXInO1xuaW1wb3J0IHsgQmFyUm93IH0gZnJvbSAnLi9CYXJSb3cnO1xuaW1wb3J0IHsgR3JpZExpbmVzIH0gZnJvbSAnLi9sYXlvdXQvR3JpZExpbmVzJztcbmltcG9ydCB7IFNjYWxlQ2hhcnRIZWFkZXIgfSBmcm9tICcuL2xheW91dC9TY2FsZUNoYXJ0SGVhZGVyJztcbmltcG9ydCB7IEJhcnNMaXN0IH0gZnJvbSAnLi9zaGFyZWQvZWxlbWVudHMnO1xuaW1wb3J0IHtcbiAgQmFyQ2hhcnRBY2Nlc3NpYmlsaXR5SW5MYWJlbENvbnRleHQsXG4gIEJhckNoYXJ0QWNjZXNzaWJpbGl0eUluT25seUNvbnRleHQsXG4gIEJhckNoYXJ0QWNjZXNzaWJpbGl0eVN0YWNrZWRDb250ZXh0LFxuICBCYXJDaGFydFRyYW5zbGF0aW9ucyxcbiAgZGVmYXVsdEJhckNoYXJ0VHJhbnNsYXRpb25zLFxuICBQYXJ0aWFsQmFyQ2hhcnRUcmFuc2xhdGlvbnMsXG59IGZyb20gJy4vc2hhcmVkL3RyYW5zbGF0aW9ucyc7XG5pbXBvcnQgeyBCYXJDaGFydFByb3BzLCBCYXJQcm9wcywgSW5mZXJCYXJUeXBlIH0gZnJvbSAnLi9zaGFyZWQvdHlwZXMnO1xuaW1wb3J0IHsgZ2V0QmFyUm93S2V5IH0gZnJvbSAnLi91dGlscyc7XG5pbXBvcnQgeyB1c2VCYXJDaGFydCwgdXNlQmFyQ2hhcnRTb3J0IH0gZnJvbSAnLi91dGlscy9ob29rcyc7XG5cbmV4cG9ydCB0eXBlIHtcbiAgQmFyQ2hhcnRBY2Nlc3NpYmlsaXR5SW5MYWJlbENvbnRleHQsXG4gIEJhckNoYXJ0QWNjZXNzaWJpbGl0eUluT25seUNvbnRleHQsXG4gIEJhckNoYXJ0QWNjZXNzaWJpbGl0eVN0YWNrZWRDb250ZXh0LFxuICBCYXJQcm9wcyxcbiAgSW5mZXJCYXJUeXBlLFxuICBCYXJDaGFydFRyYW5zbGF0aW9ucyxcbiAgUGFydGlhbEJhckNoYXJ0VHJhbnNsYXRpb25zLFxufTtcblxuY29uc3QgU3R5bGVkRm9ybUdyb3VwTGFiZWwgPSBzdHlsZWQoRm9ybUdyb3VwTGFiZWwpKFxuICBjc3Moe1xuICAgIG1yOiA4LFxuICAgIG10OiA0LFxuICB9KVxuKTtcbmNvbnN0IFdpZHRoU2VsZWN0ID0gc3R5bGVkKFNlbGVjdCkoXG4gIGNzcyh7XG4gICAgd2lkdGg6ICdtYXgtY29udGVudCcsXG4gICAgcHI6IDEyLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IEJhckNoYXJ0ID0gPFxuICBUQmFyVmFsdWVzIGV4dGVuZHMgQmFyUHJvcHNbXSB8IHJlYWRvbmx5IEJhclByb3BzW10gPSBCYXJQcm9wc1tdXG4+KHtcbiAgJ2FyaWEtbGFiZWxsZWRieSc6IGFyaWFMYWJlbGxlZEJ5LFxuICBhbmltYXRlID0gZmFsc2UsXG4gIGJhclZhbHVlcyxcbiAgZGVzY3JpcHRpb24sXG4gIGhpZGVEZXNjcmlwdGlvbiA9IGZhbHNlLFxuICBoaWRlVGl0bGUgPSBmYWxzZSxcbiAgbWF4UmFuZ2UsXG4gIHNvcnRGbnMsXG4gIHN0eWxlQ29uZmlnLFxuICB0aXRsZSxcbiAgdHJhbnNsYXRpb25zLFxuICB1bml0ID0gJycsXG4gIHhTY2FsZSxcbn06IEJhckNoYXJ0UHJvcHM8VEJhclZhbHVlcz4pID0+IHtcbiAgY29uc3QgbWVyZ2VkVHJhbnNsYXRpb25zID0gdXNlTWVtbyhcbiAgICAoKSA9PiAoe1xuICAgICAgLi4uZGVmYXVsdEJhckNoYXJ0VHJhbnNsYXRpb25zLFxuICAgICAgLi4udHJhbnNsYXRpb25zLFxuICAgICAgc29ydE9wdGlvbnM6IHtcbiAgICAgICAgLi4uZGVmYXVsdEJhckNoYXJ0VHJhbnNsYXRpb25zLnNvcnRPcHRpb25zLFxuICAgICAgICAuLi50cmFuc2xhdGlvbnM/LnNvcnRPcHRpb25zLFxuICAgICAgfSxcbiAgICAgIGFjY2Vzc2liaWxpdHk6IHtcbiAgICAgICAgLi4uZGVmYXVsdEJhckNoYXJ0VHJhbnNsYXRpb25zLmFjY2Vzc2liaWxpdHksXG4gICAgICAgIC4uLnRyYW5zbGF0aW9ucz8uYWNjZXNzaWJpbGl0eSxcbiAgICAgIH0sXG4gICAgfSksXG4gICAgW3RyYW5zbGF0aW9uc11cbiAgKTtcblxuICBjb25zdCB7IHNvcnRlZEJhcnMsIHNlbGVjdFByb3BzIH0gPSB1c2VCYXJDaGFydFNvcnQ8VEJhclZhbHVlcz4oe1xuICAgIGJhcnM6IGJhclZhbHVlcyxcbiAgICBzb3J0Rm5zLFxuICAgIHRyYW5zbGF0aW9uczogbWVyZ2VkVHJhbnNsYXRpb25zLFxuICB9KTtcblxuICBjb25zdCBjb250ZXh0VmFsdWUgPSB1c2VCYXJDaGFydCh7XG4gICAgbWF4UmFuZ2UsXG4gICAgeFNjYWxlLFxuICAgIHVuaXQsXG4gICAgc3R5bGVDb25maWcsXG4gICAgYW5pbWF0ZSxcbiAgICBiYXJDb3VudDogc29ydGVkQmFycz8ubGVuZ3RoLFxuICAgIHRyYW5zbGF0aW9uczogbWVyZ2VkVHJhbnNsYXRpb25zLFxuICB9KTtcblxuICBjb25zdCB0aWNrQ291bnQgPSBNYXRoLmNlaWwobWF4UmFuZ2UgLyBjb250ZXh0VmFsdWUueFNjYWxlKSArIDE7XG5cbiAgY29uc3QgdGl0bGVJZCA9IHVzZUlkKCk7XG4gIGNvbnN0IHNvcnRTZWxlY3RJZCA9IHVzZUlkKCk7XG5cbiAgY29uc3QgdGl0bGVQcm9wcyA9XG4gICAgdHlwZW9mIHRpdGxlID09PSAnc3RyaW5nJ1xuICAgICAgPyB7XG4gICAgICAgICAgYXM6ICdoMicgYXMgY29uc3QsXG4gICAgICAgICAgY2hpbGRyZW46IHRpdGxlLFxuICAgICAgICAgIGhpZGRlbjogaGlkZVRpdGxlLFxuICAgICAgICAgIGlkOiB0aXRsZUlkLFxuICAgICAgICAgIHZhcmlhbnQ6ICd0aXRsZS14cycgYXMgY29uc3QsXG4gICAgICAgIH1cbiAgICAgIDogdGl0bGVcbiAgICAgID8geyAuLi50aXRsZSwgY2hpbGRyZW46IHRpdGxlLnRpdGxlLCBoaWRkZW46IGhpZGVUaXRsZSwgaWQ6IHRpdGxlSWQgfVxuICAgICAgOiBudWxsO1xuXG4gIGNvbnN0IHRpdGxlQ29udGVudCA9XG4gICAgKHRpdGxlICYmICFoaWRlVGl0bGUpIHx8IHNlbGVjdFByb3BzID8gKFxuICAgICAgPEJveFxuICAgICAgICBib3JkZXJCb3R0b209ezF9XG4gICAgICAgIGJvcmRlckNvbG9yPVwiYmFja2dyb3VuZC1kaXNhYmxlZFwiXG4gICAgICAgIG1iPXsyNH1cbiAgICAgICAgcGI9ezh9XG4gICAgICAgIHdpZHRoPVwiMTAwJVwiXG4gICAgICA+XG4gICAgICAgIDxGbGV4Qm94XG4gICAgICAgICAgYWxpZ25JdGVtcz1cImNlbnRlclwiXG4gICAgICAgICAganVzdGlmeUNvbnRlbnQ9XCJzcGFjZS1iZXR3ZWVuXCJcbiAgICAgICAgICB3aWR0aD1cIjEwMCVcIlxuICAgICAgICA+XG4gICAgICAgICAge3RpdGxlUHJvcHMgJiYgPFRleHQgbWI9ezR9IHsuLi50aXRsZVByb3BzfSAvPn1cbiAgICAgICAgICB7c2VsZWN0UHJvcHMgJiYgKFxuICAgICAgICAgICAgPEZsZXhCb3ggYWxpZ25JdGVtcz1cImNlbnRlclwiPlxuICAgICAgICAgICAgICA8U3R5bGVkRm9ybUdyb3VwTGFiZWxcbiAgICAgICAgICAgICAgICBodG1sRm9yPXtzb3J0U2VsZWN0SWR9XG4gICAgICAgICAgICAgICAgaXNTb2xvRmllbGRcbiAgICAgICAgICAgICAgICBzaXplPVwic21hbGxcIlxuICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAge21lcmdlZFRyYW5zbGF0aW9ucy5zb3J0TGFiZWx9XG4gICAgICAgICAgICAgIDwvU3R5bGVkRm9ybUdyb3VwTGFiZWw+XG4gICAgICAgICAgICAgIDxXaWR0aFNlbGVjdFxuICAgICAgICAgICAgICAgIHNpemVWYXJpYW50PVwic21hbGxcIlxuICAgICAgICAgICAgICAgIHsuLi5zZWxlY3RQcm9wc31cbiAgICAgICAgICAgICAgICBpZD17c29ydFNlbGVjdElkfVxuICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgPC9GbGV4Qm94PlxuICAgICAgICAgICl9XG4gICAgICAgIDwvRmxleEJveD5cbiAgICAgIDwvQm94PlxuICAgICkgOiB0aXRsZVByb3BzID8gKFxuICAgICAgPFRleHQgey4uLnRpdGxlUHJvcHN9IC8+XG4gICAgKSA6IG51bGw7XG5cbiAgcmV0dXJuIChcbiAgICA8QmFyQ2hhcnRQcm92aWRlciB2YWx1ZT17Y29udGV4dFZhbHVlfT5cbiAgICAgIHt0aXRsZUNvbnRlbnR9XG4gICAgICA8Qm94XG4gICAgICAgIGFzPVwiZmlndXJlXCJcbiAgICAgICAgY29udGFpbmVyVHlwZT1cImlubGluZS1zaXplXCJcbiAgICAgICAgcG9zaXRpb249XCJyZWxhdGl2ZVwiXG4gICAgICAgIHdpZHRoPVwiMTAwJVwiXG4gICAgICA+XG4gICAgICAgIDxTY2FsZUNoYXJ0SGVhZGVyIGxhYmVsQ291bnQ9e3RpY2tDb3VudH0gbWF4PXttYXhSYW5nZX0gbWluPXswfSAvPlxuICAgICAgICA8Qm94IHBvc2l0aW9uPVwicmVsYXRpdmVcIiB3aWR0aD1cIjEwMCVcIj5cbiAgICAgICAgICA8R3JpZExpbmVzIG1heD17bWF4UmFuZ2V9IG1pbj17MH0gdGlja0NvdW50PXt0aWNrQ291bnR9IC8+XG4gICAgICAgICAgPEJhcnNMaXN0IGFyaWEtbGFiZWxsZWRieT17YXJpYUxhYmVsbGVkQnkgPz8gdGl0bGVJZH0+XG4gICAgICAgICAgICB7c29ydGVkQmFycy5tYXAoKGJhciwgaW5kZXgpID0+IChcbiAgICAgICAgICAgICAgPEJhclJvd1xuICAgICAgICAgICAgICAgIGluZGV4PXtpbmRleH1cbiAgICAgICAgICAgICAgICBrZXk9e2dldEJhclJvd0tleShiYXIsIGluZGV4KX1cbiAgICAgICAgICAgICAgICB7Li4uYmFyfVxuICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgKSl9XG4gICAgICAgICAgPC9CYXJzTGlzdD5cbiAgICAgICAgPC9Cb3g+XG4gICAgICAgIDxUZXh0XG4gICAgICAgICAgYXM9XCJmaWdjYXB0aW9uXCJcbiAgICAgICAgICBjb2xvcj1cInRleHQtZGlzYWJsZWRcIlxuICAgICAgICAgIGhpZGRlbj17aGlkZURlc2NyaXB0aW9ufVxuICAgICAgICAgIG10PXs4fVxuICAgICAgICAgIHZhcmlhbnQ9XCJwLXNtYWxsXCJcbiAgICAgICAgPlxuICAgICAgICAgIHtkZXNjcmlwdGlvbn1cbiAgICAgICAgPC9UZXh0PlxuICAgICAgPC9Cb3g+XG4gICAgPC9CYXJDaGFydFByb3ZpZGVyPlxuICApO1xufTtcbiJdfQ== */");
|
|
23
24
|
const WidthSelect = /*#__PURE__*/_styled(Select, {
|
|
24
25
|
target: "ey39o7m0",
|
|
25
26
|
label: "WidthSelect"
|
|
26
27
|
})(css({
|
|
27
28
|
width: 'max-content',
|
|
28
29
|
pr: 12
|
|
29
|
-
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
30
|
+
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9CYXJDaGFydC9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBeUNvQiIsImZpbGUiOiIuLi8uLi9zcmMvQmFyQ2hhcnQvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHVzZUlkLCB1c2VNZW1vIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBCb3gsIEZsZXhCb3ggfSBmcm9tICcuLi9Cb3gnO1xuaW1wb3J0IHsgRm9ybUdyb3VwTGFiZWwgfSBmcm9tICcuLi9Gb3JtJztcbmltcG9ydCB7IFNlbGVjdCB9IGZyb20gJy4uL0Zvcm0vaW5wdXRzL1NlbGVjdCc7XG5pbXBvcnQgeyBUZXh0IH0gZnJvbSAnLi4vVHlwb2dyYXBoeS9UZXh0JztcbmltcG9ydCB7IEJhckNoYXJ0UHJvdmlkZXIgfSBmcm9tICcuL0JhckNoYXJ0UHJvdmlkZXInO1xuaW1wb3J0IHsgQmFyUm93IH0gZnJvbSAnLi9CYXJSb3cnO1xuaW1wb3J0IHsgR3JpZExpbmVzIH0gZnJvbSAnLi9sYXlvdXQvR3JpZExpbmVzJztcbmltcG9ydCB7IFNjYWxlQ2hhcnRIZWFkZXIgfSBmcm9tICcuL2xheW91dC9TY2FsZUNoYXJ0SGVhZGVyJztcbmltcG9ydCB7IEJhcnNMaXN0IH0gZnJvbSAnLi9zaGFyZWQvZWxlbWVudHMnO1xuaW1wb3J0IHtcbiAgQmFyQ2hhcnRBY2Nlc3NpYmlsaXR5SW5MYWJlbENvbnRleHQsXG4gIEJhckNoYXJ0QWNjZXNzaWJpbGl0eUluT25seUNvbnRleHQsXG4gIEJhckNoYXJ0QWNjZXNzaWJpbGl0eVN0YWNrZWRDb250ZXh0LFxuICBCYXJDaGFydFRyYW5zbGF0aW9ucyxcbiAgZGVmYXVsdEJhckNoYXJ0VHJhbnNsYXRpb25zLFxuICBQYXJ0aWFsQmFyQ2hhcnRUcmFuc2xhdGlvbnMsXG59IGZyb20gJy4vc2hhcmVkL3RyYW5zbGF0aW9ucyc7XG5pbXBvcnQgeyBCYXJDaGFydFByb3BzLCBCYXJQcm9wcywgSW5mZXJCYXJUeXBlIH0gZnJvbSAnLi9zaGFyZWQvdHlwZXMnO1xuaW1wb3J0IHsgZ2V0QmFyUm93S2V5IH0gZnJvbSAnLi91dGlscyc7XG5pbXBvcnQgeyB1c2VCYXJDaGFydCwgdXNlQmFyQ2hhcnRTb3J0IH0gZnJvbSAnLi91dGlscy9ob29rcyc7XG5cbmV4cG9ydCB0eXBlIHtcbiAgQmFyQ2hhcnRBY2Nlc3NpYmlsaXR5SW5MYWJlbENvbnRleHQsXG4gIEJhckNoYXJ0QWNjZXNzaWJpbGl0eUluT25seUNvbnRleHQsXG4gIEJhckNoYXJ0QWNjZXNzaWJpbGl0eVN0YWNrZWRDb250ZXh0LFxuICBCYXJQcm9wcyxcbiAgSW5mZXJCYXJUeXBlLFxuICBCYXJDaGFydFRyYW5zbGF0aW9ucyxcbiAgUGFydGlhbEJhckNoYXJ0VHJhbnNsYXRpb25zLFxufTtcblxuY29uc3QgU3R5bGVkRm9ybUdyb3VwTGFiZWwgPSBzdHlsZWQoRm9ybUdyb3VwTGFiZWwpKFxuICBjc3Moe1xuICAgIG1yOiA4LFxuICAgIG10OiA0LFxuICB9KVxuKTtcbmNvbnN0IFdpZHRoU2VsZWN0ID0gc3R5bGVkKFNlbGVjdCkoXG4gIGNzcyh7XG4gICAgd2lkdGg6ICdtYXgtY29udGVudCcsXG4gICAgcHI6IDEyLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IEJhckNoYXJ0ID0gPFxuICBUQmFyVmFsdWVzIGV4dGVuZHMgQmFyUHJvcHNbXSB8IHJlYWRvbmx5IEJhclByb3BzW10gPSBCYXJQcm9wc1tdXG4+KHtcbiAgJ2FyaWEtbGFiZWxsZWRieSc6IGFyaWFMYWJlbGxlZEJ5LFxuICBhbmltYXRlID0gZmFsc2UsXG4gIGJhclZhbHVlcyxcbiAgZGVzY3JpcHRpb24sXG4gIGhpZGVEZXNjcmlwdGlvbiA9IGZhbHNlLFxuICBoaWRlVGl0bGUgPSBmYWxzZSxcbiAgbWF4UmFuZ2UsXG4gIHNvcnRGbnMsXG4gIHN0eWxlQ29uZmlnLFxuICB0aXRsZSxcbiAgdHJhbnNsYXRpb25zLFxuICB1bml0ID0gJycsXG4gIHhTY2FsZSxcbn06IEJhckNoYXJ0UHJvcHM8VEJhclZhbHVlcz4pID0+IHtcbiAgY29uc3QgbWVyZ2VkVHJhbnNsYXRpb25zID0gdXNlTWVtbyhcbiAgICAoKSA9PiAoe1xuICAgICAgLi4uZGVmYXVsdEJhckNoYXJ0VHJhbnNsYXRpb25zLFxuICAgICAgLi4udHJhbnNsYXRpb25zLFxuICAgICAgc29ydE9wdGlvbnM6IHtcbiAgICAgICAgLi4uZGVmYXVsdEJhckNoYXJ0VHJhbnNsYXRpb25zLnNvcnRPcHRpb25zLFxuICAgICAgICAuLi50cmFuc2xhdGlvbnM/LnNvcnRPcHRpb25zLFxuICAgICAgfSxcbiAgICAgIGFjY2Vzc2liaWxpdHk6IHtcbiAgICAgICAgLi4uZGVmYXVsdEJhckNoYXJ0VHJhbnNsYXRpb25zLmFjY2Vzc2liaWxpdHksXG4gICAgICAgIC4uLnRyYW5zbGF0aW9ucz8uYWNjZXNzaWJpbGl0eSxcbiAgICAgIH0sXG4gICAgfSksXG4gICAgW3RyYW5zbGF0aW9uc11cbiAgKTtcblxuICBjb25zdCB7IHNvcnRlZEJhcnMsIHNlbGVjdFByb3BzIH0gPSB1c2VCYXJDaGFydFNvcnQ8VEJhclZhbHVlcz4oe1xuICAgIGJhcnM6IGJhclZhbHVlcyxcbiAgICBzb3J0Rm5zLFxuICAgIHRyYW5zbGF0aW9uczogbWVyZ2VkVHJhbnNsYXRpb25zLFxuICB9KTtcblxuICBjb25zdCBjb250ZXh0VmFsdWUgPSB1c2VCYXJDaGFydCh7XG4gICAgbWF4UmFuZ2UsXG4gICAgeFNjYWxlLFxuICAgIHVuaXQsXG4gICAgc3R5bGVDb25maWcsXG4gICAgYW5pbWF0ZSxcbiAgICBiYXJDb3VudDogc29ydGVkQmFycz8ubGVuZ3RoLFxuICAgIHRyYW5zbGF0aW9uczogbWVyZ2VkVHJhbnNsYXRpb25zLFxuICB9KTtcblxuICBjb25zdCB0aWNrQ291bnQgPSBNYXRoLmNlaWwobWF4UmFuZ2UgLyBjb250ZXh0VmFsdWUueFNjYWxlKSArIDE7XG5cbiAgY29uc3QgdGl0bGVJZCA9IHVzZUlkKCk7XG4gIGNvbnN0IHNvcnRTZWxlY3RJZCA9IHVzZUlkKCk7XG5cbiAgY29uc3QgdGl0bGVQcm9wcyA9XG4gICAgdHlwZW9mIHRpdGxlID09PSAnc3RyaW5nJ1xuICAgICAgPyB7XG4gICAgICAgICAgYXM6ICdoMicgYXMgY29uc3QsXG4gICAgICAgICAgY2hpbGRyZW46IHRpdGxlLFxuICAgICAgICAgIGhpZGRlbjogaGlkZVRpdGxlLFxuICAgICAgICAgIGlkOiB0aXRsZUlkLFxuICAgICAgICAgIHZhcmlhbnQ6ICd0aXRsZS14cycgYXMgY29uc3QsXG4gICAgICAgIH1cbiAgICAgIDogdGl0bGVcbiAgICAgID8geyAuLi50aXRsZSwgY2hpbGRyZW46IHRpdGxlLnRpdGxlLCBoaWRkZW46IGhpZGVUaXRsZSwgaWQ6IHRpdGxlSWQgfVxuICAgICAgOiBudWxsO1xuXG4gIGNvbnN0IHRpdGxlQ29udGVudCA9XG4gICAgKHRpdGxlICYmICFoaWRlVGl0bGUpIHx8IHNlbGVjdFByb3BzID8gKFxuICAgICAgPEJveFxuICAgICAgICBib3JkZXJCb3R0b209ezF9XG4gICAgICAgIGJvcmRlckNvbG9yPVwiYmFja2dyb3VuZC1kaXNhYmxlZFwiXG4gICAgICAgIG1iPXsyNH1cbiAgICAgICAgcGI9ezh9XG4gICAgICAgIHdpZHRoPVwiMTAwJVwiXG4gICAgICA+XG4gICAgICAgIDxGbGV4Qm94XG4gICAgICAgICAgYWxpZ25JdGVtcz1cImNlbnRlclwiXG4gICAgICAgICAganVzdGlmeUNvbnRlbnQ9XCJzcGFjZS1iZXR3ZWVuXCJcbiAgICAgICAgICB3aWR0aD1cIjEwMCVcIlxuICAgICAgICA+XG4gICAgICAgICAge3RpdGxlUHJvcHMgJiYgPFRleHQgbWI9ezR9IHsuLi50aXRsZVByb3BzfSAvPn1cbiAgICAgICAgICB7c2VsZWN0UHJvcHMgJiYgKFxuICAgICAgICAgICAgPEZsZXhCb3ggYWxpZ25JdGVtcz1cImNlbnRlclwiPlxuICAgICAgICAgICAgICA8U3R5bGVkRm9ybUdyb3VwTGFiZWxcbiAgICAgICAgICAgICAgICBodG1sRm9yPXtzb3J0U2VsZWN0SWR9XG4gICAgICAgICAgICAgICAgaXNTb2xvRmllbGRcbiAgICAgICAgICAgICAgICBzaXplPVwic21hbGxcIlxuICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAge21lcmdlZFRyYW5zbGF0aW9ucy5zb3J0TGFiZWx9XG4gICAgICAgICAgICAgIDwvU3R5bGVkRm9ybUdyb3VwTGFiZWw+XG4gICAgICAgICAgICAgIDxXaWR0aFNlbGVjdFxuICAgICAgICAgICAgICAgIHNpemVWYXJpYW50PVwic21hbGxcIlxuICAgICAgICAgICAgICAgIHsuLi5zZWxlY3RQcm9wc31cbiAgICAgICAgICAgICAgICBpZD17c29ydFNlbGVjdElkfVxuICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgPC9GbGV4Qm94PlxuICAgICAgICAgICl9XG4gICAgICAgIDwvRmxleEJveD5cbiAgICAgIDwvQm94PlxuICAgICkgOiB0aXRsZVByb3BzID8gKFxuICAgICAgPFRleHQgey4uLnRpdGxlUHJvcHN9IC8+XG4gICAgKSA6IG51bGw7XG5cbiAgcmV0dXJuIChcbiAgICA8QmFyQ2hhcnRQcm92aWRlciB2YWx1ZT17Y29udGV4dFZhbHVlfT5cbiAgICAgIHt0aXRsZUNvbnRlbnR9XG4gICAgICA8Qm94XG4gICAgICAgIGFzPVwiZmlndXJlXCJcbiAgICAgICAgY29udGFpbmVyVHlwZT1cImlubGluZS1zaXplXCJcbiAgICAgICAgcG9zaXRpb249XCJyZWxhdGl2ZVwiXG4gICAgICAgIHdpZHRoPVwiMTAwJVwiXG4gICAgICA+XG4gICAgICAgIDxTY2FsZUNoYXJ0SGVhZGVyIGxhYmVsQ291bnQ9e3RpY2tDb3VudH0gbWF4PXttYXhSYW5nZX0gbWluPXswfSAvPlxuICAgICAgICA8Qm94IHBvc2l0aW9uPVwicmVsYXRpdmVcIiB3aWR0aD1cIjEwMCVcIj5cbiAgICAgICAgICA8R3JpZExpbmVzIG1heD17bWF4UmFuZ2V9IG1pbj17MH0gdGlja0NvdW50PXt0aWNrQ291bnR9IC8+XG4gICAgICAgICAgPEJhcnNMaXN0IGFyaWEtbGFiZWxsZWRieT17YXJpYUxhYmVsbGVkQnkgPz8gdGl0bGVJZH0+XG4gICAgICAgICAgICB7c29ydGVkQmFycy5tYXAoKGJhciwgaW5kZXgpID0+IChcbiAgICAgICAgICAgICAgPEJhclJvd1xuICAgICAgICAgICAgICAgIGluZGV4PXtpbmRleH1cbiAgICAgICAgICAgICAgICBrZXk9e2dldEJhclJvd0tleShiYXIsIGluZGV4KX1cbiAgICAgICAgICAgICAgICB7Li4uYmFyfVxuICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgKSl9XG4gICAgICAgICAgPC9CYXJzTGlzdD5cbiAgICAgICAgPC9Cb3g+XG4gICAgICAgIDxUZXh0XG4gICAgICAgICAgYXM9XCJmaWdjYXB0aW9uXCJcbiAgICAgICAgICBjb2xvcj1cInRleHQtZGlzYWJsZWRcIlxuICAgICAgICAgIGhpZGRlbj17aGlkZURlc2NyaXB0aW9ufVxuICAgICAgICAgIG10PXs4fVxuICAgICAgICAgIHZhcmlhbnQ9XCJwLXNtYWxsXCJcbiAgICAgICAgPlxuICAgICAgICAgIHtkZXNjcmlwdGlvbn1cbiAgICAgICAgPC9UZXh0PlxuICAgICAgPC9Cb3g+XG4gICAgPC9CYXJDaGFydFByb3ZpZGVyPlxuICApO1xufTtcbiJdfQ== */");
|
|
30
31
|
export const BarChart = ({
|
|
31
32
|
'aria-labelledby': ariaLabelledBy,
|
|
32
33
|
animate = false,
|
|
@@ -113,13 +114,14 @@ export const BarChart = ({
|
|
|
113
114
|
})]
|
|
114
115
|
})]
|
|
115
116
|
})
|
|
116
|
-
}) : /*#__PURE__*/_jsx(Text, {
|
|
117
|
+
}) : titleProps ? /*#__PURE__*/_jsx(Text, {
|
|
117
118
|
...titleProps
|
|
118
|
-
});
|
|
119
|
+
}) : null;
|
|
119
120
|
return /*#__PURE__*/_jsxs(BarChartProvider, {
|
|
120
121
|
value: contextValue,
|
|
121
122
|
children: [titleContent, /*#__PURE__*/_jsxs(Box, {
|
|
122
123
|
as: "figure",
|
|
124
|
+
containerType: "inline-size",
|
|
123
125
|
position: "relative",
|
|
124
126
|
width: "100%",
|
|
125
127
|
children: [/*#__PURE__*/_jsx(ScaleChartHeader, {
|
|
@@ -135,13 +137,10 @@ export const BarChart = ({
|
|
|
135
137
|
tickCount: tickCount
|
|
136
138
|
}), /*#__PURE__*/_jsx(BarsList, {
|
|
137
139
|
"aria-labelledby": ariaLabelledBy ?? titleId,
|
|
138
|
-
children: sortedBars.map((bar, index) => {
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
...bar
|
|
143
|
-
}, key);
|
|
144
|
-
})
|
|
140
|
+
children: sortedBars.map((bar, index) => /*#__PURE__*/_jsx(BarRow, {
|
|
141
|
+
index: index,
|
|
142
|
+
...bar
|
|
143
|
+
}, getBarRowKey(bar, index)))
|
|
145
144
|
})]
|
|
146
145
|
}), /*#__PURE__*/_jsx(Text, {
|
|
147
146
|
as: "figcaption",
|
|
@@ -270,7 +270,6 @@ export const useBarChartSort = ({
|
|
|
270
270
|
const onSortChange = useCallback(value => {
|
|
271
271
|
setSortValue(value);
|
|
272
272
|
}, []);
|
|
273
|
-
const selectId = useRef(`bar-chart-sort-${Math.random().toString(36).slice(2, 11)}`);
|
|
274
273
|
const selectProps = useMemo(() => {
|
|
275
274
|
if (!allSortOptions) {
|
|
276
275
|
return null;
|
|
@@ -280,8 +279,7 @@ export const useBarChartSort = ({
|
|
|
280
279
|
value: sortValue,
|
|
281
280
|
onChange: e => {
|
|
282
281
|
onSortChange(e.target.value);
|
|
283
|
-
}
|
|
284
|
-
id: selectId.current
|
|
282
|
+
}
|
|
285
283
|
};
|
|
286
284
|
}, [sortValue, onSortChange, allSortOptions]);
|
|
287
285
|
return {
|
|
@@ -45,6 +45,14 @@ export declare const formatNumberUS: ({ num, locale, }: {
|
|
|
45
45
|
num: number;
|
|
46
46
|
locale?: string | undefined;
|
|
47
47
|
}) => string;
|
|
48
|
+
/**
|
|
49
|
+
* Formats a numeric value with optional unit for bar chart labels.
|
|
50
|
+
*/
|
|
51
|
+
export declare const formatValueWithUnit: ({ value, unit, locale, }: {
|
|
52
|
+
value: number;
|
|
53
|
+
unit: string;
|
|
54
|
+
locale?: string | undefined;
|
|
55
|
+
}) => string;
|
|
48
56
|
export declare const formatNumberUSCompact: ({ num, locale, }: {
|
|
49
57
|
num: number;
|
|
50
58
|
locale?: string | undefined;
|
|
@@ -86,3 +94,7 @@ export declare const calculatePositionPercent: ({ value, min, max, }: {
|
|
|
86
94
|
min: BarChartRange['minRange'];
|
|
87
95
|
max: BarChartRange['maxRange'];
|
|
88
96
|
}) => number;
|
|
97
|
+
/**
|
|
98
|
+
* Generates a stable key for a bar row (for React list keys).
|
|
99
|
+
*/
|
|
100
|
+
export declare const getBarRowKey: (bar: Pick<BarProps, 'yLabel' | 'seriesOneValue' | 'seriesTwoValue'>, index: number) => string;
|
|
@@ -85,6 +85,18 @@ export const formatNumberUS = ({
|
|
|
85
85
|
num,
|
|
86
86
|
locale = 'en'
|
|
87
87
|
}) => Intl.NumberFormat(locale).format(num);
|
|
88
|
+
|
|
89
|
+
/**
|
|
90
|
+
* Formats a numeric value with optional unit for bar chart labels.
|
|
91
|
+
*/
|
|
92
|
+
export const formatValueWithUnit = ({
|
|
93
|
+
value,
|
|
94
|
+
unit,
|
|
95
|
+
locale = 'en'
|
|
96
|
+
}) => {
|
|
97
|
+
const formatted = Intl.NumberFormat(locale).format(value);
|
|
98
|
+
return unit ? `${formatted} ${unit}` : formatted;
|
|
99
|
+
};
|
|
88
100
|
export const formatNumberUSCompact = ({
|
|
89
101
|
num,
|
|
90
102
|
locale = 'en'
|
|
@@ -204,4 +216,9 @@ export const calculatePositionPercent = ({
|
|
|
204
216
|
const range = max - min;
|
|
205
217
|
const adjustedValue = value - min;
|
|
206
218
|
return adjustedValue / range * 100;
|
|
207
|
-
};
|
|
219
|
+
};
|
|
220
|
+
|
|
221
|
+
/**
|
|
222
|
+
* Generates a stable key for a bar row (for React list keys).
|
|
223
|
+
*/
|
|
224
|
+
export const getBarRowKey = (bar, index) => bar.yLabel && bar.seriesOneValue ? `${bar.yLabel}-${bar.seriesOneValue}-${bar.seriesTwoValue ?? ''}-${index}` : String(index);
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@codecademy/gamut",
|
|
3
3
|
"description": "Styleguide & Component library for Codecademy",
|
|
4
|
-
"version": "68.0.2-alpha.
|
|
4
|
+
"version": "68.0.2-alpha.f8c3b5.0",
|
|
5
5
|
"author": "Codecademy Engineering <dev@codecademy.com>",
|
|
6
6
|
"dependencies": {
|
|
7
7
|
"@codecademy/gamut-icons": "9.55.0",
|
|
@@ -56,5 +56,5 @@
|
|
|
56
56
|
"dist/**/[A-Z]**/[A-Z]*.js",
|
|
57
57
|
"dist/**/[A-Z]**/index.js"
|
|
58
58
|
],
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "07a74dae6963d668aa18202dd15e4a9d7c8fbd63"
|
|
60
60
|
}
|