rte-utils 1.2.1 → 1.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.esm.js +1 -1
  2. package/dist/index.esm.js.map +1 -1
  3. package/dist/index.js +1 -1
  4. package/dist/index.js.map +1 -1
  5. package/package.json +1 -1
package/dist/index.esm.js CHANGED
@@ -1,2 +1,2 @@
1
- import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useState as a,useRef as r,useEffect as i}from"react";var n=function(n){var c=n.max,o=n.relative,l=n.barHeight,h=void 0===l?103:l,u=n.barWidth,m=void 0===u?32:u,v=n.children,s=a(0),d=s[0],g=s[1],w=a(!1),x=w[0],f=w[1],p=r(null),M=r(!0),N=Math.min(o.value/c.value*100,100),q=h,A=x?d:N/100*h;return i(function(){var e=Math.min(o.value/c.value*100,100)/100*h;if(M.current){M.current=!1,f(!0),g(0),p.current=o.value;var t=Date.now(),a=function(){var r=Date.now()-t,i=Math.min(r/1e3,1),n=1-Math.pow(1-i,4);g(e*n),i<1?requestAnimationFrame(a):f(!1)};requestAnimationFrame(a)}else{if(null!==p.current&&p.current!==o.value){var r=Math.min(p.current/c.value*100,100)/100*h;f(!0),g(r);var i=Date.now(),n=function(){var t=Date.now()-i,a=Math.min(t/2e3,1),c=1-Math.pow(1-a,4);g(r+(e-r)*c),a<1?requestAnimationFrame(n):f(!1)};requestAnimationFrame(n)}else null===p.current&&g(e);p.current=o.value}},[o.value,c.value,h]),e("div",{className:"histogram-container",children:t("div",{className:"histogram-content",children:[e("div",{className:"histogram-bar",style:{height:"".concat(h,"px"),width:"".concat(m,"px")},children:t("svg",{width:m,height:h,viewBox:"0 0 ".concat(m," ").concat(h),className:"histogram-svg",children:[e("rect",{x:"0",y:h-q,width:m,height:q,fill:c.color,rx:"2"}),e("rect",{x:"0",y:h-A,width:m,height:A,fill:o.color,rx:"2"})]})}),v&&e("div",{className:"histogram-text-container",children:v})]})})};export{n as Histogram};
1
+ import{jsx as t,jsxs as i}from"react/jsx-runtime";import{useState as a,useEffect as e}from"react";var r=function(r){var n=r.max,o=r.relative,c=r.barHeight,h=void 0===c?103:c,m=r.barWidth,l=void 0===m?32:m,s=r.children,d=a(0),v=d[0],g=d[1],x=Math.min(o.value/n.value*100,100)/100*h;return e(function(){g(0);var t=Date.now(),i=function(){var a=Date.now()-t,e=Math.min(a/1e3,1),r=1-Math.pow(1-e,4);g(x*r),e<1&&requestAnimationFrame(i)};requestAnimationFrame(i)},[x]),t("div",{className:"histogram-container",children:i("div",{className:"histogram-content",children:[t("div",{className:"histogram-bar",style:{height:"".concat(h,"px"),width:"".concat(l,"px")},children:i("svg",{width:l,height:h,viewBox:"0 0 ".concat(l," ").concat(h),className:"histogram-svg",children:[t("rect",{x:"0",y:"0",width:l,height:h,fill:n.color,rx:"2"}),t("rect",{x:"0",y:h-v,width:l,height:v,fill:o.color,rx:"2"})]})}),s&&t("div",{className:"histogram-text-container",children:s})]})})};export{r as Histogram};
2
2
  //# sourceMappingURL=index.esm.js.map
