@appquality/unguess-design-system 2.12.30 → 2.12.32

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# 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
+
+- fix(bullet chart): tooltip & theme [#105](https://github.com/AppQuality/unguess-design-system/pull/105) ([@iacopolea](https://github.com/iacopolea) [@marcbon](https://github.com/marcbon))
+
+#### Authors: 2
+
+- Iacopo Leardini ([@iacopolea](https://github.com/iacopolea))
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
 # v2.12.30 (Tue Nov 15 2022)
 
 #### 🐛 Bug Fix

package/build/index.js

@@ -18,6 +18,7 @@ var reactLoaders = require('@zendeskgarden/react-loaders');
 var reactTypography = require('@zendeskgarden/react-typography');
 var bar = require('@nivo/bar');
 var bullet = require('@nivo/bullet');
+var web = require('@react-spring/web');
 var pie = require('@nivo/pie');
 var stream = require('@nivo/stream');
 var sunburst = require('@nivo/sunburst');
@@ -1124,34 +1125,39 @@ var BarChart = function (_a) {
     return (jsxRuntime.jsx(ChartContainer, __assign({ width: width, height: height }, { children: jsxRuntime.jsx(bar.ResponsiveBar, __assign({ theme: __assign(__assign({}, DEFAULT_CHARTS_THEME), theme), colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL_5, enableLabel: false }, props)) })));
 };
 
-var CustomBulletChartMarker = function (_a) {
-    var x = _a.x, y = _a.y, bulletRadius = _a.bulletRadius, fill = _a.fill, size = _a.size;
-    return (jsxRuntime.jsx("circle", { r: bulletRadius, fill: fill, transform: "translate(".concat(x, ",").concat(y, ") scale(").concat(size, ")") }));
+var CustomBulletChartMarkers = function (_a) {
+    var x = _a.x, y = _a.y, size = _a.size, _b = _a.animatedProps, color = _b.color, transform = _b.transform, data = _a.data, onMouseEnter = _a.onMouseEnter, onMouseMove = _a.onMouseMove, onMouseLeave = _a.onMouseLeave, onClick = _a.onClick;
+    return (jsxRuntime.jsx(web.animated.circle, { transform: transform, cx: x, cy: y, fill: color, stroke: color, r: size, 
+        // @ts-ignore onMouseMove event for circle is not supported, but it works
+        onMouseMove: function (event) { return onMouseMove(data, event); }, 
+        // @ts-ignore onMouseEnter event for circle is not supported, but it works
+        onMouseEnter: function (event) { return onMouseEnter(data, event); }, 
+        // @ts-ignore onMouseLeave event for circle is not supported, but it works
+        onMouseLeave: function (event) { return onMouseLeave(data, event); }, 
+        // @ts-ignore onClick event for circle is not supported, but it works
+        onClick: function (event) { return onClick(data, event); } }));
 };
 
-var CustomBulletChartRange = function (_a) {
-    var x = _a.x, y = _a.y, width = _a.width, height = _a.height, fill = _a.fill;
-    return (jsxRuntime.jsx("rect", { x: x, y: y, width: width - 2, height: height, fill: fill }));
+var CustomMeasure = function (_a) {
+    var x = _a.x, y = _a.y, width = _a.width, height = _a.height; _a.color;
+    return (jsxRuntime.jsx("rect", { x: x + 2, y: y + 2, width: width - 4, height: height - 4, fill: chartColors.darkGrey }));
 };
 
 var UgBulletChart = styled__default["default"](bullet.ResponsiveBullet)(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n"], ["\n  width: 100%;\n  height: 100%;\n"])));
 var BulletChart = function (_a) {
-    var width = _a.width, height = _a.height, ranges = _a.ranges, values = _a.values, markerColor = _a.markerColor, markerSize = _a.markerSize, rangeColor = _a.rangeColor, measureSize = _a.measureSize, measureColor = _a.measureColor, props = __rest(_a, ["width", "height", "ranges", "values", "markerColor", "markerSize", "rangeColor", "measureSize", "measureColor"]);
-    var rangesCount = ranges.length;
-    return (jsxRuntime.jsx(ChartContainer, __assign({ width: width, height: height }, { children: jsxRuntime.jsx(UgBulletChart, __assign({ data: [{
+    var width = _a.width, height = _a.height, ranges = _a.ranges, values = _a.values;
+    return (jsxRuntime.jsx(ChartContainer, __assign({ width: width, height: height, id: "ciolla" }, { children: jsxRuntime.jsx(UgBulletChart, { theme: DEFAULT_CHARTS_THEME, data: [
+                {
                     id: "",
                     title: "",
                     ranges: ranges,
                     measures: values,
                     markers: values,
-                }], measureColors: measureColor !== null && measureColor !== void 0 ? measureColor : chartColors.darkGrey, measureSize: measureSize !== null && measureSize !== void 0 ? measureSize : 0.2, markerComponent: function (_a) {
+                },
+            ], measureComponent: CustomMeasure, markerColors: chartColors.darkPine, markerComponent: function (_a) {
                 _a.size; var markerProps = __rest(_a, ["size"]);
-                return (jsxRuntime.jsx(CustomBulletChartMarker, __assign({ bulletRadius: 4, fill: markerColor !== null && markerColor !== void 0 ? markerColor : chartColors.darkPine, size: markerSize !== null && markerSize !== void 0 ? markerSize : 1 }, markerProps)));
-            }, rangeComponent: function (_a) {
-                var index = _a.index, width = _a.width, rangeProps = __rest(_a, ["index", "width"]);
-                var isLast = index === rangesCount - 1;
-                return (jsxRuntime.jsx(CustomBulletChartRange, __assign({ fill: rangeColor !== null && rangeColor !== void 0 ? rangeColor : chartColors.lightGrey }, rangeProps, { width: isLast ? width + 2 : width })));
-            }, margin: { top: 0, right: 10, bottom: -1, left: 10 } }, props)) })));
+                return (jsxRuntime.jsx(CustomBulletChartMarkers, __assign({}, markerProps, { size: 4 })));
+            }, rangeColors: chartColors.lightGrey, rangeBorderColor: "white", rangeBorderWidth: 2, margin: { top: 0, right: 10, bottom: -1, left: 10 } }) })));
 };
 var templateObject_1$15;
 
@@ -1173,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"
@@ -1253,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,
@@ -1265,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/bullet/CustomBulletChartMarker.d.ts

@@ -1,9 +1,2 @@
-interface CustomBulletChartMarkerProps {
-    x: number;
-    y: number;
-    bulletRadius: number;
-    fill: string;
-    size: number;
-}
-export declare const CustomBulletChartMarker: ({ x, y, bulletRadius, fill, size, }: CustomBulletChartMarkerProps) => JSX.Element;
-export {};
+import { BulletMarkersItemProps } from "@nivo/bullet";
+export declare const CustomBulletChartMarkers: ({ x, y, size, animatedProps: { color, transform }, data, onMouseEnter, onMouseMove, onMouseLeave, onClick, }: BulletMarkersItemProps) => JSX.Element;

package/build/stories/charts/bullet/CustomBulletChartMeasure.d.ts

@@ -0,0 +1,8 @@
+export interface CustomBulletChartMeasureProps {
+    x: number;
+    y: number;
+    color: string;
+    width: number;
+    height: number;
+}
+export declare const CustomMeasure: ({ x, y, width, height, color }: CustomBulletChartMeasureProps) => JSX.Element;

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

@@ -3,9 +3,4 @@ export interface BulletChartProps {
     values: number[];
     width?: string;
     height?: string;
-    markerColor?: string;
-    markerSize?: number;
-    rangeColor?: string;
-    measureSize?: number;
-    measureColor?: string;
 }

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

@@ -1,3 +1,3 @@
 import { BulletChartProps } from "./_types";
-declare const BulletChart: ({ width, height, ranges, values, markerColor, markerSize, rangeColor, measureSize, measureColor, ...props }: BulletChartProps) => JSX.Element;
+declare const BulletChart: ({ width, height, ranges, values }: BulletChartProps) => JSX.Element;
 export { BulletChart };

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

@@ -2,5 +2,5 @@ import { ComponentMeta, Story } from "@storybook/react";
 import { BulletChartProps } from "./_types";
 export declare const Default: Story<BulletChartProps>;
 export declare const Widget: Story<BulletChartProps>;
-declare const _default: ComponentMeta<({ width, height, ranges, values, markerColor, markerSize, rangeColor, measureSize, measureColor, ...props }: BulletChartProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ width, height, ranges, values }: BulletChartProps) => JSX.Element>;
 export default _default;

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.30",
+  "version": "2.12.32",
   "dependencies": {
     "@nivo/bar": "^0.80.0",
     "@nivo/bullet": "^0.80.0",

package/build/stories/charts/bullet/CustomBulletChartRange.d.ts

@@ -1,8 +0,0 @@
-export interface CustomBulletChartRangeProps {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    fill: string;
-}
-export declare const CustomBulletChartRange: ({ x, y, width, height, fill }: CustomBulletChartRangeProps) => JSX.Element;