@appquality/unguess-design-system 2.12.41 → 2.12.42
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,16 @@
|
|
|
1
|
+
# v2.12.42 (Thu Dec 01 2022)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- Allow centering and resizing legend [#132](https://github.com/AppQuality/unguess-design-system/pull/132) ([@d-beezee](https://github.com/d-beezee))
|
|
6
|
+
- 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))
|
|
7
|
+
|
|
8
|
+
#### Authors: 1
|
|
9
|
+
|
|
10
|
+
- [@d-beezee](https://github.com/d-beezee)
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
1
14
|
# v2.12.41 (Thu Dec 01 2022)
|
|
2
15
|
|
|
3
16
|
#### 🐛 Bug Fix
|
package/build/index.js
CHANGED
|
@@ -1225,16 +1225,19 @@ var LegendItem = function (_a) {
|
|
|
1225
1225
|
var marginRight = theme.space.base * 2;
|
|
1226
1226
|
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
1227
|
};
|
|
1228
|
-
var LegendWrapper = styled__default["default"].div(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n width:
|
|
1228
|
+
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) {
|
|
1229
|
+
var width = _a.width;
|
|
1230
|
+
return width;
|
|
1231
|
+
}, function (_a) {
|
|
1229
1232
|
var columns = _a.columns;
|
|
1230
1233
|
return columns;
|
|
1231
1234
|
});
|
|
1232
1235
|
var Legend = function (_a) {
|
|
1233
|
-
var colors = _a.colors, data = _a.data, _b = _a.columns, columns = _b === void 0 ? 2 : _b;
|
|
1236
|
+
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
1237
|
var colorScheme = data.map(function (d, index) {
|
|
1235
1238
|
return { value: d, color: colors[index % colors.length] };
|
|
1236
1239
|
});
|
|
1237
|
-
return (jsxRuntime.jsx(LegendWrapper, __assign({ columns: columns }, { children: colorScheme.map(function (item) { return (jsxRuntime.jsx(LegendItem, __assign({}, item), item.value)); }) })));
|
|
1240
|
+
return (jsxRuntime.jsx(LegendWrapper, __assign({ columns: columns, width: width }, { children: colorScheme.map(function (item) { return (jsxRuntime.jsx(LegendItem, __assign({}, item), item.value)); }) })));
|
|
1238
1241
|
};
|
|
1239
1242
|
var templateObject_1$18, templateObject_2$t, templateObject_3$i, templateObject_4$e, templateObject_5$6;
|
|
1240
1243
|
|
|
@@ -1242,7 +1245,7 @@ var PieChart = function (_a) {
|
|
|
1242
1245
|
var _b;
|
|
1243
1246
|
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
1247
|
var themeContext = React.useContext(styled.ThemeContext);
|
|
1245
|
-
return (jsxRuntime.
|
|
1248
|
+
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
1249
|
? function (node) {
|
|
1247
1250
|
var data = node.datum.data;
|
|
1248
1251
|
var label = (data === null || data === void 0 ? void 0 : data.label) || data.id;
|
|
@@ -1257,7 +1260,11 @@ var PieChart = function (_a) {
|
|
|
1257
1260
|
? [
|
|
1258
1261
|
function (props) { return (jsxRuntime.jsx(CenteredItem, __assign({}, props, { theme: themeContext, label: centerItem.label, value: centerItem.value, fontSizeMultiplier: centerItem.fontSizeMultiplier }))); },
|
|
1259
1262
|
]
|
|
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"
|
|
1263
|
+
: []), 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
|
|
1264
|
+
? legend.columns
|
|
1265
|
+
: undefined, width: typeof legend === "object" && legend.width
|
|
1266
|
+
? legend.width
|
|
1267
|
+
: undefined })) : undefined }))] }));
|
|
1261
1268
|
};
|
|
1262
1269
|
|
|
1263
1270
|
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 +1367,51 @@ var SunburstChart = function (_a) {
|
|
|
1360
1367
|
};
|
|
1361
1368
|
if (!data.children)
|
|
1362
1369
|
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
|
-
|
|
1370
|
+
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
|
|
1371
|
+
? __assign(__assign({}, DEFAULT_CHARTS_THEME), { tooltip: __assign(__assign({}, DEFAULT_CHARTS_THEME.tooltip), { container: {
|
|
1372
|
+
padding: 0,
|
|
1373
|
+
} }) }) : DEFAULT_CHARTS_THEME, colors: currentColor
|
|
1374
|
+
? function () { return currentColor; }
|
|
1375
|
+
: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL_8_A, borderWidth: 4, cornerRadius: 3, onMouseEnter: function (node) {
|
|
1376
|
+
if (node.data.children) {
|
|
1377
|
+
setIsHovering(true);
|
|
1378
|
+
}
|
|
1379
|
+
}, onMouseLeave: function (node) {
|
|
1380
|
+
if (node.data.children) {
|
|
1381
|
+
setIsHovering(false);
|
|
1382
|
+
}
|
|
1383
|
+
}, tooltip: tooltip
|
|
1384
|
+
? function (node) { return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: tooltip({
|
|
1385
|
+
label: node.data.label || node.data.name,
|
|
1386
|
+
value: getChildrenValue(node.data),
|
|
1387
|
+
}) })); }
|
|
1388
|
+
: undefined, layers: __spreadArray(__spreadArray([
|
|
1389
|
+
"arcs"
|
|
1390
|
+
], (centerItem
|
|
1391
|
+
? [
|
|
1392
|
+
function (props) { return (jsxRuntime.jsx(CenteredItem, __assign({}, props, { fontSizeMultiplier: centerItem.fontSizeMultiplier, theme: themeContext, label: centerItem.label, value: centerItem.value }))); },
|
|
1393
|
+
]
|
|
1394
|
+
: []), true), (currentColor
|
|
1395
|
+
? [
|
|
1396
|
+
function (props) { return (jsxRuntime.jsx(ResetButton, { centerX: props.centerX, centerY: props.centerY, radius: props.radius, theme: themeContext, onClick: function () {
|
|
1397
|
+
changeDataSlice({
|
|
1398
|
+
data: data,
|
|
1399
|
+
});
|
|
1400
|
+
} })); },
|
|
1401
|
+
]
|
|
1402
|
+
: []), true), id: "name", value: "value", margin: __assign({ top: 40, bottom: 40 }, margin), data: currentData, childColor: { from: "color", modifiers: [["brighter", 0.5]] }, onClick: function (clickedData) {
|
|
1403
|
+
var foundObject = findChildrenByName(currentData, clickedData.id.toString());
|
|
1404
|
+
if (foundObject && foundObject.children) {
|
|
1405
|
+
changeDataSlice({
|
|
1406
|
+
data: foundObject,
|
|
1407
|
+
color: clickedData.color,
|
|
1408
|
+
});
|
|
1409
|
+
}
|
|
1410
|
+
} }) })), 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
|
|
1411
|
+
? legend.columns
|
|
1412
|
+
: undefined, width: typeof legend === "object" && legend.width
|
|
1413
|
+
? legend.width
|
|
1414
|
+
: undefined })) : undefined }))] }));
|
|
1404
1415
|
};
|
|
1405
1416
|
|
|
1406
1417
|
var CustomCell = function (_a) {
|
|
@@ -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
|
}
|