@appquality/unguess-design-system 2.12.27 → 2.12.29

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# v2.12.29 (Tue Nov 15 2022)
+
+#### ⚠️ Pushed to `master`
+
+- fix(halfpie): Make toplevel component relative instead of absolute ([@d-beezee](https://github.com/d-beezee))
+
+#### Authors: 1
+
+- [@d-beezee](https://github.com/d-beezee)
+
+---
+
+# v2.12.28 (Tue Nov 15 2022)
+
+#### 🐛 Bug Fix
+
+- Waffle refactor [#104](https://github.com/AppQuality/unguess-design-system/pull/104) (gianpaolo.sinatra@app-quality.com [@marcbon](https://github.com/marcbon))
+
+#### Authors: 2
+
+- Gianpaolo Sinatra ([@sinatragianpaolo](https://github.com/sinatragianpaolo))
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
 # v2.12.22 (Mon Nov 14 2022)
 
 #### 🐛 Bug Fix

package/build/index.js

@@ -1088,6 +1088,10 @@ var chartColors = {
     orchidea: "#B75CAD",
     sky: "#3392CE",
 };
+var CHARTS_COLOR_SCHEME_MONO = [
+    chartColors.darkPine,
+    chartColors.lightGrey,
+];
 var CHARTS_COLOR_SCHEME_CATEGORICAL_5 = [
     chartColors.greenLight,
     chartColors.blue,
@@ -1212,7 +1216,7 @@ var HalfPieChart = function (_a) {
         return newColors;
     };
     var _b = React.useState(grayOutColors(0)), currentColors = _b[0], setCurrentColors = _b[1];
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(HalfPieChartComponent, { theme: theme, colors: currentColors, width: width, height: height, data: data, onMouseEnter: function (data) {
+    return (jsxRuntime.jsxs("div", __assign({ style: { width: width, height: height, position: "relative" } }, { children: [jsxRuntime.jsx(HalfPieChartComponent, { theme: theme, colors: currentColors, width: "100%", height: height, data: data, onMouseEnter: function (data) {
                     setCurrentColors(grayOutColors(data.arc.index));
                 }, onMouseLeave: function () {
                     setCurrentColors(grayOutColors(0));
@@ -1220,7 +1224,7 @@ var HalfPieChart = function (_a) {
                     setCurrentColors(grayOutColors(data.arc.index));
                 }, onMouseLeave: function () {
                     setCurrentColors(grayOutColors(0));
-                }, mode: "back" })] }));
+                }, mode: "back" })] })));
 };
 
 var StreamChart = function (_a) {
@@ -1249,10 +1253,24 @@ var CustomCell = function (_a) {
 };
 
 var WaffleChart = function (_a) {
-    var theme = _a.theme, colors = _a.colors, height = _a.height, width = _a.width, props = __rest(_a, ["theme", "colors", "height", "width"]);
-    return (jsxRuntime.jsx(ChartContainer, __assign({ width: width, height: height }, { children: jsxRuntime.jsx(waffle.ResponsiveWaffle, __assign({ theme: __assign(__assign({}, DEFAULT_CHARTS_THEME), theme), colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL_5, motionStiffness: 90, motionDamping: 11, 
+    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: [
+                {
+                    id: "green-circles",
+                    label: data.label,
+                    value: data.value,
+                },
+                {
+                    id: "grey-circles",
+                    label: total.label,
+                    value: total.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: CustomCell }, props)) })));
+            cellComponent: function (_a) {
+                _a.borderWidth; _a.borderColor; var rest = __rest(_a, ["borderWidth", "borderColor"]);
+                return (jsxRuntime.jsx(CustomCell, __assign({ borderWidth: 2, borderColor: "white" }, rest)));
+            } }) })));
 };
 
 var UgClose = styled__default["default"](reactNotifications.Close)(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: ", ";\n    height: ", ";\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: ", ";\n    height: ", ";\n"])), function (_a) {

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

@@ -1,6 +1,11 @@
-import { WaffleDatum, WaffleSvgProps } from "@nivo/waffle";
-export interface WaffleChartProps extends Omit<WaffleSvgProps, "width" | "height"> {
-    data: WaffleDatum[];
+interface WaffleDataItem {
+    label: string;
+    value: number;
+}
+export interface WaffleChartProps {
+    data: WaffleDataItem;
+    total: WaffleDataItem;
     width?: string;
     height?: string;
 }
+export {};

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

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

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

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

package/package.json

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