package/dist/index.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.esm.js","sources":["../src/components/Histogram.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from \"react\";\nimport \"./Histogram.css\";\n\ninterface HistogramProps {\n /** Maximum value configuration with value and color */\n max: {\n value: number;\n color: string;\n };\n /** Relative/current value configuration with value and color */\n relative: {\n value: number;\n color: string;\n };\n /** Height of the histogram bar in pixels */\n barHeight?: number;\n /** Width of the histogram bar in pixels */\n barWidth?: number;\n /** Child components (typically text content) */\n children?: React.ReactNode;\n}\n\nexport const Histogram: React.FC<HistogramProps> = ({\n max,\n relative,\n barHeight = 103,\n barWidth = 32,\n children,\n}) => {\n // Animation state\n const [animatedHeight, setAnimatedHeight] = useState(0);\n const [isAnimating, setIsAnimating] = useState(false);\n const previousValueRef = useRef<number | null>(null);\n const isInitialMount = useRef(true);\n\n // Calculate the height percentages for the two bars\n const relativePercentage = Math.min((relative.value / max.value) * 100, 100);\n\n // Calculate actual heights in pixels\n const maxBarHeight = barHeight;\n const targetRelativeBarHeight = (relativePercentage / 100) * barHeight;\n const currentRelativeBarHeight = isAnimating\n ? animatedHeight\n : targetRelativeBarHeight;\n\n // Animation effect\n useEffect(() => {\n const targetHeight =\n (Math.min((relative.value / max.value) * 100, 100) / 100) * barHeight;\n\n // On initial mount, start from 0\n if (isInitialMount.current) {\n isInitialMount.current = false;\n setIsAnimating(true);\n setAnimatedHeight(0);\n previousValueRef.current = relative.value;\n\n const startTime = Date.now();\n const duration = 1000; // 2 seconds\n\n const animate = () => {\n const elapsed = Date.now() - startTime;\n const progress = Math.min(elapsed / duration, 1);\n\n // Chart.js-like easing function (easeOutQuart)\n const easeOutQuart = 1 - Math.pow(1 - progress, 4);\n\n const currentHeight = targetHeight * easeOutQuart;\n setAnimatedHeight(currentHeight);\n\n if (progress < 1) {\n requestAnimationFrame(animate);\n } else {\n setIsAnimating(false);\n }\n };\n\n requestAnimationFrame(animate);\n return;\n }\n\n // For subsequent updates, animate from previous value to new value\n if (\n previousValueRef.current !== null &&\n previousValueRef.current !== relative.value\n ) {\n const previousHeight =\n (Math.min((previousValueRef.current / max.value) * 100, 100) / 100) *\n barHeight;\n setIsAnimating(true);\n setAnimatedHeight(previousHeight);\n\n const startTime = Date.now();\n const duration = 2000; // 2 seconds\n\n const animate = () => {\n const elapsed = Date.now() - startTime;\n const progress = Math.min(elapsed / duration, 1);\n\n // Chart.js-like easing function (easeOutQuart)\n const easeOutQuart = 1 - Math.pow(1 - progress, 4);\n\n const currentHeight =\n previousHeight + (targetHeight - previousHeight) * easeOutQuart;\n setAnimatedHeight(currentHeight);\n\n if (progress < 1) {\n requestAnimationFrame(animate);\n } else {\n setIsAnimating(false);\n }\n };\n\n requestAnimationFrame(animate);\n } else if (previousValueRef.current === null) {\n // Set initial value without animation if no previous value\n setAnimatedHeight(targetHeight);\n }\n\n previousValueRef.current = relative.value;\n }, [relative.value, max.value, barHeight]);\n\n return (\n <div \n className=\"histogram-container\"\n >\n <div className=\"histogram-content\">\n <div \n className=\"histogram-bar\"\n style={{\n height: `${barHeight}px`,\n width: `${barWidth}px`\n }}\n >\n <svg\n width={barWidth}\n height={barHeight}\n viewBox={`0 0 ${barWidth} ${barHeight}`}\n className=\"histogram-svg\"\n >\n {/* Background bar (max value) */}\n <rect\n x=\"0\"\n y={barHeight - maxBarHeight}\n width={barWidth}\n height={maxBarHeight}\n fill={max.color}\n rx=\"2\"\n />\n {/* Foreground bar (relative value) with animation */}\n <rect\n x=\"0\"\n y={barHeight - currentRelativeBarHeight}\n width={barWidth}\n height={currentRelativeBarHeight}\n fill={relative.color}\n rx=\"2\"\n />\n </svg>\n </div>\n {children && (\n <div className=\"histogram-text-container\">\n {children}\n </div>\n )}\n </div>\n </div>\n );\n};\n"],"names":["Histogram","_a","max","relative","_b","barHeight","_c","barWidth","children","_d","useState","animatedHeight","setAnimatedHeight","_e","isAnimating","setIsAnimating","previousValueRef","useRef","isInitialMount","relativePercentage","Math","min","value","maxBarHeight","currentRelativeBarHeight","useEffect","targetHeight","current","startTime_1","Date","now","animate_1","elapsed","progress","easeOutQuart","pow","requestAnimationFrame","previousHeight_1","startTime_2","animate_2","_jsx","className","_jsxs","style","height","concat","width","viewBox","x","y","fill","color","rx"],"mappings":"8GAsBO,IAAMA,EAAsC,SAACC,OAClDC,EAAGD,EAAAC,IACHC,EAAQF,EAAAE,SACRC,EAAeH,EAAAI,UAAfA,OAAY,IAAAD,EAAA,MACZE,EAAAL,EAAAM,SAAAA,OAAQ,IAAAD,EAAG,GAAEA,EACbE,EAAQP,EAAAO,SAGFC,EAAsCC,EAAS,GAA9CC,EAAcF,EAAA,GAAEG,EAAiBH,EAAA,GAClCI,EAAgCH,GAAS,GAAxCI,EAAWD,EAAA,GAAEE,EAAcF,EAAA,GAC5BG,EAAmBC,EAAsB,MACzCC,EAAiBD,GAAO,GAGxBE,EAAqBC,KAAKC,IAAKlB,EAASmB,MAAQpB,EAAIoB,MAAS,IAAK,KAGlEC,EAAelB,EAEfmB,EAA2BV,EAC7BH,EAF6BQ,EAAqB,IAAOd,EAkF7D,OA5EAoB,EAAU,WACR,IAAMC,EACHN,KAAKC,IAAKlB,EAASmB,MAAQpB,EAAIoB,MAAS,IAAK,KAAO,IAAOjB,EAG9D,GAAIa,EAAeS,QAAnB,CACET,EAAeS,SAAU,EACzBZ,GAAe,GACfH,EAAkB,GAClBI,EAAiBW,QAAUxB,EAASmB,MAEpC,IAAMM,EAAYC,KAAKC,MAGjBC,EAAU,WACd,IAAMC,EAAUH,KAAKC,MAAQF,EACvBK,EAAWb,KAAKC,IAAIW,EAJX,IAI+B,GAGxCE,EAAe,EAAId,KAAKe,IAAI,EAAIF,EAAU,GAGhDrB,EADsBc,EAAeQ,GAGjCD,EAAW,EACbG,sBAAsBL,GAEtBhB,GAAe,EAEnB,EAEAqB,sBAAsBL,EAEvB,KA5BD,CA+BA,GAC+B,OAA7Bf,EAAiBW,SACjBX,EAAiBW,UAAYxB,EAASmB,MACtC,CACA,IAAMe,EACHjB,KAAKC,IAAKL,EAAiBW,QAAUzB,EAAIoB,MAAS,IAAK,KAAO,IAC/DjB,EACFU,GAAe,GACfH,EAAkByB,GAElB,IAAMC,EAAYT,KAAKC,MAGjBS,EAAU,WACd,IAAMP,EAAUH,KAAKC,MAAQQ,EACvBL,EAAWb,KAAKC,IAAIW,EAJX,IAI+B,GAGxCE,EAAe,EAAId,KAAKe,IAAI,EAAIF,EAAU,GAIhDrB,EADEyB,GAAkBX,EAAeW,GAAkBH,GAGjDD,EAAW,EACbG,sBAAsBG,GAEtBxB,GAAe,EAEnB,EAEAqB,sBAAsBG,EACvB,MAAuC,OAA7BvB,EAAiBW,SAE1Bf,EAAkBc,GAGpBV,EAAiBW,QAAUxB,EAASmB,KAxCnC,CAyCH,EAAG,CAACnB,EAASmB,MAAOpB,EAAIoB,MAAOjB,IAG7BmC,EACE,MAAA,CAAAC,UAAU,+BAEVC,EAAK,MAAA,CAAAD,UAAU,8BACbD,EACE,MAAA,CAAAC,UAAU,gBACVE,MAAO,CACLC,OAAQ,GAAGC,OAAAxC,EAAa,MACxByC,MAAO,GAAGD,OAAAtC,EAAY,OAGxBC,SAAAkC,EAAA,MAAA,CACEI,MAAOvC,EACPqC,OAAQvC,EACR0C,QAAS,OAAOF,OAAAtC,cAAYF,GAC5BoC,UAAU,gBAAejC,SAAA,CAGzBgC,EACE,OAAA,CAAAQ,EAAE,IACFC,EAAG5C,EAAYkB,EACfuB,MAAOvC,EACPqC,OAAQrB,EACR2B,KAAMhD,EAAIiD,MACVC,GAAG,MAGLZ,UACEQ,EAAE,IACFC,EAAG5C,EAAYmB,EACfsB,MAAOvC,EACPqC,OAAQpB,EACR0B,KAAM/C,EAASgD,MACfC,GAAG,WAIR5C,GACCgC,SAAKC,UAAU,2BACZjC,SAAAA,QAMb"}
1
+ {"version":3,"file":"index.esm.js","sources":["../src/components/Histogram.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport \"./Histogram.css\";\n\ninterface HistogramProps {\n /** Maximum value configuration with value and color */\n max: {\n value: number;\n color: string;\n };\n /** Relative/current value configuration with value and color */\n relative: {\n value: number;\n color: string;\n };\n /** Height of the histogram bar in pixels */\n barHeight?: number;\n /** Width of the histogram bar in pixels */\n barWidth?: number;\n /** Child components (typically text content) */\n children?: React.ReactNode;\n}\n\nexport const Histogram: React.FC<HistogramProps> = ({\n max,\n relative,\n barHeight = 103,\n barWidth = 32,\n children,\n}) => {\n const [animatedHeight, setAnimatedHeight] = useState(0);\n\n // Calculate target height\n const targetHeight = (Math.min((relative.value / max.value) * 100, 100) / 100) * barHeight;\n\n // Simple Chart.js-like animation: always animate from 0 to target\n useEffect(() => {\n setAnimatedHeight(0);\n \n const startTime = Date.now();\n const duration = 1000;\n\n const animate = () => {\n const elapsed = Date.now() - startTime;\n const progress = Math.min(elapsed / duration, 1);\n\n // Chart.js-like easing (easeOutQuart)\n const easeOutQuart = 1 - Math.pow(1 - progress, 4);\n \n setAnimatedHeight(targetHeight * easeOutQuart);\n\n if (progress < 1) {\n requestAnimationFrame(animate);\n }\n };\n\n requestAnimationFrame(animate);\n }, [targetHeight]);\n\n return (\n <div className=\"histogram-container\">\n <div className=\"histogram-content\">\n <div \n className=\"histogram-bar\"\n style={{\n height: `${barHeight}px`,\n width: `${barWidth}px`\n }}\n >\n <svg\n width={barWidth}\n height={barHeight}\n viewBox={`0 0 ${barWidth} ${barHeight}`}\n className=\"histogram-svg\"\n >\n {/* Background bar (max value) */}\n <rect\n x=\"0\"\n y=\"0\"\n width={barWidth}\n height={barHeight}\n fill={max.color}\n rx=\"2\"\n />\n {/* Foreground bar (relative value) with animation */}\n <rect\n x=\"0\"\n y={barHeight - animatedHeight}\n width={barWidth}\n height={animatedHeight}\n fill={relative.color}\n rx=\"2\"\n />\n </svg>\n </div>\n {children && (\n <div className=\"histogram-text-container\">\n {children}\n </div>\n )}\n </div>\n </div>\n );\n};\n"],"names":["Histogram","_a","max","relative","_b","barHeight","_c","barWidth","children","_d","useState","animatedHeight","setAnimatedHeight","targetHeight","Math","min","value","useEffect","startTime","Date","now","animate","elapsed","progress","easeOutQuart","pow","requestAnimationFrame","_jsx","className","_jsxs","style","height","concat","width","viewBox","x","y","fill","color","rx"],"mappings":"kGAsBO,IAAMA,EAAsC,SAACC,OAClDC,EAAGD,EAAAC,IACHC,EAAQF,EAAAE,SACRC,EAAeH,EAAAI,UAAfA,OAAY,IAAAD,EAAA,MACZE,EAAAL,EAAAM,SAAAA,OAAQ,IAAAD,EAAG,GAAEA,EACbE,EAAQP,EAAAO,SAEFC,EAAsCC,EAAS,GAA9CC,EAAcF,EAAA,GAAEG,EAAiBH,EAAA,GAGlCI,EAAgBC,KAAKC,IAAKZ,EAASa,MAAQd,EAAIc,MAAS,IAAK,KAAO,IAAOX,EA0BjF,OAvBAY,EAAU,WACRL,EAAkB,GAElB,IAAMM,EAAYC,KAAKC,MAGjBC,EAAU,WACd,IAAMC,EAAUH,KAAKC,MAAQF,EACvBK,EAAWT,KAAKC,IAAIO,EAJX,IAI+B,GAGxCE,EAAe,EAAIV,KAAKW,IAAI,EAAIF,EAAU,GAEhDX,EAAkBC,EAAeW,GAE7BD,EAAW,GACbG,sBAAsBL,EAE1B,EAEAK,sBAAsBL,EACxB,EAAG,CAACR,IAGFc,EAAK,MAAA,CAAAC,UAAU,+BACbC,EAAK,MAAA,CAAAD,UAAU,8BACbD,EACE,MAAA,CAAAC,UAAU,gBACVE,MAAO,CACLC,OAAQ,GAAGC,OAAA3B,EAAa,MACxB4B,MAAO,GAAGD,OAAAzB,EAAY,OAGxBC,SAAAqB,EAAA,MAAA,CACEI,MAAO1B,EACPwB,OAAQ1B,EACR6B,QAAS,OAAOF,OAAAzB,cAAYF,GAC5BuB,UAAU,gBAGVpB,SAAA,CAAAmB,EAAA,OAAA,CACEQ,EAAE,IACFC,EAAE,IACFH,MAAO1B,EACPwB,OAAQ1B,EACRgC,KAAMnC,EAAIoC,MACVC,GAAG,MAGLZ,EAAA,OAAA,CACEQ,EAAE,IACFC,EAAG/B,EAAYM,EACfsB,MAAO1B,EACPwB,OAAQpB,EACR0B,KAAMlC,EAASmC,MACfC,GAAG,WAIR/B,GACCmB,SAAKC,UAAU,2BACZpB,SAAAA,QAMb"}
package/dist/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var e=require("react/jsx-runtime"),t=require("react");exports.Histogram=function(a){var r=a.max,i=a.relative,n=a.barHeight,s=void 0===n?103:n,c=a.barWidth,u=void 0===c?32:c,l=a.children,o=t.useState(0),h=o[0],v=o[1],m=t.useState(!1),x=m[0],d=m[1],g=t.useRef(null),f=t.useRef(!0),w=Math.min(i.value/r.value*100,100),j=s,M=x?h:w/100*s;return t.useEffect(function(){var e=Math.min(i.value/r.value*100,100)/100*s;if(f.current){f.current=!1,d(!0),v(0),g.current=i.value;var t=Date.now(),a=function(){var r=Date.now()-t,i=Math.min(r/1e3,1),n=1-Math.pow(1-i,4);v(e*n),i<1?requestAnimationFrame(a):d(!1)};requestAnimationFrame(a)}else{if(null!==g.current&&g.current!==i.value){var n=Math.min(g.current/r.value*100,100)/100*s;d(!0),v(n);var c=Date.now(),u=function(){var t=Date.now()-c,a=Math.min(t/2e3,1),r=1-Math.pow(1-a,4);v(n+(e-n)*r),a<1?requestAnimationFrame(u):d(!1)};requestAnimationFrame(u)}else null===g.current&&v(e);g.current=i.value}},[i.value,r.value,s]),e.jsx("div",{className:"histogram-container",children:e.jsxs("div",{className:"histogram-content",children:[e.jsx("div",{className:"histogram-bar",style:{height:"".concat(s,"px"),width:"".concat(u,"px")},children:e.jsxs("svg",{width:u,height:s,viewBox:"0 0 ".concat(u," ").concat(s),className:"histogram-svg",children:[e.jsx("rect",{x:"0",y:s-j,width:u,height:j,fill:r.color,rx:"2"}),e.jsx("rect",{x:"0",y:s-M,width:u,height:M,fill:i.color,rx:"2"})]})}),l&&e.jsx("div",{className:"histogram-text-container",children:l})]})})};
1
+ "use strict";var t=require("react/jsx-runtime"),e=require("react");exports.Histogram=function(i){var a=i.max,r=i.relative,s=i.barHeight,c=void 0===s?103:s,n=i.barWidth,o=void 0===n?32:n,h=i.children,l=e.useState(0),m=l[0],x=l[1],d=Math.min(r.value/a.value*100,100)/100*c;return e.useEffect(function(){x(0);var t=Date.now(),e=function(){var i=Date.now()-t,a=Math.min(i/1e3,1),r=1-Math.pow(1-a,4);x(d*r),a<1&&requestAnimationFrame(e)};requestAnimationFrame(e)},[d]),t.jsx("div",{className:"histogram-container",children:t.jsxs("div",{className:"histogram-content",children:[t.jsx("div",{className:"histogram-bar",style:{height:"".concat(c,"px"),width:"".concat(o,"px")},children:t.jsxs("svg",{width:o,height:c,viewBox:"0 0 ".concat(o," ").concat(c),className:"histogram-svg",children:[t.jsx("rect",{x:"0",y:"0",width:o,height:c,fill:a.color,rx:"2"}),t.jsx("rect",{x:"0",y:c-m,width:o,height:m,fill:r.color,rx:"2"})]})}),h&&t.jsx("div",{className:"histogram-text-container",children:h})]})})};
2
2
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../src/components/Histogram.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from \"react\";\nimport \"./Histogram.css\";\n\ninterface HistogramProps {\n /** Maximum value configuration with value and color */\n max: {\n value: number;\n color: string;\n };\n /** Relative/current value configuration with value and color */\n relative: {\n value: number;\n color: string;\n };\n /** Height of the histogram bar in pixels */\n barHeight?: number;\n /** Width of the histogram bar in pixels */\n barWidth?: number;\n /** Child components (typically text content) */\n children?: React.ReactNode;\n}\n\nexport const Histogram: React.FC<HistogramProps> = ({\n max,\n relative,\n barHeight = 103,\n barWidth = 32,\n children,\n}) => {\n // Animation state\n const [animatedHeight, setAnimatedHeight] = useState(0);\n const [isAnimating, setIsAnimating] = useState(false);\n const previousValueRef = useRef<number | null>(null);\n const isInitialMount = useRef(true);\n\n // Calculate the height percentages for the two bars\n const relativePercentage = Math.min((relative.value / max.value) * 100, 100);\n\n // Calculate actual heights in pixels\n const maxBarHeight = barHeight;\n const targetRelativeBarHeight = (relativePercentage / 100) * barHeight;\n const currentRelativeBarHeight = isAnimating\n ? animatedHeight\n : targetRelativeBarHeight;\n\n // Animation effect\n useEffect(() => {\n const targetHeight =\n (Math.min((relative.value / max.value) * 100, 100) / 100) * barHeight;\n\n // On initial mount, start from 0\n if (isInitialMount.current) {\n isInitialMount.current = false;\n setIsAnimating(true);\n setAnimatedHeight(0);\n previousValueRef.current = relative.value;\n\n const startTime = Date.now();\n const duration = 1000; // 2 seconds\n\n const animate = () => {\n const elapsed = Date.now() - startTime;\n const progress = Math.min(elapsed / duration, 1);\n\n // Chart.js-like easing function (easeOutQuart)\n const easeOutQuart = 1 - Math.pow(1 - progress, 4);\n\n const currentHeight = targetHeight * easeOutQuart;\n setAnimatedHeight(currentHeight);\n\n if (progress < 1) {\n requestAnimationFrame(animate);\n } else {\n setIsAnimating(false);\n }\n };\n\n requestAnimationFrame(animate);\n return;\n }\n\n // For subsequent updates, animate from previous value to new value\n if (\n previousValueRef.current !== null &&\n previousValueRef.current !== relative.value\n ) {\n const previousHeight =\n (Math.min((previousValueRef.current / max.value) * 100, 100) / 100) *\n barHeight;\n setIsAnimating(true);\n setAnimatedHeight(previousHeight);\n\n const startTime = Date.now();\n const duration = 2000; // 2 seconds\n\n const animate = () => {\n const elapsed = Date.now() - startTime;\n const progress = Math.min(elapsed / duration, 1);\n\n // Chart.js-like easing function (easeOutQuart)\n const easeOutQuart = 1 - Math.pow(1 - progress, 4);\n\n const currentHeight =\n previousHeight + (targetHeight - previousHeight) * easeOutQuart;\n setAnimatedHeight(currentHeight);\n\n if (progress < 1) {\n requestAnimationFrame(animate);\n } else {\n setIsAnimating(false);\n }\n };\n\n requestAnimationFrame(animate);\n } else if (previousValueRef.current === null) {\n // Set initial value without animation if no previous value\n setAnimatedHeight(targetHeight);\n }\n\n previousValueRef.current = relative.value;\n }, [relative.value, max.value, barHeight]);\n\n return (\n <div \n className=\"histogram-container\"\n >\n <div className=\"histogram-content\">\n <div \n className=\"histogram-bar\"\n style={{\n height: `${barHeight}px`,\n width: `${barWidth}px`\n }}\n >\n <svg\n width={barWidth}\n height={barHeight}\n viewBox={`0 0 ${barWidth} ${barHeight}`}\n className=\"histogram-svg\"\n >\n {/* Background bar (max value) */}\n <rect\n x=\"0\"\n y={barHeight - maxBarHeight}\n width={barWidth}\n height={maxBarHeight}\n fill={max.color}\n rx=\"2\"\n />\n {/* Foreground bar (relative value) with animation */}\n <rect\n x=\"0\"\n y={barHeight - currentRelativeBarHeight}\n width={barWidth}\n height={currentRelativeBarHeight}\n fill={relative.color}\n rx=\"2\"\n />\n </svg>\n </div>\n {children && (\n <div className=\"histogram-text-container\">\n {children}\n </div>\n )}\n </div>\n </div>\n );\n};\n"],"names":["_a","max","relative","_b","barHeight","_c","barWidth","children","_d","useState","animatedHeight","setAnimatedHeight","_e","isAnimating","setIsAnimating","previousValueRef","useRef","isInitialMount","relativePercentage","Math","min","value","maxBarHeight","currentRelativeBarHeight","useEffect","targetHeight","current","startTime_1","Date","now","animate_1","elapsed","progress","easeOutQuart","pow","requestAnimationFrame","previousHeight_1","startTime_2","animate_2","_jsx","className","_jsxs","jsxs","jsx","style","height","concat","width","viewBox","x","y","fill","color","rx"],"mappings":"qFAsBmD,SAACA,OAClDC,EAAGD,EAAAC,IACHC,EAAQF,EAAAE,SACRC,EAAeH,EAAAI,UAAfA,OAAY,IAAAD,EAAA,MACZE,EAAAL,EAAAM,SAAAA,OAAQ,IAAAD,EAAG,GAAEA,EACbE,EAAQP,EAAAO,SAGFC,EAAsCC,EAAAA,SAAS,GAA9CC,EAAcF,EAAA,GAAEG,EAAiBH,EAAA,GAClCI,EAAgCH,EAAAA,UAAS,GAAxCI,EAAWD,EAAA,GAAEE,EAAcF,EAAA,GAC5BG,EAAmBC,SAAsB,MACzCC,EAAiBD,UAAO,GAGxBE,EAAqBC,KAAKC,IAAKlB,EAASmB,MAAQpB,EAAIoB,MAAS,IAAK,KAGlEC,EAAelB,EAEfmB,EAA2BV,EAC7BH,EAF6BQ,EAAqB,IAAOd,EAkF7D,OA5EAoB,EAAAA,UAAU,WACR,IAAMC,EACHN,KAAKC,IAAKlB,EAASmB,MAAQpB,EAAIoB,MAAS,IAAK,KAAO,IAAOjB,EAG9D,GAAIa,EAAeS,QAAnB,CACET,EAAeS,SAAU,EACzBZ,GAAe,GACfH,EAAkB,GAClBI,EAAiBW,QAAUxB,EAASmB,MAEpC,IAAMM,EAAYC,KAAKC,MAGjBC,EAAU,WACd,IAAMC,EAAUH,KAAKC,MAAQF,EACvBK,EAAWb,KAAKC,IAAIW,EAJX,IAI+B,GAGxCE,EAAe,EAAId,KAAKe,IAAI,EAAIF,EAAU,GAGhDrB,EADsBc,EAAeQ,GAGjCD,EAAW,EACbG,sBAAsBL,GAEtBhB,GAAe,EAEnB,EAEAqB,sBAAsBL,EAEvB,KA5BD,CA+BA,GAC+B,OAA7Bf,EAAiBW,SACjBX,EAAiBW,UAAYxB,EAASmB,MACtC,CACA,IAAMe,EACHjB,KAAKC,IAAKL,EAAiBW,QAAUzB,EAAIoB,MAAS,IAAK,KAAO,IAC/DjB,EACFU,GAAe,GACfH,EAAkByB,GAElB,IAAMC,EAAYT,KAAKC,MAGjBS,EAAU,WACd,IAAMP,EAAUH,KAAKC,MAAQQ,EACvBL,EAAWb,KAAKC,IAAIW,EAJX,IAI+B,GAGxCE,EAAe,EAAId,KAAKe,IAAI,EAAIF,EAAU,GAIhDrB,EADEyB,GAAkBX,EAAeW,GAAkBH,GAGjDD,EAAW,EACbG,sBAAsBG,GAEtBxB,GAAe,EAEnB,EAEAqB,sBAAsBG,EACvB,MAAuC,OAA7BvB,EAAiBW,SAE1Bf,EAAkBc,GAGpBV,EAAiBW,QAAUxB,EAASmB,KAxCnC,CAyCH,EAAG,CAACnB,EAASmB,MAAOpB,EAAIoB,MAAOjB,IAG7BmC,EAAAA,IACE,MAAA,CAAAC,UAAU,+BAEVC,EAAKC,KAAA,MAAA,CAAAF,UAAU,8BACbD,EACEI,IAAA,MAAA,CAAAH,UAAU,gBACVI,MAAO,CACLC,OAAQ,GAAGC,OAAA1C,EAAa,MACxB2C,MAAO,GAAGD,OAAAxC,EAAY,OAGxBC,SAAAkC,EAAAA,KAAA,MAAA,CACEM,MAAOzC,EACPuC,OAAQzC,EACR4C,QAAS,OAAOF,OAAAxC,cAAYF,GAC5BoC,UAAU,gBAAejC,SAAA,CAGzBgC,EACEI,IAAA,OAAA,CAAAM,EAAE,IACFC,EAAG9C,EAAYkB,EACfyB,MAAOzC,EACPuC,OAAQvB,EACR6B,KAAMlD,EAAImD,MACVC,GAAG,MAGLd,cACEU,EAAE,IACFC,EAAG9C,EAAYmB,EACfwB,MAAOzC,EACPuC,OAAQtB,EACR4B,KAAMjD,EAASkD,MACfC,GAAG,WAIR9C,GACCgC,EAAAA,WAAKC,UAAU,2BACZjC,SAAAA,QAMb"}
1
+ {"version":3,"file":"index.js","sources":["../src/components/Histogram.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport \"./Histogram.css\";\n\ninterface HistogramProps {\n /** Maximum value configuration with value and color */\n max: {\n value: number;\n color: string;\n };\n /** Relative/current value configuration with value and color */\n relative: {\n value: number;\n color: string;\n };\n /** Height of the histogram bar in pixels */\n barHeight?: number;\n /** Width of the histogram bar in pixels */\n barWidth?: number;\n /** Child components (typically text content) */\n children?: React.ReactNode;\n}\n\nexport const Histogram: React.FC<HistogramProps> = ({\n max,\n relative,\n barHeight = 103,\n barWidth = 32,\n children,\n}) => {\n const [animatedHeight, setAnimatedHeight] = useState(0);\n\n // Calculate target height\n const targetHeight = (Math.min((relative.value / max.value) * 100, 100) / 100) * barHeight;\n\n // Simple Chart.js-like animation: always animate from 0 to target\n useEffect(() => {\n setAnimatedHeight(0);\n \n const startTime = Date.now();\n const duration = 1000;\n\n const animate = () => {\n const elapsed = Date.now() - startTime;\n const progress = Math.min(elapsed / duration, 1);\n\n // Chart.js-like easing (easeOutQuart)\n const easeOutQuart = 1 - Math.pow(1 - progress, 4);\n \n setAnimatedHeight(targetHeight * easeOutQuart);\n\n if (progress < 1) {\n requestAnimationFrame(animate);\n }\n };\n\n requestAnimationFrame(animate);\n }, [targetHeight]);\n\n return (\n <div className=\"histogram-container\">\n <div className=\"histogram-content\">\n <div \n className=\"histogram-bar\"\n style={{\n height: `${barHeight}px`,\n width: `${barWidth}px`\n }}\n >\n <svg\n width={barWidth}\n height={barHeight}\n viewBox={`0 0 ${barWidth} ${barHeight}`}\n className=\"histogram-svg\"\n >\n {/* Background bar (max value) */}\n <rect\n x=\"0\"\n y=\"0\"\n width={barWidth}\n height={barHeight}\n fill={max.color}\n rx=\"2\"\n />\n {/* Foreground bar (relative value) with animation */}\n <rect\n x=\"0\"\n y={barHeight - animatedHeight}\n width={barWidth}\n height={animatedHeight}\n fill={relative.color}\n rx=\"2\"\n />\n </svg>\n </div>\n {children && (\n <div className=\"histogram-text-container\">\n {children}\n </div>\n )}\n </div>\n </div>\n );\n};\n"],"names":["_a","max","relative","_b","barHeight","_c","barWidth","children","_d","useState","animatedHeight","setAnimatedHeight","targetHeight","Math","min","value","useEffect","startTime","Date","now","animate","elapsed","progress","easeOutQuart","pow","requestAnimationFrame","_jsx","className","_jsxs","jsxs","jsx","style","height","concat","width","viewBox","x","y","fill","color","rx"],"mappings":"qFAsBmD,SAACA,OAClDC,EAAGD,EAAAC,IACHC,EAAQF,EAAAE,SACRC,EAAeH,EAAAI,UAAfA,OAAY,IAAAD,EAAA,MACZE,EAAAL,EAAAM,SAAAA,OAAQ,IAAAD,EAAG,GAAEA,EACbE,EAAQP,EAAAO,SAEFC,EAAsCC,EAAAA,SAAS,GAA9CC,EAAcF,EAAA,GAAEG,EAAiBH,EAAA,GAGlCI,EAAgBC,KAAKC,IAAKZ,EAASa,MAAQd,EAAIc,MAAS,IAAK,KAAO,IAAOX,EA0BjF,OAvBAY,EAAAA,UAAU,WACRL,EAAkB,GAElB,IAAMM,EAAYC,KAAKC,MAGjBC,EAAU,WACd,IAAMC,EAAUH,KAAKC,MAAQF,EACvBK,EAAWT,KAAKC,IAAIO,EAJX,IAI+B,GAGxCE,EAAe,EAAIV,KAAKW,IAAI,EAAIF,EAAU,GAEhDX,EAAkBC,EAAeW,GAE7BD,EAAW,GACbG,sBAAsBL,EAE1B,EAEAK,sBAAsBL,EACxB,EAAG,CAACR,IAGFc,EAAAA,IAAK,MAAA,CAAAC,UAAU,+BACbC,EAAKC,KAAA,MAAA,CAAAF,UAAU,8BACbD,EACEI,IAAA,MAAA,CAAAH,UAAU,gBACVI,MAAO,CACLC,OAAQ,GAAGC,OAAA7B,EAAa,MACxB8B,MAAO,GAAGD,OAAA3B,EAAY,OAGxBC,SAAAqB,EAAAA,KAAA,MAAA,CACEM,MAAO5B,EACP0B,OAAQ5B,EACR+B,QAAS,OAAOF,OAAA3B,cAAYF,GAC5BuB,UAAU,gBAGVpB,SAAA,CAAAmB,EAAAA,IAAA,OAAA,CACEU,EAAE,IACFC,EAAE,IACFH,MAAO5B,EACP0B,OAAQ5B,EACRkC,KAAMrC,EAAIsC,MACVC,GAAG,MAGLd,EAAAA,IAAA,OAAA,CACEU,EAAE,IACFC,EAAGjC,EAAYM,EACfwB,MAAO5B,EACP0B,OAAQtB,EACR4B,KAAMpC,EAASqC,MACfC,GAAG,WAIRjC,GACCmB,EAAAA,WAAKC,UAAU,2BACZpB,SAAAA,QAMb"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "rte-utils",
3
- "version": "1.2.1",
3
+ "version": "1.2.2",
4
4
  "description": "React components library in TypeScript for agigox projects",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",