@kubit-ui-web/react-charts 1.11.2 → 1.11.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @kubit-ui-web/react-charts
 
+## 1.11.3
+
+### Patch Changes
+
+- PieChart disappearing on resize when halfChart=true
+
+  PR: #22
+
 ## 1.11.2
 
 ### Patch Changes

package/dist/cjs/charts/pieChart/fragments/pieChartPath.js

@@ -1 +1 @@
-const e=require(`../../../utils/parseStringToNumberPx.ts/parseStringToNumberPx.js`),t=require(`../../../utils/buildErrors/charts/buildPieChartErrors.js`),n=require(`../context/pieChartContext.js`),r=require(`../utils/accessibility.js`),i=require(`./pieChartSegment.js`);let a=require(`react`),o=require(`react/jsx-runtime`);exports.PieChartPath=({ariaLabel:s,"aria-label":c,dataKey:l,fill:u,gap:d,innerRadius:f,radius:p,...m})=>{let h=String(l),{addError:g,canvasHeight:_,canvasWidth:v,data:y,dataTestId:b,halfChart:x}=(0,a.useContext)(n.PieChartContext),S=(0,a.useRef)(x?0:-Math.PI/2),C=y[h],w=Object.prototype.hasOwnProperty.call(y,h);(0,a.useEffect)(()=>{if(!w){g?.(`PIE_CHART_PATH_ERROR`,{error:t.buildPieDataKeyNotFoundError(h)});return}if(!C||C.length===0){g?.(`PIE_CHART_PATH_ERROR`,{error:t.buildEmptyDataArrayError(h)});return}let e=C.reduce((e,t)=>e+t.value,0);(e<=0||isNaN(e))&&g?.(`PIE_CHART_PATH_ERROR`,{error:t.buildInvalidTotalError(h,e)})},[C,w,h]);let T=y[h]?.reduce((e,t)=>e+t.value,0),E=y[h]?.length===1,D=f?e.parseStringToNumberPx(f):void 0,O=p?e.parseStringToNumberPx(p):void 0;return y[h]?.length?(0,o.jsx)(`g`,{children:y[h].map((e,t)=>(0,a.createElement)(i.PieChartSegment,{...m,...e,key:`${t.toString()}`,ariaLabel:r.buildAriaLabel({ariaLabel:c||s,dataKey:h,index:t,groupName:e.name,groupValue:e.value}),canvasHeight:_,canvasWidth:v,color:e.color||u,dataKey:h,dataTestId:`${b}path-${t}`,gap:d,halfChart:x,index:t,innerRadius:D,radius:O,singleStroke:E,startAngle:S,total:T}))}):(0,o.jsx)(o.Fragment,{})};
+const e=require(`../../../utils/parseStringToNumberPx.ts/parseStringToNumberPx.js`),t=require(`../../../utils/buildErrors/charts/buildPieChartErrors.js`),n=require(`../context/pieChartContext.js`),r=require(`../utils/accessibility.js`),i=require(`./pieChartSegment.js`);let a=require(`react`),o=require(`react/jsx-runtime`);exports.PieChartPath=({ariaLabel:s,"aria-label":c,dataKey:l,fill:u,gap:d,innerRadius:f,radius:p,...m})=>{let h=String(l),{addError:g,canvasHeight:_,canvasWidth:v,data:y,dataTestId:b,halfChart:x}=(0,a.useContext)(n.PieChartContext),S=x?0:-Math.PI/2,C=(0,a.useRef)(S),w=y[h],T=Object.prototype.hasOwnProperty.call(y,h);(0,a.useEffect)(()=>{if(!T){g?.(`PIE_CHART_PATH_ERROR`,{error:t.buildPieDataKeyNotFoundError(h)});return}if(!w||w.length===0){g?.(`PIE_CHART_PATH_ERROR`,{error:t.buildEmptyDataArrayError(h)});return}let e=w.reduce((e,t)=>e+t.value,0);(e<=0||isNaN(e))&&g?.(`PIE_CHART_PATH_ERROR`,{error:t.buildInvalidTotalError(h,e)})},[w,T,h]);let E=y[h]?.reduce((e,t)=>e+t.value,0),D=y[h]?.length===1,O=f?e.parseStringToNumberPx(f):void 0,k=p?e.parseStringToNumberPx(p):void 0;return C.current=S,y[h]?.length?(0,o.jsx)(`g`,{children:y[h].map((e,t)=>(0,a.createElement)(i.PieChartSegment,{...m,...e,key:`${t.toString()}`,ariaLabel:r.buildAriaLabel({ariaLabel:c||s,dataKey:h,index:t,groupName:e.name,groupValue:e.value}),canvasHeight:_,canvasWidth:v,color:e.color||u,dataKey:h,dataTestId:`${b}path-${t}`,gap:d,halfChart:x,index:t,innerRadius:O,radius:k,singleStroke:D,startAngle:C,total:E}))}):(0,o.jsx)(o.Fragment,{})};

