@appquality/unguess-design-system 2.12.45 → 2.12.47

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+# v2.12.47 (Wed Dec 07 2022)
+
+#### 🐛 Bug Fix
+
+- Allow custom label on pie [#144](https://github.com/AppQuality/unguess-design-system/pull/144) ([@d-beezee](https://github.com/d-beezee) [@cannarocks](https://github.com/cannarocks))
+- feat: Allow custom label for arclink and legend [#143](https://github.com/AppQuality/unguess-design-system/pull/143) ([@d-beezee](https://github.com/d-beezee))
+
+#### Authors: 2
+
+- [@d-beezee](https://github.com/d-beezee)
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
+# v2.12.46 (Tue Dec 06 2022)
+
+#### 🐛 Bug Fix
+
+- Revert bullet fix [#142](https://github.com/AppQuality/unguess-design-system/pull/142) ([@d-beezee](https://github.com/d-beezee) [@cannarocks](https://github.com/cannarocks))
+- revert: Remove resize from bullet chart [#141](https://github.com/AppQuality/unguess-design-system/pull/141) ([@d-beezee](https://github.com/d-beezee))
+
+#### Authors: 2
+
+- [@d-beezee](https://github.com/d-beezee)
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
 # v2.12.45 (Mon Dec 05 2022)
 
 #### 🐛 Bug Fix

package/build/index.js

@@ -1162,22 +1162,9 @@ 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;
-    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: [
+    return (jsxRuntime.jsx(ChartContainer, __assign({ width: width, height: height }, { children: jsxRuntime.jsx("div", __assign({ style: { width: "100%", height: height } }, { children: jsxRuntime.jsx(UgBulletChart, { theme: DEFAULT_CHARTS_THEME, data: [
                     {
                         id: "",
                         title: "",
@@ -1261,9 +1248,19 @@ 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, arcLinkLabelsSkipAngle = _a.arcLinkLabelsSkipAngle;
+    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, labelFormatter = _a.labelFormatter;
     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" }, arcLinkLabelsSkipAngle: arcLinkLabelsSkipAngle !== null && arcLinkLabelsSkipAngle !== void 0 ? arcLinkLabelsSkipAngle : 10, 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 labelFormatter
+                            ? labelFormatter({
+                                label: d.label,
+                                id: d.id,
+                                value: d.value,
+                                data: d.data,
+                                labelPosition: "arclink",
+                            })
+                            : (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;
@@ -1278,7 +1275,17 @@ var PieChart = function (_a) {
                         ? [
                             function (props) { return (jsxRuntime.jsx(CenteredItem, __assign({}, props, { theme: themeContext, label: centerItem.label, value: centerItem.value, fontSizeMultiplier: centerItem.fontSizeMultiplier }))); },
                         ]
-                        : []), 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
+                        : []), 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 labelFormatter
+                            ? labelFormatter({
+                                label: d.label,
+                                id: d.id,
+                                value: d.value,
+                                data: d,
+                                labelPosition: "legend",
+                            })
+                            : d.id.toString();
+                    }), columns: typeof legend === "object" && legend.columns
                         ? legend.columns
                         : undefined, width: typeof legend === "object" && legend.width
                         ? legend.width

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

@@ -1,6 +1,6 @@
 import React from "react";
 export declare type ChartTooltipFunction = ({ value, label, data, }: {
     value: number;
-    label: string;
+    label: string | number;
     data?: Record<string, string | number | undefined>;
 }) => React.ReactNode;

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

@@ -1,9 +1,14 @@
 import { PieSvgProps } from "@nivo/pie";
 import { ChartTooltipFunction } from "../_types";
 import { LegendType } from "../Legend";
+declare type BasicPieDatum = {
+    id: string | number;
+    label?: string | number;
+    value: number;
+};
 declare type PieDatum = {
-    id: string;
-    label?: string;
+    id: string | number;
+    label?: string | number;
     value: number;
 } & {
     [key: string]: string | number | undefined;
@@ -23,5 +28,9 @@ export interface PieChartProps {
     tooltip?: ChartTooltipFunction;
     legend?: LegendType | true;
     arcLinkLabelsSkipAngle?: number;
+    labelFormatter?: (data: BasicPieDatum & {
+        labelPosition: "arclink" | "legend";
+        data?: PieDatum;
+    }) => string;
 }
 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, arcLinkLabelsSkipAngle, }: PieChartProps) => JSX.Element;
+declare const PieChart: ({ theme, colors, width, height, data, centerItem, margin, tooltip, legend, arcLinkLabelsSkipAngle, labelFormatter, }: PieChartProps) => JSX.Element;
 export { PieChart };

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

@@ -2,5 +2,6 @@ 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, arcLinkLabelsSkipAngle, }: PieChartProps) => JSX.Element>;
+export declare const WithCustomLabel: Story<PieChartProps>;
+declare const _default: ComponentMeta<({ theme, colors, width, height, data, centerItem, margin, tooltip, legend, arcLinkLabelsSkipAngle, labelFormatter, }: PieChartProps) => JSX.Element>;
 export default _default;

package/package.json

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