@appquality/unguess-design-system 2.12.43 → 2.12.45

package/CHANGELOG.md

@@ -1,3 +1,33 @@
+# v2.12.45 (Mon Dec 05 2022)
+
+#### 🐛 Bug Fix
+
+- Change sunburst and pie cornerradius, expose skiparclabel and rerender bullet on resize [#140](https://github.com/AppQuality/unguess-design-system/pull/140) ([@d-beezee](https://github.com/d-beezee) [@marcbon](https://github.com/marcbon) [@iacopolea](https://github.com/iacopolea))
+- feat: Rerender bullet on resize to prevent invalid positioning [#139](https://github.com/AppQuality/unguess-design-system/pull/139) ([@d-beezee](https://github.com/d-beezee))
+- feat: Change pie and sunburst corner radius [#137](https://github.com/AppQuality/unguess-design-system/pull/137) ([@d-beezee](https://github.com/d-beezee))
+- feat(pie): add arcLinkLabelsSkipAngle props [#138](https://github.com/AppQuality/unguess-design-system/pull/138) ([@marcbon](https://github.com/marcbon))
+
+#### Authors: 3
+
+- [@d-beezee](https://github.com/d-beezee)
+- Iacopo Leardini ([@iacopolea](https://github.com/iacopolea))
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
+# v2.12.44 (Fri Dec 02 2022)
+
+#### 🐛 Bug Fix
+
+- Update sunburst [#136](https://github.com/AppQuality/unguess-design-system/pull/136) ([@d-beezee](https://github.com/d-beezee))
+- feat(sunburst): Allow passing custom data to tooltip [#135](https://github.com/AppQuality/unguess-design-system/pull/135) ([@d-beezee](https://github.com/d-beezee))
+
+#### Authors: 1
+
+- [@d-beezee](https://github.com/d-beezee)
+
+---
+
 # v2.12.43 (Fri Dec 02 2022)
 
 #### 🐛 Bug Fix

package/build/index.js

@@ -1162,20 +1162,33 @@ var CustomTooltip = function (_a) {
 };
 
 var UgBulletChart = styled__default["default"](bullet.ResponsiveBullet)(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n"], ["\n  width: 100%;\n  height: 100%;\n"])));
+var useResizeOfReference = function () {
+    var ref = React.createRef();
+    var _a = React.useState({ width: 0 }), setDimensions = _a[1];
+    React.useEffect(function () {
+        if (ref.current) {
+            setDimensions({
+                width: ref.current.clientWidth,
+            });
+        }
+    }, [ref]);
+    return { ref: ref };
+};
 var BulletChart = function (_a) {
     var width = _a.width, height = _a.height, ranges = _a.ranges, values = _a.values;
-    return (jsxRuntime.jsx(ChartContainer, __assign({ width: width, height: height }, { children: jsxRuntime.jsx(UgBulletChart, { theme: DEFAULT_CHARTS_THEME, data: [
-                {
-                    id: "",
-                    title: "",
-                    ranges: ranges,
-                    measures: values,
-                    markers: values,
-                },
-            ], animate: false, measureComponent: CustomMeasure, markerColors: CHARTS_COLOR_PALETTE.darkPine, markerComponent: function (_a) {
-                _a.size; var markerProps = __rest(_a, ["size"]);
-                return (jsxRuntime.jsx(CustomBulletChartMarkers, __assign({}, markerProps, { size: 4 })));
-            }, tooltip: CustomTooltip, rangeColors: CHARTS_COLOR_PALETTE.lightGrey, rangeBorderColor: "white", rangeBorderWidth: 2, margin: { top: 0, right: 5, bottom: -1, left: 0 } }) })));
+    var ref = useResizeOfReference().ref;
+    return (jsxRuntime.jsx(ChartContainer, __assign({ width: width, height: height }, { children: jsxRuntime.jsx("div", __assign({ style: { width: "100%", height: height }, ref: ref }, { children: jsxRuntime.jsx(UgBulletChart, { theme: DEFAULT_CHARTS_THEME, data: [
+                    {
+                        id: "",
+                        title: "",
+                        ranges: ranges,
+                        measures: values,
+                        markers: values,
+                    },
+                ], animate: false, measureComponent: CustomMeasure, markerColors: CHARTS_COLOR_PALETTE.darkPine, markerComponent: function (_a) {
+                    _a.size; var markerProps = __rest(_a, ["size"]);
+                    return (jsxRuntime.jsx(CustomBulletChartMarkers, __assign({}, markerProps, { size: 4 })));
+                }, tooltip: CustomTooltip, rangeColors: CHARTS_COLOR_PALETTE.lightGrey, rangeBorderColor: "white", rangeBorderWidth: 2, margin: { top: 0, right: 5, bottom: -1, left: 0 } }) })) })));
 };
 var templateObject_1$19;
 
@@ -1248,16 +1261,16 @@ var templateObject_1$18, templateObject_2$t, templateObject_3$i, templateObject_
 
 var PieChart = function (_a) {
     var _b;
-    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;
+    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, arcLinkLabelsSkipAngle = _a.arcLinkLabelsSkipAngle;
     var themeContext = React.useContext(styled.ThemeContext);
-    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
+    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" }, arcLinkLabelsSkipAngle: arcLinkLabelsSkipAngle !== null && arcLinkLabelsSkipAngle !== void 0 ? arcLinkLabelsSkipAngle : 10, padAngle: 2, data: data, margin: __assign({ top: 40, bottom: 40 }, margin), tooltip: tooltip
                         ? function (node) {
                             var data = node.datum.data;
                             var label = (data === null || data === void 0 ? void 0 : data.label) || data.id;
                             var value = data.value;
                             return jsxRuntime.jsx(jsxRuntime.Fragment, { children: tooltip({ label: label, value: value, data: data }) });
                         }
-                        : undefined, cornerRadius: 3, innerRadius: 0.8, arcLinkLabelsThickness: 2, layers: __spreadArray([
+                        : undefined, cornerRadius: 2, innerRadius: 0.8, arcLinkLabelsThickness: 2, layers: __spreadArray([
                         "arcs",
                         "arcLabels",
                         "arcLinkLabels"
@@ -1367,9 +1380,11 @@ var SunburstChart = function (_a) {
         var data = _a.data, color = _a.color;
         setCurrentData(data);
         setCurrentColor(color);
+    };
+    React.useEffect(function () {
         if (onChange)
             onChange(currentData);
-    };
+    }, [currentData]);
     if (!data.children)
         return jsxRuntime.jsx(jsxRuntime.Fragment, { children: "No data" });
     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
@@ -1377,7 +1392,7 @@ var SunburstChart = function (_a) {
                                     padding: 0,
                                 } }) }) : DEFAULT_CHARTS_THEME, colors: currentColor
                         ? function () { return currentColor; }
-                        : colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL_8_A, borderWidth: 4, cornerRadius: 3, onMouseEnter: function (node) {
+                        : colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL_8_A, borderWidth: 4, cornerRadius: 4, onMouseEnter: function (node) {
                         if (node.data.children) {
                             setIsHovering(true);
                         }
@@ -1389,6 +1404,7 @@ var SunburstChart = function (_a) {
                         ? function (node) { return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: tooltip({
                                 label: node.data.label || node.data.name,
                                 value: getChildrenValue(node.data),
+                                data: __assign(__assign({}, node.data), { children: undefined }),
                             }) })); }
                         : undefined, layers: __spreadArray(__spreadArray([
                         "arcs"
@@ -1412,7 +1428,7 @@ var SunburstChart = function (_a) {
                                 color: clickedData.color,
                             });
                         }
-                    } }) })), 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
+                    } }) })), 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.label || d.name; }), columns: typeof legend === "object" && legend.columns
                         ? legend.columns
                         : undefined, width: typeof legend === "object" && legend.width
                         ? legend.width