package/dist/cjs/hooks/useResponsiveCanvas/useResponsiveCanvas.js

@@ -1 +1 @@
-const e=require(`../../components/svgContainer/utils/buildViewBox/buildViewBox.js`),t=require(`../../utils/ssr/ssr.js`),n=require(`../../utils/getCanvasDimensions/getCanvasDimensions.js`),r=require(`../../utils/parseStringToNumberPx.ts/parseStringToNumberPx.js`);let i=require(`react`);exports.useResponsiveCanvas=({canvasConfig:a,dataTestId:o,extraSpace:s=0,height:c,width:l})=>{let[u,d]=(0,i.useState)({height:0,width:0}),{extraSpace:f,height:p,width:m}=(0,i.useMemo)(()=>a||{extraSpace:s,height:c,width:l},[a,l,c,s]),h=f?r.parseStringToNumberPx(f):void 0;return(0,i.useEffect)(()=>{if(!t.isBrowser())return;let e=t.safeQuerySelector(`[data-testid="${o}"]`);if(!e)return;let r=()=>{let{parsedCanvasHeight:t,parsedCanvasWidth:r}=n.getCanvasDimensions({canvasHeight:p,canvasWidth:m,svgElement:e});d({height:t,width:r})};r();let i=new ResizeObserver(()=>{r()});return i.observe(e),()=>{i.disconnect()}},[m,p,o]),{parsedCanvas:u,parsedCanvasExtraSpace:h,viewBox:(0,i.useMemo)(()=>e.buildViewBox(u.width,u.height,h),[u.width,u.height,h])}};
+const e=require(`../../components/svgContainer/utils/buildViewBox/buildViewBox.js`),t=require(`../../utils/ssr/ssr.js`),n=require(`../../utils/getCanvasDimensions/getCanvasDimensions.js`),r=require(`../../utils/parseStringToNumberPx.ts/parseStringToNumberPx.js`);let i=require(`react`);exports.useResponsiveCanvas=({canvasConfig:a,dataTestId:o,extraSpace:s=0,height:c,width:l})=>{let[u,d]=(0,i.useState)({height:0,width:0}),{extraSpace:f,height:p,width:m}=(0,i.useMemo)(()=>a||{extraSpace:s,height:c,width:l},[a,l,c,s]),h=f?r.parseStringToNumberPx(f):void 0;return(0,i.useEffect)(()=>{if(!t.isBrowser())return;let e=t.safeQuerySelector(`[data-testid="${o}"]`);if(!e)return;let r=()=>{let{parsedCanvasHeight:t,parsedCanvasWidth:r}=n.getCanvasDimensions({canvasHeight:p,canvasWidth:m,svgElement:e});d(e=>e.height===t&&e.width===r?e:{height:t,width:r})};r();let i=new ResizeObserver(()=>{r()});return i.observe(e),()=>{i.disconnect()}},[m,p,o]),{parsedCanvas:u,parsedCanvasExtraSpace:h,viewBox:(0,i.useMemo)(()=>e.buildViewBox(u.width,u.height,h),[u.width,u.height,h])}};

package/dist/esm/charts/pieChart/fragments/pieChartPath.js

