@codecademy/gamut 68.1.1-alpha.ff5b1d.0 → 68.1.1
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/ConnectedForm/utils.d.ts +1 -1
- package/dist/Form/SelectDropdown/styles.d.ts +1 -1
- package/dist/Form/elements/Form.d.ts +1 -1
- package/dist/Form/elements/FormGroupLabel.js +2 -2
- package/dist/Form/inputs/Select.js +5 -6
- package/dist/List/elements.d.ts +1 -1
- package/dist/index.d.ts +0 -1
- package/dist/index.js +0 -1
- package/package.json +6 -6
- package/dist/BarChart/BarChartProvider.d.ts +0 -19
- package/dist/BarChart/BarChartProvider.js +0 -27
- package/dist/BarChart/BarRow/ValueLabelsContent.d.ts +0 -7
- package/dist/BarChart/BarRow/ValueLabelsContent.js +0 -34
- package/dist/BarChart/BarRow/elements.d.ts +0 -943
- package/dist/BarChart/BarRow/elements.js +0 -102
- package/dist/BarChart/BarRow/index.d.ts +0 -6
- package/dist/BarChart/BarRow/index.js +0 -235
- package/dist/BarChart/GENERIC_EXAMPLE.d.ts +0 -14
- package/dist/BarChart/GENERIC_EXAMPLE.js +0 -327
- package/dist/BarChart/SortSelect/index.d.ts +0 -15
- package/dist/BarChart/SortSelect/index.js +0 -18
- package/dist/BarChart/index.d.ts +0 -4
- package/dist/BarChart/index.js +0 -136
- package/dist/BarChart/layout/GridLines.d.ts +0 -3
- package/dist/BarChart/layout/GridLines.js +0 -69
- package/dist/BarChart/layout/LabelSpacer.d.ts +0 -6
- package/dist/BarChart/layout/LabelSpacer.js +0 -56
- package/dist/BarChart/layout/ScaleChartHeader.d.ts +0 -3
- package/dist/BarChart/layout/ScaleChartHeader.js +0 -87
- package/dist/BarChart/shared/elements.d.ts +0 -7
- package/dist/BarChart/shared/elements.js +0 -12
- package/dist/BarChart/shared/styles.d.ts +0 -4
- package/dist/BarChart/shared/styles.js +0 -4
- package/dist/BarChart/shared/translations.d.ts +0 -69
- package/dist/BarChart/shared/translations.js +0 -57
- package/dist/BarChart/shared/types.d.ts +0 -100
- package/dist/BarChart/shared/types.js +0 -1
- package/dist/BarChart/utils/hooks.d.ts +0 -89
- package/dist/BarChart/utils/hooks.js +0 -281
- package/dist/BarChart/utils/index.d.ts +0 -56
- package/dist/BarChart/utils/index.js +0 -122
|
@@ -1,327 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Generic Type Example for BarChart with Custom Sorting
|
|
3
|
-
*
|
|
4
|
-
* This file demonstrates how the generic types work with custom properties.
|
|
5
|
-
* TypeScript will automatically infer the bar type from barValues, and
|
|
6
|
-
* sort functions will receive the correct type with custom properties.
|
|
7
|
-
*
|
|
8
|
-
* THIS WILL BE DELETED BEFORE SHIPPING
|
|
9
|
-
*/
|
|
10
|
-
|
|
11
|
-
import { BarChart } from './index';
|
|
12
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
|
-
// ============================================================================
|
|
14
|
-
// Example 1: Date-based sorting with automatic type inference
|
|
15
|
-
// ============================================================================
|
|
16
|
-
|
|
17
|
-
// Define bars with custom dateAdded property
|
|
18
|
-
const barsWithDates = [{
|
|
19
|
-
categoryLabel: 'Python',
|
|
20
|
-
seriesOneValue: 1500,
|
|
21
|
-
dateAdded: new Date('2023-01-15')
|
|
22
|
-
}, {
|
|
23
|
-
categoryLabel: 'JavaScript',
|
|
24
|
-
seriesOneValue: 2000,
|
|
25
|
-
dateAdded: new Date('2023-03-20')
|
|
26
|
-
}, {
|
|
27
|
-
categoryLabel: 'React',
|
|
28
|
-
seriesOneValue: 450,
|
|
29
|
-
dateAdded: new Date('2023-06-10')
|
|
30
|
-
}, {
|
|
31
|
-
categoryLabel: 'TypeScript',
|
|
32
|
-
seriesOneValue: 300,
|
|
33
|
-
dateAdded: new Date('2023-08-05')
|
|
34
|
-
}, {
|
|
35
|
-
categoryLabel: 'SQL',
|
|
36
|
-
seriesOneValue: 600,
|
|
37
|
-
dateAdded: new Date('2023-02-28')
|
|
38
|
-
}];
|
|
39
|
-
|
|
40
|
-
// TypeScript infers the type automatically - no need to specify it!
|
|
41
|
-
export const DateSortingExample = () => {
|
|
42
|
-
return /*#__PURE__*/_jsx(BarChart, {
|
|
43
|
-
barValues: barsWithDates,
|
|
44
|
-
description: "Sort by when each skill was added to your profile",
|
|
45
|
-
maxScaleValue: 2000,
|
|
46
|
-
sortFns: ['none', {
|
|
47
|
-
label: 'Recently Added',
|
|
48
|
-
value: 'recent',
|
|
49
|
-
// bars parameter is automatically typed as:
|
|
50
|
-
// (BarProps & { dateAdded: Date })[]
|
|
51
|
-
// No type assertions needed!
|
|
52
|
-
sortFn: bars => {
|
|
53
|
-
return [...bars].sort((a, b) => {
|
|
54
|
-
// TypeScript knows dateAdded exists and is a Date!
|
|
55
|
-
const aDate = a.dateAdded;
|
|
56
|
-
const bDate = b.dateAdded;
|
|
57
|
-
if (!aDate && !bDate) return 0;
|
|
58
|
-
if (!aDate) return 1;
|
|
59
|
-
if (!bDate) return -1;
|
|
60
|
-
return bDate.getTime() - aDate.getTime();
|
|
61
|
-
});
|
|
62
|
-
}
|
|
63
|
-
}, {
|
|
64
|
-
label: 'Oldest First',
|
|
65
|
-
value: 'oldest',
|
|
66
|
-
sortFn: bars => {
|
|
67
|
-
return [...bars].sort((a, b) => {
|
|
68
|
-
const aDate = a.dateAdded;
|
|
69
|
-
const bDate = b.dateAdded;
|
|
70
|
-
if (!aDate && !bDate) return 0;
|
|
71
|
-
if (!aDate) return 1;
|
|
72
|
-
if (!bDate) return -1;
|
|
73
|
-
return aDate.getTime() - bDate.getTime();
|
|
74
|
-
});
|
|
75
|
-
}
|
|
76
|
-
}],
|
|
77
|
-
title: "Skills by Date Added",
|
|
78
|
-
unit: "XP"
|
|
79
|
-
});
|
|
80
|
-
};
|
|
81
|
-
|
|
82
|
-
// ============================================================================
|
|
83
|
-
// Example 2: Category-based sorting with multiple custom properties
|
|
84
|
-
// ============================================================================
|
|
85
|
-
|
|
86
|
-
const barsWithCategory = [{
|
|
87
|
-
categoryLabel: 'Python',
|
|
88
|
-
seriesOneValue: 1500,
|
|
89
|
-
category: 'backend',
|
|
90
|
-
priority: 1
|
|
91
|
-
}, {
|
|
92
|
-
categoryLabel: 'JavaScript',
|
|
93
|
-
seriesOneValue: 2000,
|
|
94
|
-
category: 'frontend',
|
|
95
|
-
priority: 2
|
|
96
|
-
}, {
|
|
97
|
-
categoryLabel: 'React',
|
|
98
|
-
seriesOneValue: 450,
|
|
99
|
-
category: 'frontend',
|
|
100
|
-
priority: 3
|
|
101
|
-
}, {
|
|
102
|
-
categoryLabel: 'TypeScript',
|
|
103
|
-
seriesOneValue: 300,
|
|
104
|
-
category: 'frontend',
|
|
105
|
-
priority: 4
|
|
106
|
-
}, {
|
|
107
|
-
categoryLabel: 'SQL',
|
|
108
|
-
seriesOneValue: 600,
|
|
109
|
-
category: 'backend',
|
|
110
|
-
priority: 5
|
|
111
|
-
}];
|
|
112
|
-
export const CategorySortingExample = () => {
|
|
113
|
-
return /*#__PURE__*/_jsx(BarChart, {
|
|
114
|
-
barValues: barsWithCategory,
|
|
115
|
-
description: "Sort by category or priority",
|
|
116
|
-
maxScaleValue: 2000,
|
|
117
|
-
sortFns: ['none', {
|
|
118
|
-
label: 'By Category',
|
|
119
|
-
value: 'category',
|
|
120
|
-
// bars is typed with both category and priority properties
|
|
121
|
-
sortFn: bars => {
|
|
122
|
-
return [...bars].sort((a, b) => {
|
|
123
|
-
// TypeScript knows category exists!
|
|
124
|
-
if (a.category !== b.category) {
|
|
125
|
-
return a.category.localeCompare(b.category);
|
|
126
|
-
}
|
|
127
|
-
// TypeScript knows priority exists!
|
|
128
|
-
return a.priority - b.priority;
|
|
129
|
-
});
|
|
130
|
-
}
|
|
131
|
-
}, {
|
|
132
|
-
label: 'High Priority First',
|
|
133
|
-
value: 'priority',
|
|
134
|
-
sortFn: bars => {
|
|
135
|
-
return [...bars].sort((a, b) => {
|
|
136
|
-
// Direct access to priority - fully typed!
|
|
137
|
-
return a.priority - b.priority;
|
|
138
|
-
});
|
|
139
|
-
}
|
|
140
|
-
}],
|
|
141
|
-
title: "Skills by Category",
|
|
142
|
-
unit: "XP"
|
|
143
|
-
});
|
|
144
|
-
};
|
|
145
|
-
|
|
146
|
-
// ============================================================================
|
|
147
|
-
// Example 3: Complex sorting with nested properties
|
|
148
|
-
// ============================================================================
|
|
149
|
-
|
|
150
|
-
const barsWithMetadata = [{
|
|
151
|
-
categoryLabel: 'Python',
|
|
152
|
-
seriesOneValue: 1500,
|
|
153
|
-
metadata: {
|
|
154
|
-
addedDate: new Date('2023-01-15'),
|
|
155
|
-
tags: ['backend', 'data-science'],
|
|
156
|
-
rating: 4.5
|
|
157
|
-
}
|
|
158
|
-
}, {
|
|
159
|
-
categoryLabel: 'JavaScript',
|
|
160
|
-
seriesOneValue: 2000,
|
|
161
|
-
metadata: {
|
|
162
|
-
addedDate: new Date('2023-03-20'),
|
|
163
|
-
tags: ['frontend', 'backend'],
|
|
164
|
-
rating: 5.0
|
|
165
|
-
}
|
|
166
|
-
}, {
|
|
167
|
-
categoryLabel: 'React',
|
|
168
|
-
seriesOneValue: 450,
|
|
169
|
-
metadata: {
|
|
170
|
-
addedDate: new Date('2023-06-10'),
|
|
171
|
-
tags: ['frontend'],
|
|
172
|
-
rating: 4.8
|
|
173
|
-
}
|
|
174
|
-
}];
|
|
175
|
-
export const ComplexSortingExample = () => {
|
|
176
|
-
return /*#__PURE__*/_jsx(BarChart, {
|
|
177
|
-
barValues: barsWithMetadata,
|
|
178
|
-
description: "Sort by metadata properties",
|
|
179
|
-
maxScaleValue: 2000,
|
|
180
|
-
sortFns: ['none', {
|
|
181
|
-
label: 'By Rating',
|
|
182
|
-
value: 'rating',
|
|
183
|
-
sortFn: bars => {
|
|
184
|
-
return [...bars].sort((a, b) => {
|
|
185
|
-
// TypeScript knows metadata.rating exists!
|
|
186
|
-
return b.metadata.rating - a.metadata.rating;
|
|
187
|
-
});
|
|
188
|
-
}
|
|
189
|
-
}, {
|
|
190
|
-
label: 'By Date Added',
|
|
191
|
-
value: 'date',
|
|
192
|
-
sortFn: bars => {
|
|
193
|
-
return [...bars].sort((a, b) => {
|
|
194
|
-
// TypeScript knows metadata.addedDate exists!
|
|
195
|
-
return b.metadata.addedDate.getTime() - a.metadata.addedDate.getTime();
|
|
196
|
-
});
|
|
197
|
-
}
|
|
198
|
-
}, {
|
|
199
|
-
label: 'Has Backend Tag',
|
|
200
|
-
value: 'backend-tag',
|
|
201
|
-
sortFn: bars => {
|
|
202
|
-
return [...bars].sort((a, b) => {
|
|
203
|
-
// TypeScript knows metadata.tags exists!
|
|
204
|
-
const aHasBackend = a.metadata.tags.includes('backend');
|
|
205
|
-
const bHasBackend = b.metadata.tags.includes('backend');
|
|
206
|
-
if (aHasBackend && !bHasBackend) return -1;
|
|
207
|
-
if (!aHasBackend && bHasBackend) return 1;
|
|
208
|
-
return 0;
|
|
209
|
-
});
|
|
210
|
-
}
|
|
211
|
-
}],
|
|
212
|
-
title: "Skills with Metadata",
|
|
213
|
-
unit: "XP"
|
|
214
|
-
});
|
|
215
|
-
};
|
|
216
|
-
|
|
217
|
-
// ============================================================================
|
|
218
|
-
// Example 4: Explicit type annotation (when needed)
|
|
219
|
-
// ============================================================================
|
|
220
|
-
|
|
221
|
-
// Sometimes you might want to be explicit about the type
|
|
222
|
-
// The type is automatically inferred from barValues, but you can still
|
|
223
|
-
// explicitly type the array if needed for clarity
|
|
224
|
-
|
|
225
|
-
const barsWithScore = [{
|
|
226
|
-
categoryLabel: 'Python',
|
|
227
|
-
seriesOneValue: 1500,
|
|
228
|
-
score: 85,
|
|
229
|
-
lastUpdated: new Date('2024-01-01')
|
|
230
|
-
}, {
|
|
231
|
-
categoryLabel: 'JavaScript',
|
|
232
|
-
seriesOneValue: 2000,
|
|
233
|
-
score: 95,
|
|
234
|
-
lastUpdated: new Date('2024-01-15')
|
|
235
|
-
}];
|
|
236
|
-
export const ExplicitTypeExample = () => {
|
|
237
|
-
return /*#__PURE__*/_jsx(BarChart, {
|
|
238
|
-
barValues: barsWithScore,
|
|
239
|
-
description: "Explicitly typed bars with score and update date",
|
|
240
|
-
maxScaleValue: 2000,
|
|
241
|
-
sortFns: ['none', {
|
|
242
|
-
label: 'By Score',
|
|
243
|
-
value: 'score',
|
|
244
|
-
// TypeScript automatically infers BarWithScore[] from barValues
|
|
245
|
-
sortFn: bars => {
|
|
246
|
-
return [...bars].sort((a, b) => {
|
|
247
|
-
// Direct access to score - fully typed!
|
|
248
|
-
return b.score - a.score;
|
|
249
|
-
});
|
|
250
|
-
}
|
|
251
|
-
}, {
|
|
252
|
-
label: 'Recently Updated',
|
|
253
|
-
value: 'updated',
|
|
254
|
-
sortFn: bars => {
|
|
255
|
-
return [...bars].sort((a, b) => {
|
|
256
|
-
// Direct access to lastUpdated - fully typed!
|
|
257
|
-
return b.lastUpdated.getTime() - a.lastUpdated.getTime();
|
|
258
|
-
});
|
|
259
|
-
}
|
|
260
|
-
}],
|
|
261
|
-
title: "Skills with Scores",
|
|
262
|
-
unit: "XP"
|
|
263
|
-
});
|
|
264
|
-
};
|
|
265
|
-
|
|
266
|
-
// ============================================================================
|
|
267
|
-
// Example 6: Purposefully wrong example to show type errors
|
|
268
|
-
// ============================================================================
|
|
269
|
-
// One bar is missing category/priority, so the inferred element type is a union.
|
|
270
|
-
// The sortFn then gets bars where .category and .priority may be undefined.
|
|
271
|
-
|
|
272
|
-
const barsWithWrongCategory = [{
|
|
273
|
-
categoryLabel: 'Python',
|
|
274
|
-
seriesOneValue: 1500,
|
|
275
|
-
category: 'backend',
|
|
276
|
-
priority: 1
|
|
277
|
-
}, {
|
|
278
|
-
categoryLabel: 'JavaScript',
|
|
279
|
-
seriesOneValue: 2000,
|
|
280
|
-
category: 'frontend',
|
|
281
|
-
priority: 2
|
|
282
|
-
}, {
|
|
283
|
-
categoryLabel: 'React',
|
|
284
|
-
seriesOneValue: 450,
|
|
285
|
-
category: 'frontend',
|
|
286
|
-
priority: 3
|
|
287
|
-
}, {
|
|
288
|
-
categoryLabel: 'TypeScript',
|
|
289
|
-
seriesOneValue: 300,
|
|
290
|
-
category: 'frontend',
|
|
291
|
-
priority: 4
|
|
292
|
-
}, {
|
|
293
|
-
categoryLabel: 'SQL',
|
|
294
|
-
seriesOneValue: 600
|
|
295
|
-
}];
|
|
296
|
-
export const WrongCategorySortingExample = () => {
|
|
297
|
-
return /*#__PURE__*/_jsx(BarChart, {
|
|
298
|
-
barValues: barsWithWrongCategory,
|
|
299
|
-
description: "Sort by category or priority",
|
|
300
|
-
maxScaleValue: 2000,
|
|
301
|
-
sortFns: ['none', {
|
|
302
|
-
label: 'By Category',
|
|
303
|
-
value: 'category',
|
|
304
|
-
sortFn: bars => {
|
|
305
|
-
return [...bars].sort((a, b) => {
|
|
306
|
-
if (a.category !== b.category) {
|
|
307
|
-
// @ts-expect-error - not all bars have category (5th bar is missing it)
|
|
308
|
-
return a.category.localeCompare(b.category);
|
|
309
|
-
}
|
|
310
|
-
// @ts-expect-error - not all bars have priority (5th bar is missing it)
|
|
311
|
-
return a.priority - b.priority;
|
|
312
|
-
});
|
|
313
|
-
}
|
|
314
|
-
}, {
|
|
315
|
-
label: 'High Priority First',
|
|
316
|
-
value: 'priority',
|
|
317
|
-
sortFn: bars => {
|
|
318
|
-
return [...bars].sort((a, b) => {
|
|
319
|
-
// @ts-expect-error - not all bars have priority (5th bar is missing it)
|
|
320
|
-
return a.priority - b.priority;
|
|
321
|
-
});
|
|
322
|
-
}
|
|
323
|
-
}],
|
|
324
|
-
title: "Skills by Category",
|
|
325
|
-
unit: "XP"
|
|
326
|
-
});
|
|
327
|
-
};
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
export declare const StyledFormGroupLabel: import("@emotion/styled").StyledComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLLabelElement> & import("../../Form").LabelVariants & Pick<import("../../Form/types").BaseInputProps, "htmlFor" | "required"> & {
|
|
3
|
-
infotip?: import("../../Tip/InfoTip/type-utils").InfoTipSubComponentProps | undefined;
|
|
4
|
-
size?: "small" | "large" | undefined;
|
|
5
|
-
isSoloField?: boolean | undefined;
|
|
6
|
-
} & {
|
|
7
|
-
theme?: import("@emotion/react").Theme | undefined;
|
|
8
|
-
}, {}, {}>;
|
|
9
|
-
export declare const WidthSelect: import("@emotion/styled").StyledComponent<Pick<import("react").SelectHTMLAttributes<HTMLSelectElement>, "disabled" | "id"> & Pick<import("../../Form/types").BaseInputProps, "error" | "htmlFor"> & {
|
|
10
|
-
options?: import("../../Form").SelectOptions | undefined;
|
|
11
|
-
} & import("react").SelectHTMLAttributes<HTMLSelectElement> & {
|
|
12
|
-
sizeVariant?: "small" | "base" | undefined;
|
|
13
|
-
} & import("react").RefAttributes<HTMLSelectElement> & {
|
|
14
|
-
theme?: import("@emotion/react").Theme | undefined;
|
|
15
|
-
}, {}, {}>;
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import _styled from "@emotion/styled/base";
|
|
2
|
-
import { css } from '@codecademy/gamut-styles';
|
|
3
|
-
import { FormGroupLabel } from '../../Form';
|
|
4
|
-
import { Select } from '../../Form/inputs/Select';
|
|
5
|
-
export const StyledFormGroupLabel = /*#__PURE__*/_styled(FormGroupLabel, {
|
|
6
|
-
target: "ej5ganj1",
|
|
7
|
-
label: "StyledFormGroupLabel"
|
|
8
|
-
})(css({
|
|
9
|
-
mr: 8,
|
|
10
|
-
mt: 4
|
|
11
|
-
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9Tb3J0U2VsZWN0L2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNb0MiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0JhckNoYXJ0L1NvcnRTZWxlY3QvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuaW1wb3J0IHsgRm9ybUdyb3VwTGFiZWwgfSBmcm9tICcuLi8uLi9Gb3JtJztcbmltcG9ydCB7IFNlbGVjdCB9IGZyb20gJy4uLy4uL0Zvcm0vaW5wdXRzL1NlbGVjdCc7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRGb3JtR3JvdXBMYWJlbCA9IHN0eWxlZChGb3JtR3JvdXBMYWJlbCkoXG4gIGNzcyh7XG4gICAgbXI6IDgsXG4gICAgbXQ6IDQsXG4gIH0pXG4pO1xuZXhwb3J0IGNvbnN0IFdpZHRoU2VsZWN0ID0gc3R5bGVkKFNlbGVjdCkoXG4gIGNzcyh7XG4gICAgd2lkdGg6ICdtYXgtY29udGVudCcsXG4gICAgcHI6IDEyLFxuICB9KVxuKTtcbiJdfQ== */");
|
|
12
|
-
export const WidthSelect = /*#__PURE__*/_styled(Select, {
|
|
13
|
-
target: "ej5ganj0",
|
|
14
|
-
label: "WidthSelect"
|
|
15
|
-
})(css({
|
|
16
|
-
width: 'max-content',
|
|
17
|
-
pr: 12
|
|
18
|
-
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9Tb3J0U2VsZWN0L2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFZMkIiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0JhckNoYXJ0L1NvcnRTZWxlY3QvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuaW1wb3J0IHsgRm9ybUdyb3VwTGFiZWwgfSBmcm9tICcuLi8uLi9Gb3JtJztcbmltcG9ydCB7IFNlbGVjdCB9IGZyb20gJy4uLy4uL0Zvcm0vaW5wdXRzL1NlbGVjdCc7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRGb3JtR3JvdXBMYWJlbCA9IHN0eWxlZChGb3JtR3JvdXBMYWJlbCkoXG4gIGNzcyh7XG4gICAgbXI6IDgsXG4gICAgbXQ6IDQsXG4gIH0pXG4pO1xuZXhwb3J0IGNvbnN0IFdpZHRoU2VsZWN0ID0gc3R5bGVkKFNlbGVjdCkoXG4gIGNzcyh7XG4gICAgd2lkdGg6ICdtYXgtY29udGVudCcsXG4gICAgcHI6IDEyLFxuICB9KVxuKTtcbiJdfQ== */");
|
package/dist/BarChart/index.d.ts
DELETED
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import { BarChartSingleValueBarSummaryContext, BarChartStackedSummaryContext, BarChartTranslations, PartialBarChartTranslations } from './shared/translations';
|
|
2
|
-
import { BarChartProps, BarProps, InferBarType } from './shared/types';
|
|
3
|
-
export type { BarChartSingleValueBarSummaryContext, BarChartStackedSummaryContext, BarProps, InferBarType, BarChartTranslations, PartialBarChartTranslations, };
|
|
4
|
-
export declare const BarChart: <TBarValues extends BarProps[] | readonly BarProps[] = BarProps[]>({ "aria-labelledby": ariaLabelledBy, animate, barValues, description, hideDescription, hideTitle, maxScaleValue, sortFns, styleConfig, title, translations, unit, scaleInterval, }: BarChartProps<TBarValues>) => import("react/jsx-runtime").JSX.Element;
|
package/dist/BarChart/index.js
DELETED
|
@@ -1,136 +0,0 @@
|
|
|
1
|
-
import { useId, useMemo } from 'react';
|
|
2
|
-
import { Box, FlexBox } from '../Box';
|
|
3
|
-
import { Text } from '../Typography/Text';
|
|
4
|
-
import { BarChartProvider } from './BarChartProvider';
|
|
5
|
-
import { BarRow } from './BarRow';
|
|
6
|
-
import { GridLines } from './layout/GridLines';
|
|
7
|
-
import { ScaleChartHeader } from './layout/ScaleChartHeader';
|
|
8
|
-
import { BarsList } from './shared/elements';
|
|
9
|
-
import { defaultBarChartTranslations } from './shared/translations';
|
|
10
|
-
import { StyledFormGroupLabel, WidthSelect } from './SortSelect';
|
|
11
|
-
import { getBarRowKey } from './utils';
|
|
12
|
-
import { useBarChart, useBarChartSort } from './utils/hooks';
|
|
13
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
|
-
export const BarChart = ({
|
|
15
|
-
'aria-labelledby': ariaLabelledBy,
|
|
16
|
-
animate = false,
|
|
17
|
-
barValues,
|
|
18
|
-
description,
|
|
19
|
-
hideDescription = false,
|
|
20
|
-
hideTitle = false,
|
|
21
|
-
maxScaleValue,
|
|
22
|
-
sortFns,
|
|
23
|
-
styleConfig,
|
|
24
|
-
title,
|
|
25
|
-
translations,
|
|
26
|
-
unit = '',
|
|
27
|
-
scaleInterval
|
|
28
|
-
}) => {
|
|
29
|
-
const mergedTranslations = useMemo(() => ({
|
|
30
|
-
...defaultBarChartTranslations,
|
|
31
|
-
...translations,
|
|
32
|
-
sortOptions: {
|
|
33
|
-
...defaultBarChartTranslations.sortOptions,
|
|
34
|
-
...translations?.sortOptions
|
|
35
|
-
},
|
|
36
|
-
accessibility: {
|
|
37
|
-
...defaultBarChartTranslations.accessibility,
|
|
38
|
-
...translations?.accessibility
|
|
39
|
-
}
|
|
40
|
-
}), [translations]);
|
|
41
|
-
const {
|
|
42
|
-
sortedBars,
|
|
43
|
-
selectProps
|
|
44
|
-
} = useBarChartSort({
|
|
45
|
-
bars: barValues,
|
|
46
|
-
sortFns,
|
|
47
|
-
translations: mergedTranslations
|
|
48
|
-
});
|
|
49
|
-
const contextValue = useBarChart({
|
|
50
|
-
maxScaleValue,
|
|
51
|
-
scaleInterval,
|
|
52
|
-
unit,
|
|
53
|
-
styleConfig,
|
|
54
|
-
animate,
|
|
55
|
-
barCount: sortedBars?.length,
|
|
56
|
-
translations: mergedTranslations
|
|
57
|
-
});
|
|
58
|
-
const tickCount = Math.ceil(maxScaleValue / contextValue.scaleInterval) + 1;
|
|
59
|
-
const titleId = useId();
|
|
60
|
-
const sortSelectId = useId();
|
|
61
|
-
const titleProps = typeof title === 'string' ? {
|
|
62
|
-
as: 'h2',
|
|
63
|
-
children: title,
|
|
64
|
-
hidden: hideTitle,
|
|
65
|
-
id: titleId,
|
|
66
|
-
variant: 'title-xs'
|
|
67
|
-
} : title ? {
|
|
68
|
-
...title,
|
|
69
|
-
children: title.title,
|
|
70
|
-
hidden: hideTitle,
|
|
71
|
-
id: titleId
|
|
72
|
-
} : null;
|
|
73
|
-
const titleContent = title && !hideTitle || selectProps ? /*#__PURE__*/_jsx(Box, {
|
|
74
|
-
borderBottom: 1,
|
|
75
|
-
borderColor: "background-disabled",
|
|
76
|
-
mb: 24,
|
|
77
|
-
pb: 8,
|
|
78
|
-
width: "100%",
|
|
79
|
-
children: /*#__PURE__*/_jsxs(FlexBox, {
|
|
80
|
-
alignItems: "center",
|
|
81
|
-
justifyContent: "space-between",
|
|
82
|
-
width: "100%",
|
|
83
|
-
children: [titleProps && /*#__PURE__*/_jsx(Text, {
|
|
84
|
-
mb: 4,
|
|
85
|
-
...titleProps
|
|
86
|
-
}), selectProps && /*#__PURE__*/_jsxs(FlexBox, {
|
|
87
|
-
alignItems: "center",
|
|
88
|
-
children: [/*#__PURE__*/_jsx(StyledFormGroupLabel, {
|
|
89
|
-
htmlFor: sortSelectId,
|
|
90
|
-
isSoloField: true,
|
|
91
|
-
size: "small",
|
|
92
|
-
children: mergedTranslations.sortLabel
|
|
93
|
-
}), /*#__PURE__*/_jsx(WidthSelect, {
|
|
94
|
-
sizeVariant: "small",
|
|
95
|
-
...selectProps,
|
|
96
|
-
id: sortSelectId
|
|
97
|
-
})]
|
|
98
|
-
})]
|
|
99
|
-
})
|
|
100
|
-
}) : titleProps ? /*#__PURE__*/_jsx(Text, {
|
|
101
|
-
...titleProps
|
|
102
|
-
}) : null;
|
|
103
|
-
return /*#__PURE__*/_jsxs(BarChartProvider, {
|
|
104
|
-
value: contextValue,
|
|
105
|
-
children: [titleContent, /*#__PURE__*/_jsxs(Box, {
|
|
106
|
-
as: "figure",
|
|
107
|
-
containerType: "inline-size",
|
|
108
|
-
position: "relative",
|
|
109
|
-
width: "100%",
|
|
110
|
-
children: [/*#__PURE__*/_jsx(ScaleChartHeader, {
|
|
111
|
-
maxScaleValue: maxScaleValue,
|
|
112
|
-
tickCount: tickCount
|
|
113
|
-
}), /*#__PURE__*/_jsxs(Box, {
|
|
114
|
-
position: "relative",
|
|
115
|
-
width: "100%",
|
|
116
|
-
children: [/*#__PURE__*/_jsx(GridLines, {
|
|
117
|
-
maxScaleValue: maxScaleValue,
|
|
118
|
-
tickCount: tickCount
|
|
119
|
-
}), /*#__PURE__*/_jsx(BarsList, {
|
|
120
|
-
"aria-labelledby": ariaLabelledBy ?? titleId,
|
|
121
|
-
children: sortedBars.map((bar, index) => /*#__PURE__*/_jsx(BarRow, {
|
|
122
|
-
index: index,
|
|
123
|
-
...bar
|
|
124
|
-
}, getBarRowKey(bar, index)))
|
|
125
|
-
})]
|
|
126
|
-
}), /*#__PURE__*/_jsx(Text, {
|
|
127
|
-
as: "figcaption",
|
|
128
|
-
color: "text-disabled",
|
|
129
|
-
hidden: hideDescription,
|
|
130
|
-
mt: 8,
|
|
131
|
-
variant: "p-small",
|
|
132
|
-
children: description
|
|
133
|
-
})]
|
|
134
|
-
})]
|
|
135
|
-
});
|
|
136
|
-
};
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
import _styled from "@emotion/styled/base";
|
|
2
|
-
import { css } from '@codecademy/gamut-styles';
|
|
3
|
-
import React, { useMemo } from 'react';
|
|
4
|
-
import { Box } from '../../Box';
|
|
5
|
-
import { useLabelPositions } from '../utils/hooks';
|
|
6
|
-
import { LabelSpacer } from './LabelSpacer';
|
|
7
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
|
-
const GridLineWrapper = /*#__PURE__*/_styled(Box, {
|
|
9
|
-
target: "ejng4zk2",
|
|
10
|
-
label: "GridLineWrapper"
|
|
11
|
-
})(css({
|
|
12
|
-
inset: 0,
|
|
13
|
-
pointerEvents: 'none',
|
|
14
|
-
position: 'absolute',
|
|
15
|
-
zIndex: 0
|
|
16
|
-
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvR3JpZExpbmVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFTd0IiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0JhckNoYXJ0L2xheW91dC9HcmlkTGluZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBSZWFjdCwgeyB1c2VNZW1vIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBCb3ggfSBmcm9tICcuLi8uLi9Cb3gnO1xuaW1wb3J0IHsgU2NhbGVBeGlzTGF5b3V0UHJvcHMgfSBmcm9tICcuLi9zaGFyZWQvdHlwZXMnO1xuaW1wb3J0IHsgdXNlTGFiZWxQb3NpdGlvbnMgfSBmcm9tICcuLi91dGlscy9ob29rcyc7XG5pbXBvcnQgeyBMYWJlbFNwYWNlciB9IGZyb20gJy4vTGFiZWxTcGFjZXInO1xuXG5jb25zdCBHcmlkTGluZVdyYXBwZXIgPSBzdHlsZWQoQm94KShcbiAgY3NzKHtcbiAgICBpbnNldDogMCxcbiAgICBwb2ludGVyRXZlbnRzOiAnbm9uZScsXG4gICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG5cbiAgICB6SW5kZXg6IDAsXG4gIH0pXG4pO1xuXG5jb25zdCBHcmlkTGluZUNvbnRhaW5lciA9IHN0eWxlZChCb3gpKFxuICBjc3Moe1xuICAgIGJvcmRlckNvbG9yOiAnYmFja2dyb3VuZC1kaXNhYmxlZCcsXG4gICAgYm9yZGVyWDogMSxcbiAgICBkaXNwbGF5OiB7IF86ICdub25lJywgY194czogJ2Jsb2NrJyB9LFxuICAgIGluc2V0OiAwLFxuICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICB9KVxuKTtcblxuY29uc3QgR3JpZExpbmUgPSBzdHlsZWQoQm94KTx7IHBvc2l0aW9uUGVyY2VudDogbnVtYmVyIH0+KFxuICBjc3Moe1xuICAgIGJvcmRlckxlZnQ6IDEsXG4gICAgYm9yZGVyQ29sb3JMZWZ0OiAnYmFja2dyb3VuZC1kaXNhYmxlZCcsXG4gICAgaGVpZ2h0OiAnMTAwJScsXG4gICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgdG9wOiAwLFxuICAgIHdpZHRoOiAwLFxuICB9KSxcbiAgKHsgcG9zaXRpb25QZXJjZW50IH0pID0+ICh7XG4gICAgbGVmdDogYCR7cG9zaXRpb25QZXJjZW50fSVgLFxuICAgIHRyYW5zZm9ybTogJ3RyYW5zbGF0ZVgoLTUwJSknLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IEdyaWRMaW5lczogUmVhY3QuRkM8U2NhbGVBeGlzTGF5b3V0UHJvcHM+ID0gKHtcbiAgbWF4U2NhbGVWYWx1ZSxcbiAgdGlja0NvdW50LFxufSkgPT4ge1xuICBjb25zdCBsYWJlbFBvc2l0aW9ucyA9IHVzZUxhYmVsUG9zaXRpb25zKHtcbiAgICBtYXhTY2FsZVZhbHVlLFxuICAgIHRpY2tDb3VudCxcbiAgfSk7XG5cbiAgY29uc3QgbGluZXMgPSB1c2VNZW1vKFxuICAgICgpID0+XG4gICAgICBsYWJlbFBvc2l0aW9ucy5tYXAoKHsgcG9zaXRpb25QZXJjZW50LCB2YWx1ZSB9KSA9PiAoXG4gICAgICAgIDxHcmlkTGluZVxuICAgICAgICAgIGFyaWEtaGlkZGVuXG4gICAgICAgICAga2V5PXtgZ3JpZGxpbmUtJHt2YWx1ZX0tJHtwb3NpdGlvblBlcmNlbnR9YH1cbiAgICAgICAgICBwb3NpdGlvblBlcmNlbnQ9e3Bvc2l0aW9uUGVyY2VudH1cbiAgICAgICAgLz5cbiAgICAgICkpLFxuICAgIFtsYWJlbFBvc2l0aW9uc11cbiAgKTtcblxuICByZXR1cm4gKFxuICAgIDxHcmlkTGluZVdyYXBwZXIgYXJpYS1oaWRkZW4+XG4gICAgICA8TGFiZWxTcGFjZXI+XG4gICAgICAgIDxHcmlkTGluZUNvbnRhaW5lcj57bGluZXN9PC9HcmlkTGluZUNvbnRhaW5lcj5cbiAgICAgIDwvTGFiZWxTcGFjZXI+XG4gICAgPC9HcmlkTGluZVdyYXBwZXI+XG4gICk7XG59O1xuIl19 */");
|
|
17
|
-
const GridLineContainer = /*#__PURE__*/_styled(Box, {
|
|
18
|
-
target: "ejng4zk1",
|
|
19
|
-
label: "GridLineContainer"
|
|
20
|
-
})(css({
|
|
21
|
-
borderColor: 'background-disabled',
|
|
22
|
-
borderX: 1,
|
|
23
|
-
display: {
|
|
24
|
-
_: 'none',
|
|
25
|
-
c_xs: 'block'
|
|
26
|
-
},
|
|
27
|
-
inset: 0,
|
|
28
|
-
position: 'absolute'
|
|
29
|
-
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvR3JpZExpbmVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFtQjBCIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvR3JpZExpbmVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUmVhY3QsIHsgdXNlTWVtbyB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgQm94IH0gZnJvbSAnLi4vLi4vQm94JztcbmltcG9ydCB7IFNjYWxlQXhpc0xheW91dFByb3BzIH0gZnJvbSAnLi4vc2hhcmVkL3R5cGVzJztcbmltcG9ydCB7IHVzZUxhYmVsUG9zaXRpb25zIH0gZnJvbSAnLi4vdXRpbHMvaG9va3MnO1xuaW1wb3J0IHsgTGFiZWxTcGFjZXIgfSBmcm9tICcuL0xhYmVsU3BhY2VyJztcblxuY29uc3QgR3JpZExpbmVXcmFwcGVyID0gc3R5bGVkKEJveCkoXG4gIGNzcyh7XG4gICAgaW5zZXQ6IDAsXG4gICAgcG9pbnRlckV2ZW50czogJ25vbmUnLFxuICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuXG4gICAgekluZGV4OiAwLFxuICB9KVxuKTtcblxuY29uc3QgR3JpZExpbmVDb250YWluZXIgPSBzdHlsZWQoQm94KShcbiAgY3NzKHtcbiAgICBib3JkZXJDb2xvcjogJ2JhY2tncm91bmQtZGlzYWJsZWQnLFxuICAgIGJvcmRlclg6IDEsXG4gICAgZGlzcGxheTogeyBfOiAnbm9uZScsIGNfeHM6ICdibG9jaycgfSxcbiAgICBpbnNldDogMCxcbiAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgfSlcbik7XG5cbmNvbnN0IEdyaWRMaW5lID0gc3R5bGVkKEJveCk8eyBwb3NpdGlvblBlcmNlbnQ6IG51bWJlciB9PihcbiAgY3NzKHtcbiAgICBib3JkZXJMZWZ0OiAxLFxuICAgIGJvcmRlckNvbG9yTGVmdDogJ2JhY2tncm91bmQtZGlzYWJsZWQnLFxuICAgIGhlaWdodDogJzEwMCUnLFxuICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgIHRvcDogMCxcbiAgICB3aWR0aDogMCxcbiAgfSksXG4gICh7IHBvc2l0aW9uUGVyY2VudCB9KSA9PiAoe1xuICAgIGxlZnQ6IGAke3Bvc2l0aW9uUGVyY2VudH0lYCxcbiAgICB0cmFuc2Zvcm06ICd0cmFuc2xhdGVYKC01MCUpJyxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBHcmlkTGluZXM6IFJlYWN0LkZDPFNjYWxlQXhpc0xheW91dFByb3BzPiA9ICh7XG4gIG1heFNjYWxlVmFsdWUsXG4gIHRpY2tDb3VudCxcbn0pID0+IHtcbiAgY29uc3QgbGFiZWxQb3NpdGlvbnMgPSB1c2VMYWJlbFBvc2l0aW9ucyh7XG4gICAgbWF4U2NhbGVWYWx1ZSxcbiAgICB0aWNrQ291bnQsXG4gIH0pO1xuXG4gIGNvbnN0IGxpbmVzID0gdXNlTWVtbyhcbiAgICAoKSA9PlxuICAgICAgbGFiZWxQb3NpdGlvbnMubWFwKCh7IHBvc2l0aW9uUGVyY2VudCwgdmFsdWUgfSkgPT4gKFxuICAgICAgICA8R3JpZExpbmVcbiAgICAgICAgICBhcmlhLWhpZGRlblxuICAgICAgICAgIGtleT17YGdyaWRsaW5lLSR7dmFsdWV9LSR7cG9zaXRpb25QZXJjZW50fWB9XG4gICAgICAgICAgcG9zaXRpb25QZXJjZW50PXtwb3NpdGlvblBlcmNlbnR9XG4gICAgICAgIC8+XG4gICAgICApKSxcbiAgICBbbGFiZWxQb3NpdGlvbnNdXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8R3JpZExpbmVXcmFwcGVyIGFyaWEtaGlkZGVuPlxuICAgICAgPExhYmVsU3BhY2VyPlxuICAgICAgICA8R3JpZExpbmVDb250YWluZXI+e2xpbmVzfTwvR3JpZExpbmVDb250YWluZXI+XG4gICAgICA8L0xhYmVsU3BhY2VyPlxuICAgIDwvR3JpZExpbmVXcmFwcGVyPlxuICApO1xufTtcbiJdfQ== */");
|
|
30
|
-
const GridLine = /*#__PURE__*/_styled(Box, {
|
|
31
|
-
target: "ejng4zk0",
|
|
32
|
-
label: "GridLine"
|
|
33
|
-
})(css({
|
|
34
|
-
borderLeft: 1,
|
|
35
|
-
borderColorLeft: 'background-disabled',
|
|
36
|
-
height: '100%',
|
|
37
|
-
position: 'absolute',
|
|
38
|
-
top: 0,
|
|
39
|
-
width: 0
|
|
40
|
-
}), ({
|
|
41
|
-
positionPercent
|
|
42
|
-
}) => ({
|
|
43
|
-
left: `${positionPercent}%`,
|
|
44
|
-
transform: 'translateX(-50%)'
|
|
45
|
-
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvR3JpZExpbmVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE2QmlCIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvR3JpZExpbmVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUmVhY3QsIHsgdXNlTWVtbyB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgQm94IH0gZnJvbSAnLi4vLi4vQm94JztcbmltcG9ydCB7IFNjYWxlQXhpc0xheW91dFByb3BzIH0gZnJvbSAnLi4vc2hhcmVkL3R5cGVzJztcbmltcG9ydCB7IHVzZUxhYmVsUG9zaXRpb25zIH0gZnJvbSAnLi4vdXRpbHMvaG9va3MnO1xuaW1wb3J0IHsgTGFiZWxTcGFjZXIgfSBmcm9tICcuL0xhYmVsU3BhY2VyJztcblxuY29uc3QgR3JpZExpbmVXcmFwcGVyID0gc3R5bGVkKEJveCkoXG4gIGNzcyh7XG4gICAgaW5zZXQ6IDAsXG4gICAgcG9pbnRlckV2ZW50czogJ25vbmUnLFxuICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuXG4gICAgekluZGV4OiAwLFxuICB9KVxuKTtcblxuY29uc3QgR3JpZExpbmVDb250YWluZXIgPSBzdHlsZWQoQm94KShcbiAgY3NzKHtcbiAgICBib3JkZXJDb2xvcjogJ2JhY2tncm91bmQtZGlzYWJsZWQnLFxuICAgIGJvcmRlclg6IDEsXG4gICAgZGlzcGxheTogeyBfOiAnbm9uZScsIGNfeHM6ICdibG9jaycgfSxcbiAgICBpbnNldDogMCxcbiAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgfSlcbik7XG5cbmNvbnN0IEdyaWRMaW5lID0gc3R5bGVkKEJveCk8eyBwb3NpdGlvblBlcmNlbnQ6IG51bWJlciB9PihcbiAgY3NzKHtcbiAgICBib3JkZXJMZWZ0OiAxLFxuICAgIGJvcmRlckNvbG9yTGVmdDogJ2JhY2tncm91bmQtZGlzYWJsZWQnLFxuICAgIGhlaWdodDogJzEwMCUnLFxuICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgIHRvcDogMCxcbiAgICB3aWR0aDogMCxcbiAgfSksXG4gICh7IHBvc2l0aW9uUGVyY2VudCB9KSA9PiAoe1xuICAgIGxlZnQ6IGAke3Bvc2l0aW9uUGVyY2VudH0lYCxcbiAgICB0cmFuc2Zvcm06ICd0cmFuc2xhdGVYKC01MCUpJyxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBHcmlkTGluZXM6IFJlYWN0LkZDPFNjYWxlQXhpc0xheW91dFByb3BzPiA9ICh7XG4gIG1heFNjYWxlVmFsdWUsXG4gIHRpY2tDb3VudCxcbn0pID0+IHtcbiAgY29uc3QgbGFiZWxQb3NpdGlvbnMgPSB1c2VMYWJlbFBvc2l0aW9ucyh7XG4gICAgbWF4U2NhbGVWYWx1ZSxcbiAgICB0aWNrQ291bnQsXG4gIH0pO1xuXG4gIGNvbnN0IGxpbmVzID0gdXNlTWVtbyhcbiAgICAoKSA9PlxuICAgICAgbGFiZWxQb3NpdGlvbnMubWFwKCh7IHBvc2l0aW9uUGVyY2VudCwgdmFsdWUgfSkgPT4gKFxuICAgICAgICA8R3JpZExpbmVcbiAgICAgICAgICBhcmlhLWhpZGRlblxuICAgICAgICAgIGtleT17YGdyaWRsaW5lLSR7dmFsdWV9LSR7cG9zaXRpb25QZXJjZW50fWB9XG4gICAgICAgICAgcG9zaXRpb25QZXJjZW50PXtwb3NpdGlvblBlcmNlbnR9XG4gICAgICAgIC8+XG4gICAgICApKSxcbiAgICBbbGFiZWxQb3NpdGlvbnNdXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8R3JpZExpbmVXcmFwcGVyIGFyaWEtaGlkZGVuPlxuICAgICAgPExhYmVsU3BhY2VyPlxuICAgICAgICA8R3JpZExpbmVDb250YWluZXI+e2xpbmVzfTwvR3JpZExpbmVDb250YWluZXI+XG4gICAgICA8L0xhYmVsU3BhY2VyPlxuICAgIDwvR3JpZExpbmVXcmFwcGVyPlxuICApO1xufTtcbiJdfQ== */");
|
|
46
|
-
export const GridLines = ({
|
|
47
|
-
maxScaleValue,
|
|
48
|
-
tickCount
|
|
49
|
-
}) => {
|
|
50
|
-
const labelPositions = useLabelPositions({
|
|
51
|
-
maxScaleValue,
|
|
52
|
-
tickCount
|
|
53
|
-
});
|
|
54
|
-
const lines = useMemo(() => labelPositions.map(({
|
|
55
|
-
positionPercent,
|
|
56
|
-
value
|
|
57
|
-
}) => /*#__PURE__*/_jsx(GridLine, {
|
|
58
|
-
"aria-hidden": true,
|
|
59
|
-
positionPercent: positionPercent
|
|
60
|
-
}, `gridline-${value}-${positionPercent}`)), [labelPositions]);
|
|
61
|
-
return /*#__PURE__*/_jsx(GridLineWrapper, {
|
|
62
|
-
"aria-hidden": true,
|
|
63
|
-
children: /*#__PURE__*/_jsx(LabelSpacer, {
|
|
64
|
-
children: /*#__PURE__*/_jsx(GridLineContainer, {
|
|
65
|
-
children: lines
|
|
66
|
-
})
|
|
67
|
-
})
|
|
68
|
-
});
|
|
69
|
-
};
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
import _styled from "@emotion/styled/base";
|
|
2
|
-
import { css } from '@codecademy/gamut-styles';
|
|
3
|
-
import { Box } from '../../Box';
|
|
4
|
-
import { barListItemPadding } from '../shared/styles';
|
|
5
|
-
import { useBarChartContext } from '../utils/hooks';
|
|
6
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
7
|
-
const SpacerContainer = /*#__PURE__*/_styled(Box, {
|
|
8
|
-
target: "e9z677g1",
|
|
9
|
-
label: "SpacerContainer"
|
|
10
|
-
})(css({
|
|
11
|
-
display: 'flex',
|
|
12
|
-
width: '100%',
|
|
13
|
-
height: '100%',
|
|
14
|
-
gap: 0
|
|
15
|
-
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvTGFiZWxTcGFjZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVF3QiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvQmFyQ2hhcnQvbGF5b3V0L0xhYmVsU3BhY2VyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IEJveCB9IGZyb20gJy4uLy4uL0JveCc7XG5pbXBvcnQgeyBiYXJMaXN0SXRlbVBhZGRpbmcgfSBmcm9tICcuLi9zaGFyZWQvc3R5bGVzJztcbmltcG9ydCB7IHVzZUJhckNoYXJ0Q29udGV4dCB9IGZyb20gJy4uL3V0aWxzL2hvb2tzJztcblxuY29uc3QgU3BhY2VyQ29udGFpbmVyID0gc3R5bGVkKEJveCkoXG4gIGNzcyh7XG4gICAgZGlzcGxheTogJ2ZsZXgnLFxuICAgIHdpZHRoOiAnMTAwJScsXG4gICAgaGVpZ2h0OiAnMTAwJScsXG4gICAgZ2FwOiAwLFxuICB9KVxuKTtcblxuY29uc3QgQ29udGVudEFyZWEgPSBzdHlsZWQoQm94KShcbiAgY3NzKHtcbiAgICBmbGV4OiAxLFxuICAgIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICAgIGhlaWdodDogJzEwMCUnLFxuICB9KVxuKTtcblxuZXhwb3J0IGludGVyZmFjZSBMYWJlbFNwYWNlclByb3BzIHtcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcbiAgY2xhc3NOYW1lPzogc3RyaW5nO1xufVxuXG5jb25zdCBQcmVMYWJlbFNwYWNlcjogUmVhY3QuRkMgPSAoKSA9PiB7XG4gIGNvbnN0IHsgd2lkZXN0Q2F0ZWdvcnlMYWJlbFdpZHRoIH0gPSB1c2VCYXJDaGFydENvbnRleHQoKTtcbiAgY29uc3Qgd2lkdGggPVxuICAgIHdpZGVzdENhdGVnb3J5TGFiZWxXaWR0aCA9PT0gbnVsbFxuICAgICAgPyAnbWluLWNvbnRlbnQnXG4gICAgICA6IHdpZGVzdENhdGVnb3J5TGFiZWxXaWR0aDtcblxuICByZXR1cm4gPEJveCBmbGV4U2hyaW5rPXswfSBtaW5XaWR0aD17d2lkdGh9IG1sPXtiYXJMaXN0SXRlbVBhZGRpbmd9IC8+O1xufTtcblxuY29uc3QgUG9zdExhYmVsU3BhY2VyOiBSZWFjdC5GQyA9ICgpID0+IHtcbiAgY29uc3QgeyB3aWRlc3RUb3RhbFZhbHVlTGFiZWxXaWR0aCB9ID0gdXNlQmFyQ2hhcnRDb250ZXh0KCk7XG4gIGNvbnN0IHdpZHRoID1cbiAgICB3aWRlc3RUb3RhbFZhbHVlTGFiZWxXaWR0aCA9PT0gbnVsbFxuICAgICAgPyAnbWluLWNvbnRlbnQnXG4gICAgICA6IHdpZGVzdFRvdGFsVmFsdWVMYWJlbFdpZHRoO1xuXG4gIHJldHVybiA8Qm94IGZsZXhTaHJpbms9ezB9IG1pbldpZHRoPXt3aWR0aH0gbXI9e2Jhckxpc3RJdGVtUGFkZGluZ30gLz47XG59O1xuXG5leHBvcnQgY29uc3QgTGFiZWxTcGFjZXI6IFJlYWN0LkZDPExhYmVsU3BhY2VyUHJvcHM+ID0gKHtcbiAgY2hpbGRyZW4sXG4gIGNsYXNzTmFtZSxcbn0pID0+IHtcbiAgcmV0dXJuIChcbiAgICA8U3BhY2VyQ29udGFpbmVyIGNsYXNzTmFtZT17Y2xhc3NOYW1lfT5cbiAgICAgIDxQcmVMYWJlbFNwYWNlciAvPlxuICAgICAgPENvbnRlbnRBcmVhPntjaGlsZHJlbn08L0NvbnRlbnRBcmVhPlxuICAgICAgPFBvc3RMYWJlbFNwYWNlciAvPlxuICAgIDwvU3BhY2VyQ29udGFpbmVyPlxuICApO1xufTtcbiJdfQ== */");
|
|
16
|
-
const ContentArea = /*#__PURE__*/_styled(Box, {
|
|
17
|
-
target: "e9z677g0",
|
|
18
|
-
label: "ContentArea"
|
|
19
|
-
})(css({
|
|
20
|
-
flex: 1,
|
|
21
|
-
position: 'relative',
|
|
22
|
-
height: '100%'
|
|
23
|
-
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvTGFiZWxTcGFjZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCb0IiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0JhckNoYXJ0L2xheW91dC9MYWJlbFNwYWNlci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBCb3ggfSBmcm9tICcuLi8uLi9Cb3gnO1xuaW1wb3J0IHsgYmFyTGlzdEl0ZW1QYWRkaW5nIH0gZnJvbSAnLi4vc2hhcmVkL3N0eWxlcyc7XG5pbXBvcnQgeyB1c2VCYXJDaGFydENvbnRleHQgfSBmcm9tICcuLi91dGlscy9ob29rcyc7XG5cbmNvbnN0IFNwYWNlckNvbnRhaW5lciA9IHN0eWxlZChCb3gpKFxuICBjc3Moe1xuICAgIGRpc3BsYXk6ICdmbGV4JyxcbiAgICB3aWR0aDogJzEwMCUnLFxuICAgIGhlaWdodDogJzEwMCUnLFxuICAgIGdhcDogMCxcbiAgfSlcbik7XG5cbmNvbnN0IENvbnRlbnRBcmVhID0gc3R5bGVkKEJveCkoXG4gIGNzcyh7XG4gICAgZmxleDogMSxcbiAgICBwb3NpdGlvbjogJ3JlbGF0aXZlJyxcbiAgICBoZWlnaHQ6ICcxMDAlJyxcbiAgfSlcbik7XG5cbmV4cG9ydCBpbnRlcmZhY2UgTGFiZWxTcGFjZXJQcm9wcyB7XG4gIGNoaWxkcmVuOiBSZWFjdE5vZGU7XG4gIGNsYXNzTmFtZT86IHN0cmluZztcbn1cblxuY29uc3QgUHJlTGFiZWxTcGFjZXI6IFJlYWN0LkZDID0gKCkgPT4ge1xuICBjb25zdCB7IHdpZGVzdENhdGVnb3J5TGFiZWxXaWR0aCB9ID0gdXNlQmFyQ2hhcnRDb250ZXh0KCk7XG4gIGNvbnN0IHdpZHRoID1cbiAgICB3aWRlc3RDYXRlZ29yeUxhYmVsV2lkdGggPT09IG51bGxcbiAgICAgID8gJ21pbi1jb250ZW50J1xuICAgICAgOiB3aWRlc3RDYXRlZ29yeUxhYmVsV2lkdGg7XG5cbiAgcmV0dXJuIDxCb3ggZmxleFNocmluaz17MH0gbWluV2lkdGg9e3dpZHRofSBtbD17YmFyTGlzdEl0ZW1QYWRkaW5nfSAvPjtcbn07XG5cbmNvbnN0IFBvc3RMYWJlbFNwYWNlcjogUmVhY3QuRkMgPSAoKSA9PiB7XG4gIGNvbnN0IHsgd2lkZXN0VG90YWxWYWx1ZUxhYmVsV2lkdGggfSA9IHVzZUJhckNoYXJ0Q29udGV4dCgpO1xuICBjb25zdCB3aWR0aCA9XG4gICAgd2lkZXN0VG90YWxWYWx1ZUxhYmVsV2lkdGggPT09IG51bGxcbiAgICAgID8gJ21pbi1jb250ZW50J1xuICAgICAgOiB3aWRlc3RUb3RhbFZhbHVlTGFiZWxXaWR0aDtcblxuICByZXR1cm4gPEJveCBmbGV4U2hyaW5rPXswfSBtaW5XaWR0aD17d2lkdGh9IG1yPXtiYXJMaXN0SXRlbVBhZGRpbmd9IC8+O1xufTtcblxuZXhwb3J0IGNvbnN0IExhYmVsU3BhY2VyOiBSZWFjdC5GQzxMYWJlbFNwYWNlclByb3BzPiA9ICh7XG4gIGNoaWxkcmVuLFxuICBjbGFzc05hbWUsXG59KSA9PiB7XG4gIHJldHVybiAoXG4gICAgPFNwYWNlckNvbnRhaW5lciBjbGFzc05hbWU9e2NsYXNzTmFtZX0+XG4gICAgICA8UHJlTGFiZWxTcGFjZXIgLz5cbiAgICAgIDxDb250ZW50QXJlYT57Y2hpbGRyZW59PC9Db250ZW50QXJlYT5cbiAgICAgIDxQb3N0TGFiZWxTcGFjZXIgLz5cbiAgICA8L1NwYWNlckNvbnRhaW5lcj5cbiAgKTtcbn07XG4iXX0= */");
|
|
24
|
-
const PreLabelSpacer = () => {
|
|
25
|
-
const {
|
|
26
|
-
widestCategoryLabelWidth
|
|
27
|
-
} = useBarChartContext();
|
|
28
|
-
const width = widestCategoryLabelWidth === null ? 'min-content' : widestCategoryLabelWidth;
|
|
29
|
-
return /*#__PURE__*/_jsx(Box, {
|
|
30
|
-
flexShrink: 0,
|
|
31
|
-
minWidth: width,
|
|
32
|
-
ml: barListItemPadding
|
|
33
|
-
});
|
|
34
|
-
};
|
|
35
|
-
const PostLabelSpacer = () => {
|
|
36
|
-
const {
|
|
37
|
-
widestTotalValueLabelWidth
|
|
38
|
-
} = useBarChartContext();
|
|
39
|
-
const width = widestTotalValueLabelWidth === null ? 'min-content' : widestTotalValueLabelWidth;
|
|
40
|
-
return /*#__PURE__*/_jsx(Box, {
|
|
41
|
-
flexShrink: 0,
|
|
42
|
-
minWidth: width,
|
|
43
|
-
mr: barListItemPadding
|
|
44
|
-
});
|
|
45
|
-
};
|
|
46
|
-
export const LabelSpacer = ({
|
|
47
|
-
children,
|
|
48
|
-
className
|
|
49
|
-
}) => {
|
|
50
|
-
return /*#__PURE__*/_jsxs(SpacerContainer, {
|
|
51
|
-
className: className,
|
|
52
|
-
children: [/*#__PURE__*/_jsx(PreLabelSpacer, {}), /*#__PURE__*/_jsx(ContentArea, {
|
|
53
|
-
children: children
|
|
54
|
-
}), /*#__PURE__*/_jsx(PostLabelSpacer, {})]
|
|
55
|
-
});
|
|
56
|
-
};
|