package/build/stories/charts/pie/_types.d.ts

@@ -22,5 +22,6 @@ export interface PieChartProps {
     };
     tooltip?: ChartTooltipFunction;
     legend?: LegendType | true;
+    arcLinkLabelsSkipAngle?: number;
 }
 export {};

package/build/stories/charts/pie/index.d.ts

@@ -1,3 +1,3 @@
 import { PieChartProps } from "./_types";
-declare const PieChart: ({ theme, colors, width, height, data, centerItem, margin, tooltip, legend, }: PieChartProps) => JSX.Element;
+declare const PieChart: ({ theme, colors, width, height, data, centerItem, margin, tooltip, legend, arcLinkLabelsSkipAngle, }: PieChartProps) => JSX.Element;
 export { PieChart };

package/build/stories/charts/pie/index.stories.d.ts

@@ -2,5 +2,5 @@ import { ComponentMeta, Story } from "@storybook/react";
 import { PieChartProps } from "./_types";
 export declare const Default: Story<PieChartProps>;
 export declare const WithCustomTooltip: Story<PieChartProps>;
-declare const _default: ComponentMeta<({ theme, colors, width, height, data, centerItem, margin, tooltip, legend, }: PieChartProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ theme, colors, width, height, data, centerItem, margin, tooltip, legend, arcLinkLabelsSkipAngle, }: PieChartProps) => JSX.Element>;
 export default _default;

package/build/stories/charts/sunburst/_types.d.ts

@@ -6,6 +6,7 @@ export interface SunburstData {
     label?: string;
     children?: SunburstData[];
     value?: number;
+    [key: string]: SunburstData[keyof SunburstData] | string | number | boolean;
 }
 export interface SunburstChartProps {
     data: SunburstData;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "2.12.43",
+  "version": "2.12.45",
   "dependencies": {
     "@nivo/bar": "^0.80.0",
     "@nivo/bullet": "^0.80.0",