@@ -6,25 +6,25 @@ import { PieChartSegment } from "./pieChartSegment.js";
 import { createElement, useContext, useEffect, useRef } from "react";
 import { Fragment, jsx } from "react/jsx-runtime";
 const PieChartPath = ({ ariaLabel: n, "aria-label": r, dataKey: i, fill: a, gap: o, innerRadius: s, radius: c, ...l }) => {
-	let u = String(i), { addError: d, canvasHeight: f, canvasWidth: p, data: m, dataTestId: h, halfChart: g } = useContext(PieChartContext), _ = useRef(g ? 0 : -Math.PI / 2), v = m[u], y = Object.prototype.hasOwnProperty.call(m, u);
+	let u = String(i), { addError: d, canvasHeight: f, canvasWidth: p, data: m, dataTestId: h, halfChart: g } = useContext(PieChartContext), _ = g ? 0 : -Math.PI / 2, v = useRef(_), y = m[u], b = Object.prototype.hasOwnProperty.call(m, u);
 	useEffect(() => {
-		if (!y) {
+		if (!b) {
 			d?.("PIE_CHART_PATH_ERROR", { error: buildPieDataKeyNotFoundError(u) });
 			return;
 		}
-		if (!v || v.length === 0) {
+		if (!y || y.length === 0) {
 			d?.("PIE_CHART_PATH_ERROR", { error: buildEmptyDataArrayError(u) });
 			return;
 		}
-		let e = v.reduce((e, t) => e + t.value, 0);
+		let e = y.reduce((e, t) => e + t.value, 0);
 		(e <= 0 || isNaN(e)) && d?.("PIE_CHART_PATH_ERROR", { error: buildInvalidTotalError(u, e) });
 	}, [
-		v,
 		y,
+		b,
 		u
 	]);
-	let b = m[u]?.reduce((e, t) => e + t.value, 0), x = m[u]?.length === 1, S = s ? parseStringToNumberPx(s) : void 0, C = c ? parseStringToNumberPx(c) : void 0;
-	return m[u]?.length ? /* @__PURE__ */ jsx("g", { children: m[u].map((e, t) => /* @__PURE__ */ createElement(PieChartSegment, {
+	let x = m[u]?.reduce((e, t) => e + t.value, 0), S = m[u]?.length === 1, C = s ? parseStringToNumberPx(s) : void 0, w = c ? parseStringToNumberPx(c) : void 0;
+	return v.current = _, m[u]?.length ? /* @__PURE__ */ jsx("g", { children: m[u].map((e, t) => /* @__PURE__ */ createElement(PieChartSegment, {
 		...l,
 		...e,
 		key: `${t.toString()}`,
@@ -43,11 +43,11 @@ const PieChartPath = ({ ariaLabel: n, "aria-label": r, dataKey: i, fill: a, gap:
 		gap: o,
 		halfChart: g,
 		index: t,
-		innerRadius: S,
-		radius: C,
-		singleStroke: x,
-		startAngle: _,
-		total: b
+		innerRadius: C,
+		radius: w,
+		singleStroke: S,
+		startAngle: v,
+		total: x
 	})) }) : /* @__PURE__ */ jsx(Fragment, {});
 };
 export { PieChartPath };

package/dist/esm/hooks/useResponsiveCanvas/useResponsiveCanvas.js

@@ -27,7 +27,7 @@ const useResponsiveCanvas = ({ canvasConfig: a, dataTestId: o, extraSpace: s = 0
 				canvasWidth: m,
 				svgElement: e
 			});
-			d({
+			d((e) => e.height === t && e.width === n ? e : {
 				height: t,
 				width: n
 			});

package/dist/types/charts/pieChart/fragments/pieChartPath.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pieChartPath.d.ts","sourceRoot":"","sources":["../../../../../src/charts/pieChart/fragments/pieChartPath.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAoD,MAAM,OAAO,CAAC;AAElF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAY9D;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,SAAS,CAqFtC,CAAC"}
+{"version":3,"file":"pieChartPath.d.ts","sourceRoot":"","sources":["../../../../../src/charts/pieChart/fragments/pieChartPath.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAoD,MAAM,OAAO,CAAC;AAElF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAY9D;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,SAAS,CAyFtC,CAAC"}

package/dist/types/hooks/useResponsiveCanvas/useResponsiveCanvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useResponsiveCanvas.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useResponsiveCanvas/useResponsiveCanvas.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAKxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AAEH,UAAU,yBAAyB;IACjC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC9B;AAED,UAAU,yBAAyB;IACjC,yCAAyC;IACzC,YAAY,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAChD,yBAAyB;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,8CAA8C;IAC9C,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,eAAO,MAAM,mBAAmB,GAAI,0DAMjC,yBAAyB,KAAG,yBA+F9B,CAAC"}
+{"version":3,"file":"useResponsiveCanvas.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useResponsiveCanvas/useResponsiveCanvas.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAKxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AAEH,UAAU,yBAAyB;IACjC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC9B;AAED,UAAU,yBAAyB;IACjC,yCAAyC;IACzC,YAAY,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAChD,yBAAyB;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,8CAA8C;IAC9C,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,eAAO,MAAM,mBAAmB,GAAI,0DAMjC,yBAAyB,KAAG,yBAkG9B,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kubit-ui-web/react-charts",
   "private": false,
-  "version": "1.11.2",
+  "version": "1.11.3",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",