@appquality/unguess-design-system 2.12.31 → 2.12.32

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v2.12.32 (Wed Nov 16 2022)
+
+#### 🐛 Bug Fix
+
+- Add custom tooltip to waffle and fix pie padangle [#107](https://github.com/AppQuality/unguess-design-system/pull/107) ([@d-beezee](https://github.com/d-beezee))
+
+#### Authors: 1
+
+- [@d-beezee](https://github.com/d-beezee)
+
+---
+
 # v2.12.31 (Tue Nov 15 2022)
 
 #### 🐛 Bug Fix

package/build/index.js

@@ -1179,7 +1179,7 @@ var CenteredItem = function (_a) {
 var PieChart = function (_a) {
     var theme = _a.theme, colors = _a.colors, width = _a.width, height = _a.height, data = _a.data, centerItem = _a.centerItem, margin = _a.margin;
     var themeContext = React.useContext(styled.ThemeContext);
-    return (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(ChartContainer, __assign({ width: width, height: height }, { children: jsxRuntime.jsx(pie.ResponsivePie, { theme: __assign(__assign({}, DEFAULT_CHARTS_THEME), theme), colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL_8_A, enableArcLabels: false, arcLinkLabelsColor: { from: "color" }, padAngle: 1, data: data, margin: __assign({ top: 40, bottom: 40 }, margin), innerRadius: 0.8, arcLinkLabelsThickness: 2, arcLinkLabelsTextColor: themeContext.palette.grey[600], layers: __spreadArray([
+    return (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(ChartContainer, __assign({ width: width, height: height }, { children: jsxRuntime.jsx(pie.ResponsivePie, { theme: __assign(__assign({}, DEFAULT_CHARTS_THEME), theme), 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), innerRadius: 0.8, arcLinkLabelsThickness: 2, arcLinkLabelsTextColor: themeContext.palette.grey[600], layers: __spreadArray([
                     "arcs",
                     "arcLabels",
                     "arcLinkLabels"
@@ -1259,8 +1259,11 @@ var CustomCell = function (_a) {
 };
 
 var WaffleChart = function (_a) {
-    var height = _a.height, width = _a.width, data = _a.data, total = _a.total;
-    return (jsxRuntime.jsx(ChartContainer, __assign({ width: width, height: height }, { children: jsxRuntime.jsx(waffle.ResponsiveWaffle, { theme: DEFAULT_CHARTS_THEME, data: [
+    var height = _a.height, width = _a.width, data = _a.data, total = _a.total, tooltip = _a.tooltip;
+    return (jsxRuntime.jsx(ChartContainer, __assign({ width: width, height: height }, { children: jsxRuntime.jsx(waffle.ResponsiveWaffle, { theme: tooltip
+                ? __assign(__assign({}, DEFAULT_CHARTS_THEME), { tooltip: __assign(__assign({}, tooltip), { container: {
+                            padding: 0,
+                        } }) }) : DEFAULT_CHARTS_THEME, data: [
                 {
                     id: "green-circles",
                     label: data.label,
@@ -1271,7 +1274,10 @@ var WaffleChart = function (_a) {
                     label: total.label,
                     value: total.value,
                 },
-            ], fillDirection: "bottom", total: total.value, rows: 8, columns: 8, colors: CHARTS_COLOR_SCHEME_MONO, 
+            ], tooltip: function (_a) {
+                var value = _a.value, label = _a.label;
+                return tooltip ? tooltip({ label: label, value: value }) : jsxRuntime.jsx(jsxRuntime.Fragment, { children: "".concat(label, ": ").concat(value) });
+            }, fillDirection: "bottom", total: total.value, rows: 8, columns: 8, colors: CHARTS_COLOR_SCHEME_MONO, 
             // @ts-ignore property cellComponent does not exist, but it does
             cellComponent: function (_a) {
                 _a.borderWidth; _a.borderColor; var rest = __rest(_a, ["borderWidth", "borderColor"]);

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

@@ -0,0 +1,5 @@
+import React from "react";
+export declare type ChartTooltipFunction = ({ value, label, }: {
+    value: number;
+    label: string;
+}) => React.ReactNode;

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

@@ -1,3 +1,4 @@
+import { ChartTooltipFunction } from "../_types";
 interface WaffleDataItem {
     label: string;
     value: number;
@@ -7,5 +8,6 @@ export interface WaffleChartProps {
     total: WaffleDataItem;
     width?: string;
     height?: string;
+    tooltip?: ChartTooltipFunction;
 }
 export {};

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

@@ -1,3 +1,3 @@
 import { WaffleChartProps } from "./_types";
-declare const WaffleChart: ({ height, width, data, total }: WaffleChartProps) => JSX.Element;
+declare const WaffleChart: ({ height, width, data, total, tooltip, }: WaffleChartProps) => JSX.Element;
 export { WaffleChart };

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

@@ -1,5 +1,6 @@
 import { ComponentMeta, Story } from "@storybook/react";
 import { WaffleChartProps } from "./_types";
 export declare const Default: Story<WaffleChartProps>;
-declare const _default: ComponentMeta<({ height, width, data, total }: WaffleChartProps) => JSX.Element>;
+export declare const WithCustomTooltip: Story<WaffleChartProps>;
+declare const _default: ComponentMeta<({ height, width, data, total, tooltip, }: WaffleChartProps) => JSX.Element>;
 export default _default;

package/package.json

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