@appquality/unguess-design-system 2.12.41 → 2.12.43
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/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,30 @@
|
|
|
1
|
+
# v2.12.43 (Fri Dec 02 2022)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- Add zindex default to tooltip [#134](https://github.com/AppQuality/unguess-design-system/pull/134) ([@marcbon](https://github.com/marcbon) [@d-beezee](https://github.com/d-beezee))
|
|
6
|
+
- fix(tooltip): add zIndex default props + add levels attribute on theme object [#133](https://github.com/AppQuality/unguess-design-system/pull/133) ([@marcbon](https://github.com/marcbon))
|
|
7
|
+
|
|
8
|
+
#### Authors: 2
|
|
9
|
+
|
|
10
|
+
- [@d-beezee](https://github.com/d-beezee)
|
|
11
|
+
- Marco Bonomo ([@marcbon](https://github.com/marcbon))
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
# v2.12.42 (Thu Dec 01 2022)
|
|
16
|
+
|
|
17
|
+
#### 🐛 Bug Fix
|
|
18
|
+
|
|
19
|
+
- Allow centering and resizing legend [#132](https://github.com/AppQuality/unguess-design-system/pull/132) ([@d-beezee](https://github.com/d-beezee))
|
|
20
|
+
- feat: Allow styling legend width and move legend to specific container [#131](https://github.com/AppQuality/unguess-design-system/pull/131) ([@d-beezee](https://github.com/d-beezee))
|
|
21
|
+
|
|
22
|
+
#### Authors: 1
|
|
23
|
+
|
|
24
|
+
- [@d-beezee](https://github.com/d-beezee)
|
|
25
|
+
|
|
26
|
+
---
|
|
27
|
+
|
|
1
28
|
# v2.12.41 (Thu Dec 01 2022)
|
|
2
29
|
|
|
3
30
|
#### 🐛 Bug Fix
|
package/build/index.js
CHANGED
|
@@ -288,7 +288,12 @@ var components = __assign(__assign({}, reactTheming.DEFAULT_THEME.components), {
|
|
|
288
288
|
return isSelected ? { fontWeight: fontWeights.semibold } : undefined;
|
|
289
289
|
} });
|
|
290
290
|
|
|
291
|
-
var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { breakpoints: __assign(__assign({}, reactTheming.DEFAULT_THEME.breakpoints), { xxl: "1440px" }), colors: __assign(__assign({}, reactTheming.DEFAULT_THEME.colors), { primaryHue: palette.blue[600], warningHue: palette.yellow[600], successHue: palette.teal["M600"], dangerHue: palette.red[600], accentHue: palette.water[600] }), palette: palette, fonts: __assign(__assign({}, reactTheming.DEFAULT_THEME.fonts), { system: '"Poppins",sans-serif,Helvetica,Arial,sans-serif' }), fontWeights: fontWeights, gradients: gradients, borderRadii: __assign(__assign({}, reactTheming.DEFAULT_THEME.borderRadii), { lg: "8px", xl: "16px", xxl: "32px" }), lineHeights: __assign(__assign({}, reactTheming.DEFAULT_THEME.lineHeights), { xs: "16px" }), components: components, shadows: __assign(__assign({}, reactTheming.DEFAULT_THEME.shadows), { boxShadow: boxShadow })
|
|
291
|
+
var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { breakpoints: __assign(__assign({}, reactTheming.DEFAULT_THEME.breakpoints), { xxl: "1440px" }), colors: __assign(__assign({}, reactTheming.DEFAULT_THEME.colors), { primaryHue: palette.blue[600], warningHue: palette.yellow[600], successHue: palette.teal["M600"], dangerHue: palette.red[600], accentHue: palette.water[600] }), palette: palette, fonts: __assign(__assign({}, reactTheming.DEFAULT_THEME.fonts), { system: '"Poppins",sans-serif,Helvetica,Arial,sans-serif' }), fontWeights: fontWeights, gradients: gradients, borderRadii: __assign(__assign({}, reactTheming.DEFAULT_THEME.borderRadii), { lg: "8px", xl: "16px", xxl: "32px" }), lineHeights: __assign(__assign({}, reactTheming.DEFAULT_THEME.lineHeights), { xs: "16px" }), components: components, shadows: __assign(__assign({}, reactTheming.DEFAULT_THEME.shadows), { boxShadow: boxShadow }), levels: {
|
|
292
|
+
back: -1,
|
|
293
|
+
base: 0,
|
|
294
|
+
front: 100,
|
|
295
|
+
modal: 200,
|
|
296
|
+
} });
|
|
292
297
|
|
|
293
298
|
var GlobalStyle = styled.createGlobalStyle(templateObject_1$1p || (templateObject_1$1p = __makeTemplateObject(["\n ::-webkit-scrollbar-track:hover {\n border-left: solid 1px ", ";\n border-right: solid 1px ", ";\n }\n\n ::-webkit-scrollbar {\n width: 10px;\n }\n\n ::-webkit-scrollbar-track {\n border: solid 2px transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n box-shadow: inset 0 0 10px 10px ", ";\n border: solid 2px transparent;\n border-radius: 25px;\n }\n\n /* This stuff is for Firefox */\n * {\n scrollbar-color: ", " #FFFFFF;\n scrollbar-width: thin;\n }\n\n html {\n overflow-y: auto;\n }\n\n body {\n font-family: ", ";\n margin: 0;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n \n svg {\n max-height: 100%;\n }\n\n"], ["\n ::-webkit-scrollbar-track:hover {\n border-left: solid 1px ", ";\n border-right: solid 1px ", ";\n }\n\n ::-webkit-scrollbar {\n width: 10px;\n }\n\n ::-webkit-scrollbar-track {\n border: solid 2px transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n box-shadow: inset 0 0 10px 10px ", ";\n border: solid 2px transparent;\n border-radius: 25px;\n }\n\n /* This stuff is for Firefox */\n * {\n scrollbar-color: ", " #FFFFFF;\n scrollbar-width: thin;\n }\n\n html {\n overflow-y: auto;\n }\n\n body {\n font-family: ", ";\n margin: 0;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n \n svg {\n max-height: 100%;\n }\n\n"])), theme.palette.grey["200"], theme.palette.grey["200"], theme.palette.blue["200"], theme.palette.blue["200"], theme.fonts.system);
|
|
294
299
|
var templateObject_1$1p;
|
|
@@ -1225,16 +1230,19 @@ var LegendItem = function (_a) {
|
|
|
1225
1230
|
var marginRight = theme.space.base * 2;
|
|
1226
1231
|
return (jsxRuntime.jsxs(LegendItemWrapper, { children: [jsxRuntime.jsx(LegendColoredSquare, { color: color, size: squareSide, marginRight: marginRight }), jsxRuntime.jsx(StyledSM, __assign({ isBold: true, squareSize: squareSide + marginRight }, { children: jsxRuntime.jsx(StyledEllipsis$1, { children: value }) }))] }));
|
|
1227
1232
|
};
|
|
1228
|
-
var LegendWrapper = styled__default["default"].div(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n width:
|
|
1233
|
+
var LegendWrapper = styled__default["default"].div(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n width: ", ";\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n"], ["\n width: ", ";\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n"])), function (_a) {
|
|
1234
|
+
var width = _a.width;
|
|
1235
|
+
return width;
|
|
1236
|
+
}, function (_a) {
|
|
1229
1237
|
var columns = _a.columns;
|
|
1230
1238
|
return columns;
|
|
1231
1239
|
});
|
|
1232
1240
|
var Legend = function (_a) {
|
|
1233
|
-
var colors = _a.colors, data = _a.data, _b = _a.columns, columns = _b === void 0 ? 2 : _b;
|
|
1241
|
+
var colors = _a.colors, data = _a.data, _b = _a.columns, columns = _b === void 0 ? 2 : _b, _c = _a.width, width = _c === void 0 ? "75%" : _c;
|
|
1234
1242
|
var colorScheme = data.map(function (d, index) {
|
|
1235
1243
|
return { value: d, color: colors[index % colors.length] };
|
|
1236
1244
|
});
|
|
1237
|
-
return (jsxRuntime.jsx(LegendWrapper, __assign({ columns: columns }, { children: colorScheme.map(function (item) { return (jsxRuntime.jsx(LegendItem, __assign({}, item), item.value)); }) })));
|
|
1245
|
+
return (jsxRuntime.jsx(LegendWrapper, __assign({ columns: columns, width: width }, { children: colorScheme.map(function (item) { return (jsxRuntime.jsx(LegendItem, __assign({}, item), item.value)); }) })));
|
|
1238
1246
|
};
|
|
1239
1247
|
var templateObject_1$18, templateObject_2$t, templateObject_3$i, templateObject_4$e, templateObject_5$6;
|
|
1240
1248
|
|
|
@@ -1242,7 +1250,7 @@ var PieChart = function (_a) {
|
|
|
1242
1250
|
var _b;
|
|
1243
1251
|
var theme = _a.theme, colors = _a.colors, width = _a.width, height = _a.height, data = _a.data, centerItem = _a.centerItem, margin = _a.margin, tooltip = _a.tooltip, legend = _a.legend;
|
|
1244
1252
|
var themeContext = React.useContext(styled.ThemeContext);
|
|
1245
|
-
return (jsxRuntime.
|
|
1253
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ChartContainer, __assign({ width: width, height: height }, { children: jsxRuntime.jsx(pie.ResponsivePie, { theme: __assign({}, __assign(__assign(__assign({}, DEFAULT_CHARTS_THEME), theme), { labels: __assign(__assign({}, theme === null || theme === void 0 ? void 0 : theme.labels), { text: __assign({ fontWeight: themeContext.fontWeights.semibold, fill: themeContext.palette.grey[800] }, (_b = theme === null || theme === void 0 ? void 0 : theme.labels) === null || _b === void 0 ? void 0 : _b.text) }) })), arcLinkLabel: function (d) { return (d.label || d.id).toString(); }, colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL_8_A, enableArcLabels: false, arcLinkLabelsColor: { from: "color" }, padAngle: 2, data: data, margin: __assign({ top: 40, bottom: 40 }, margin), tooltip: tooltip
|
|
1246
1254
|
? function (node) {
|
|
1247
1255
|
var data = node.datum.data;
|
|
1248
1256
|
var label = (data === null || data === void 0 ? void 0 : data.label) || data.id;
|
|
@@ -1257,7 +1265,11 @@ var PieChart = function (_a) {
|
|
|
1257
1265
|
? [
|
|
1258
1266
|
function (props) { return (jsxRuntime.jsx(CenteredItem, __assign({}, props, { theme: themeContext, label: centerItem.label, value: centerItem.value, fontSizeMultiplier: centerItem.fontSizeMultiplier }))); },
|
|
1259
1267
|
]
|
|
1260
|
-
: []), true), activeOuterRadiusOffset: 12 }), legend ? (jsxRuntime.jsx(Legend, { colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL_8_A, data: data.map(function (d) { return d.id; }), columns: typeof legend === "object"
|
|
1268
|
+
: []), true), activeOuterRadiusOffset: 12 }) })), jsxRuntime.jsx(ChartContainer, __assign({ width: width, height: "auto" }, { children: legend ? (jsxRuntime.jsx(Legend, { colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL_8_A, data: data.map(function (d) { return d.id; }), columns: typeof legend === "object" && legend.columns
|
|
1269
|
+
? legend.columns
|
|
1270
|
+
: undefined, width: typeof legend === "object" && legend.width
|
|
1271
|
+
? legend.width
|
|
1272
|
+
: undefined })) : undefined }))] }));
|
|
1261
1273
|
};
|
|
1262
1274
|
|
|
1263
1275
|
var AbsoluteChartContainer = styled__default["default"](ChartContainer)(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n ", ";\n ", ";\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n ", ";\n ", ";\n"])), function (_a) {
|
|
@@ -1360,47 +1372,51 @@ var SunburstChart = function (_a) {
|
|
|
1360
1372
|
};
|
|
1361
1373
|
if (!data.children)
|
|
1362
1374
|
return jsxRuntime.jsx(jsxRuntime.Fragment, { children: "No data" });
|
|
1363
|
-
return (jsxRuntime.jsxs(ChartContainer, __assign({ width: width, height: height, style: isHovering ? { cursor: "pointer" } : undefined }, { children:
|
|
1364
|
-
|
|
1365
|
-
|
|
1366
|
-
|
|
1367
|
-
|
|
1368
|
-
|
|
1369
|
-
|
|
1370
|
-
|
|
1371
|
-
|
|
1372
|
-
|
|
1373
|
-
|
|
1374
|
-
|
|
1375
|
-
|
|
1376
|
-
|
|
1377
|
-
|
|
1378
|
-
|
|
1379
|
-
|
|
1380
|
-
|
|
1381
|
-
|
|
1382
|
-
|
|
1383
|
-
|
|
1384
|
-
|
|
1385
|
-
|
|
1386
|
-
|
|
1387
|
-
|
|
1388
|
-
|
|
1389
|
-
|
|
1390
|
-
|
|
1391
|
-
|
|
1392
|
-
|
|
1393
|
-
|
|
1394
|
-
|
|
1395
|
-
|
|
1396
|
-
|
|
1397
|
-
|
|
1398
|
-
|
|
1399
|
-
|
|
1400
|
-
|
|
1401
|
-
|
|
1402
|
-
|
|
1403
|
-
|
|
1375
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ChartContainer, __assign({ width: width, height: height, style: isHovering ? { cursor: "pointer" } : undefined }, { children: jsxRuntime.jsx(sunburst.ResponsiveSunburst, { theme: tooltip
|
|
1376
|
+
? __assign(__assign({}, DEFAULT_CHARTS_THEME), { tooltip: __assign(__assign({}, DEFAULT_CHARTS_THEME.tooltip), { container: {
|
|
1377
|
+
padding: 0,
|
|
1378
|
+
} }) }) : DEFAULT_CHARTS_THEME, colors: currentColor
|
|
1379
|
+
? function () { return currentColor; }
|
|
1380
|
+
: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL_8_A, borderWidth: 4, cornerRadius: 3, onMouseEnter: function (node) {
|
|
1381
|
+
if (node.data.children) {
|
|
1382
|
+
setIsHovering(true);
|
|
1383
|
+
}
|
|
1384
|
+
}, onMouseLeave: function (node) {
|
|
1385
|
+
if (node.data.children) {
|
|
1386
|
+
setIsHovering(false);
|
|
1387
|
+
}
|
|
1388
|
+
}, tooltip: tooltip
|
|
1389
|
+
? function (node) { return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: tooltip({
|
|
1390
|
+
label: node.data.label || node.data.name,
|
|
1391
|
+
value: getChildrenValue(node.data),
|
|
1392
|
+
}) })); }
|
|
1393
|
+
: undefined, layers: __spreadArray(__spreadArray([
|
|
1394
|
+
"arcs"
|
|
1395
|
+
], (centerItem
|
|
1396
|
+
? [
|
|
1397
|
+
function (props) { return (jsxRuntime.jsx(CenteredItem, __assign({}, props, { fontSizeMultiplier: centerItem.fontSizeMultiplier, theme: themeContext, label: centerItem.label, value: centerItem.value }))); },
|
|
1398
|
+
]
|
|
1399
|
+
: []), true), (currentColor
|
|
1400
|
+
? [
|
|
1401
|
+
function (props) { return (jsxRuntime.jsx(ResetButton, { centerX: props.centerX, centerY: props.centerY, radius: props.radius, theme: themeContext, onClick: function () {
|
|
1402
|
+
changeDataSlice({
|
|
1403
|
+
data: data,
|
|
1404
|
+
});
|
|
1405
|
+
} })); },
|
|
1406
|
+
]
|
|
1407
|
+
: []), true), id: "name", value: "value", margin: __assign({ top: 40, bottom: 40 }, margin), data: currentData, childColor: { from: "color", modifiers: [["brighter", 0.5]] }, onClick: function (clickedData) {
|
|
1408
|
+
var foundObject = findChildrenByName(currentData, clickedData.id.toString());
|
|
1409
|
+
if (foundObject && foundObject.children) {
|
|
1410
|
+
changeDataSlice({
|
|
1411
|
+
data: foundObject,
|
|
1412
|
+
color: clickedData.color,
|
|
1413
|
+
});
|
|
1414
|
+
}
|
|
1415
|
+
} }) })), jsxRuntime.jsx(ChartContainer, __assign({ width: width, height: "auto" }, { children: legend ? (jsxRuntime.jsx(Legend, { colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL_8_A, data: data.children.map(function (d) { return d.name; }), columns: typeof legend === "object" && legend.columns
|
|
1416
|
+
? legend.columns
|
|
1417
|
+
: undefined, width: typeof legend === "object" && legend.width
|
|
1418
|
+
? legend.width
|
|
1419
|
+
: undefined })) : undefined }))] }));
|
|
1404
1420
|
};
|
|
1405
1421
|
|
|
1406
1422
|
var CustomCell = function (_a) {
|
|
@@ -3634,7 +3650,11 @@ var templateObject_1$4, templateObject_2$1, templateObject_3;
|
|
|
3634
3650
|
* - To provide information a user needs to know or remember
|
|
3635
3651
|
* - To display truncated text, use a title attribute instead
|
|
3636
3652
|
*/
|
|
3637
|
-
var TooltipComponent = function (props) {
|
|
3653
|
+
var TooltipComponent = function (props) {
|
|
3654
|
+
var _a;
|
|
3655
|
+
var theme = React.useContext(styled.ThemeContext);
|
|
3656
|
+
return jsxRuntime.jsx(reactTooltips.Tooltip, __assign({}, props, { zIndex: (_a = props.zIndex) !== null && _a !== void 0 ? _a : theme.levels.front }));
|
|
3657
|
+
};
|
|
3638
3658
|
var Tooltip = styled__default["default"](TooltipComponent)(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n box-shadow: ", ";\n"], ["\n box-shadow: ", ";\n"])), function (_a) {
|
|
3639
3659
|
var theme = _a.theme;
|
|
3640
3660
|
return theme.shadows.lg("".concat(theme.space.base * 3, "px"), "".concat(theme.space.base * 5, "px"), reactTheming.getColor("neutralHue", 600, theme, 0.15));
|
|
@@ -1,6 +1,10 @@
|
|
|
1
|
-
declare const Legend: ({ colors, data, columns, }: {
|
|
1
|
+
declare const Legend: ({ colors, data, columns, width, }: {
|
|
2
2
|
colors: string[];
|
|
3
3
|
data: (string | number)[];
|
|
4
|
-
|
|
5
|
-
}) => JSX.Element;
|
|
4
|
+
} & LegendType) => JSX.Element;
|
|
6
5
|
export default Legend;
|
|
6
|
+
declare type LegendType = {
|
|
7
|
+
columns?: number;
|
|
8
|
+
width?: string;
|
|
9
|
+
};
|
|
10
|
+
export type { LegendType };
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { PieSvgProps } from "@nivo/pie";
|
|
2
2
|
import { ChartTooltipFunction } from "../_types";
|
|
3
|
+
import { LegendType } from "../Legend";
|
|
3
4
|
declare type PieDatum = {
|
|
4
5
|
id: string;
|
|
5
6
|
label?: string;
|
|
@@ -20,8 +21,6 @@ export interface PieChartProps {
|
|
|
20
21
|
fontSizeMultiplier?: number;
|
|
21
22
|
};
|
|
22
23
|
tooltip?: ChartTooltipFunction;
|
|
23
|
-
legend?:
|
|
24
|
-
columns?: number;
|
|
25
|
-
} | true;
|
|
24
|
+
legend?: LegendType | true;
|
|
26
25
|
}
|
|
27
26
|
export {};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { SunburstSvgProps } from "@nivo/sunburst";
|
|
2
2
|
import { ChartTooltipFunction } from "../_types";
|
|
3
|
+
import { LegendType } from "../Legend";
|
|
3
4
|
export interface SunburstData {
|
|
4
5
|
name: string;
|
|
5
6
|
label?: string;
|
|
@@ -20,7 +21,5 @@ export interface SunburstChartProps {
|
|
|
20
21
|
};
|
|
21
22
|
onChange?: (data: SunburstData) => void;
|
|
22
23
|
tooltip?: ChartTooltipFunction;
|
|
23
|
-
legend?:
|
|
24
|
-
columns?: number;
|
|
25
|
-
} | true;
|
|
24
|
+
legend?: LegendType | true;
|
|
26
25
|
}
|
|
@@ -224,6 +224,12 @@ declare const theme: {
|
|
|
224
224
|
md: (color: string) => string;
|
|
225
225
|
lg: (offsetY: string, blurRadius: string, color: string) => string;
|
|
226
226
|
};
|
|
227
|
+
levels: {
|
|
228
|
+
back: number;
|
|
229
|
+
base: number;
|
|
230
|
+
front: number;
|
|
231
|
+
modal: number;
|
|
232
|
+
};
|
|
227
233
|
rtl: boolean;
|
|
228
234
|
document?: any;
|
|
229
235
|
borders: {
|