rte-utils 1.0.1 → 1.2.0

package/README.md

@@ -0,0 +1,128 @@
+# RTE Utils
+
+React components library in TypeScript for agigox projects.
+
+## Installation
+
+```bash
+npm install rte-utils
+```
+
+## Usage
+
+### Import Component and Styles
+
+You need to import both the component and its CSS styles:
+
+```tsx
+import { Histogramme } from 'rte-utils';
+import 'rte-utils/dist/index.css'; // Import the CSS styles
+```
+
+### Basic Example
+
+```tsx
+import React from 'react';
+import { Histogramme } from 'rte-utils';
+import 'rte-utils/dist/index.css';
+
+function App() {
+  return (
+    <div>
+      <Histogramme
+        max={{ value: 100, color: "#D3D64E" }}
+        relative={{ value: 56, color: "#C0C402" }}
+        value={56}
+        unit="MWh"
+        label="Soutirage"
+      />
+    </div>
+  );
+}
+
+export default App;
+```
+
+### Advanced Example with Animation
+
+```tsx
+import React, { useState } from 'react';
+import { Histogramme } from 'rte-utils';
+import 'rte-utils/dist/index.css';
+
+function EnergyDashboard() {
+  const [currentValue, setCurrentValue] = useState(45);
+
+  return (
+    <div style={{ display: 'flex', gap: '1rem' }}>
+      <Histogramme
+        max={{ value: 100, color: "#D3D64E" }}
+        relative={{ value: currentValue, color: "#C0C402" }}
+        value={currentValue}
+        unit="MWh"
+        label="Consommation"
+        backgroundColor="#0066cc"
+        barHeight={120}
+        width={60}
+      />
+      
+      <button onClick={() => setCurrentValue(prev => prev + 10)}>
+        Increase (+10)
+      </button>
+    </div>
+  );
+}
+```
+
+## Components
+
+### Histogramme
+
+A histogram component with smooth animations for energy data visualization.
+
+#### Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `max` | `{ value: number; color: string }` | ✅ | - | Maximum value configuration with value and color |
+| `relative` | `{ value: number; color: string }` | ✅ | - | Relative/current value configuration with value and color |
+| `value` | `number` | ✅ | - | Value to display in text |
+| `unit` | `string` | ✅ | - | Unit label (e.g., "MWh") |
+| `label` | `string` | ✅ | - | Description label (e.g., "Soutirage") |
+| `backgroundColor` | `string` | ❌ | `#005896` | Background color of the container |
+| `barHeight` | `number` | ❌ | `103` | Height of the histogram bar in pixels |
+| `width` | `number` | ❌ | `54` | Width of the component in pixels |
+
+#### Features
+
+- **Smooth animations**: 2-second Chart.js-style transitions
+- **Incremental updates**: Animations from previous to new values (not from 0)
+- **Dynamic two-color visualization**: 
+  - Background bar color defined by `max.color` represents the maximum value
+  - Foreground bar color defined by `relative.color` represents the relative value
+- **Customizable**: Colors, dimensions, and styling options
+- **TypeScript support**: Full type definitions included
+
+## Styling
+
+The component uses external CSS classes for styling. Make sure to import the CSS file:
+
+```tsx
+import 'rte-utils/dist/index.css';
+```
+
+You can override the default styles by targeting the CSS classes:
+
+- `.histogramme-container`
+- `.histogramme-content`
+- `.histogramme-bar`
+- `.histogramme-svg`
+- `.histogramme-text-container`
+- `.histogramme-value-container`
+- `.histogramme-value`
+- `.histogramme-unit`
+- `.histogramme-label`
+
+## License
+
+MIT

package/dist/components/Histogramme.d.ts

@@ -1,9 +1,16 @@
 import React from "react";
+import "./Histogramme.css";
 interface HistogrammeProps {
-    /** Maximum value for the bar chart */
-    maxValue: number;
-    /** Relative/current value to compare against max */
-    relativeValue: number;
+    /** Maximum value configuration with value and color */
+    max: {
+        value: number;
+        color: string;
+    };
+    /** Relative/current value configuration with value and color */
+    relative: {
+        value: number;
+        color: string;
+    };
     /** Value to display in text */
     value: number;
     /** Unit label (e.g., "MWh") */
@@ -14,8 +21,6 @@ interface HistogrammeProps {
     backgroundColor?: string;
     /** Height of the histogram bar in pixels */
     barHeight?: number;
-    /** Width of the component in pixels */
-    width?: number;
 }
 export declare const Histogramme: React.FC<HistogrammeProps>;
 export {};

package/dist/index.css

@@ -0,0 +1 @@
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap");*{font-family:Open Sans,sans-serif}.histogramme-container{border:3px solid #2c2f33;height:auto;max-width:54px;position:relative}.histogramme-content{align-items:center;display:flex;flex-direction:column;gap:8px;width:100%}.histogramme-bar{position:relative}.histogramme-svg{display:block}.histogramme-text-container{align-items:center;display:flex;flex-direction:column;gap:0;width:100%}.histogramme-value-container{text-align:center;width:40px}.histogramme-value{font-size:16px;line-height:14px}.histogramme-unit,.histogramme-value{color:#000;display:block;font-weight:600;margin:0}.histogramme-unit{font-size:12px}.histogramme-label{color:#6f6f6f;font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0;text-align:left;white-space:nowrap}

package/dist/index.esm.css

@@ -0,0 +1 @@
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap");*{font-family:Open Sans,sans-serif}.histogramme-container{border:3px solid #2c2f33;height:auto;max-width:54px;position:relative}.histogramme-content{align-items:center;display:flex;flex-direction:column;gap:8px;width:100%}.histogramme-bar{position:relative}.histogramme-svg{display:block}.histogramme-text-container{align-items:center;display:flex;flex-direction:column;gap:0;width:100%}.histogramme-value-container{text-align:center;width:40px}.histogramme-value{font-size:16px;line-height:14px}.histogramme-unit,.histogramme-value{color:#000;display:block;font-weight:600;margin:0}.histogramme-unit{font-size:12px}.histogramme-label{color:#6f6f6f;font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0;text-align:left;white-space:nowrap}

package/dist/index.esm.js

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as i}from"react/jsx-runtime";import{useState as t,useRef as n,useEffect as r}from"react";var a=function(a){var l=a.maxValue,o=a.relativeValue,c=a.value,h=a.unit,s=a.label,d=a.backgroundColor,p=void 0===d?"#005896":d,u=a.barHeight,m=void 0===u?103:u,f=a.width,x=void 0===f?54:f,g=t(0),v=g[0],F=g[1],y=t(!1),w=y[0],D=y[1],b=n(null),M=n(!0),S=Math.min(o/l*100,100),A=m,k=w?v:S/100*m;r(function(){var e=Math.min(o/l*100,100)/100*m;if(M.current){M.current=!1,D(!0),F(0),b.current=o;var i=Date.now(),t=function(){var n=Date.now()-i,r=Math.min(n/1e3,1),a=1-Math.pow(1-r,4);F(e*a),r<1?requestAnimationFrame(t):D(!1)};requestAnimationFrame(t)}else{if(null!==b.current&&b.current!==o){var n=Math.min(b.current/l*100,100)/100*m;D(!0),F(n);var r=Date.now(),a=function(){var i=Date.now()-r,t=Math.min(i/2e3,1),l=1-Math.pow(1-t,4);F(n+(e-n)*l),t<1?requestAnimationFrame(a):D(!1)};requestAnimationFrame(a)}else null===b.current&&F(e);b.current=o}},[o,l,m]);var q={backgroundColor:p,position:"relative",width:"".concat(x,"px"),height:"auto",padding:"34px 0"},C={height:"".concat(m,"px"),width:"32px",position:"relative"};return e("div",{style:q,children:i("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",gap:"16px",width:"100%"},children:[e("div",{style:C,children:i("svg",{width:"32",height:m,viewBox:"0 0 32 ".concat(m),style:{display:"block"},children:[e("rect",{x:"0",y:m-A,width:"32",height:A,fill:"#D3D64E",rx:"2"}),e("rect",{x:"0",y:m-k,width:"32",height:k,fill:"#C0C402",rx:"2"})]})}),i("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",gap:"2px",width:"100%"},children:[i("div",{style:{textAlign:"center",width:"40px"},children:[e("p",{style:{fontFamily:"'Open Sans', sans-serif",fontWeight:600,fontSize:"16px",lineHeight:"14px",color:"#FFFFFF",margin:0,display:"block"},children:c}),e("p",{style:{fontFamily:"'Open Sans', sans-serif",fontWeight:600,fontSize:"12px",color:"#FFFFFF",margin:0,display:"block"},children:h})]}),e("div",{children:e("p",{style:{fontFamily:"'Open Sans', sans-serif",fontWeight:400,fontSize:"12px",lineHeight:"18px",color:"#DDDFE0",textAlign:"left",whiteSpace:"nowrap",margin:0},children:s})})]})]})})};export{a as Histogramme};
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useState as r,useRef as t,useEffect as i}from"react";var n=function(n){var l=n.max,m=n.relative,c=n.value,o=n.unit,h=n.label,s=n.barHeight,u=void 0===s?103:s,v=r(0),d=v[0],g=v[1],w=r(!1),x=w[0],f=w[1],p=t(null),N=t(!0),M=Math.min(m.value/l.value*100,100),b=u,q=x?d:M/100*u;return i(function(){var e=Math.min(m.value/l.value*100,100)/100*u;if(N.current){N.current=!1,f(!0),g(0),p.current=m.value;var a=Date.now(),r=function(){var t=Date.now()-a,i=Math.min(t/1e3,1),n=1-Math.pow(1-i,4);g(e*n),i<1?requestAnimationFrame(r):f(!1)};requestAnimationFrame(r)}else{if(null!==p.current&&p.current!==m.value){var t=Math.min(p.current/l.value*100,100)/100*u;f(!0),g(t);var i=Date.now(),n=function(){var a=Date.now()-i,r=Math.min(a/2e3,1),l=1-Math.pow(1-r,4);g(t+(e-t)*l),r<1?requestAnimationFrame(n):f(!1)};requestAnimationFrame(n)}else null===p.current&&g(e);p.current=m.value}},[m.value,l.value,u]),e("div",{className:"histogramme-container",children:a("div",{className:"histogramme-content",children:[e("div",{className:"histogramme-bar",style:{height:"".concat(u,"px"),width:"32px"},children:a("svg",{width:"32",height:u,viewBox:"0 0 32 ".concat(u),className:"histogramme-svg",children:[e("rect",{x:"0",y:u-b,width:"32",height:b,fill:l.color,rx:"2"}),e("rect",{x:"0",y:u-q,width:"32",height:q,fill:m.color,rx:"2"})]})}),a("div",{className:"histogramme-text-container",children:[a("div",{className:"histogramme-value-container",children:[e("p",{className:"histogramme-value",children:c}),e("p",{className:"histogramme-unit",children:o})]}),e("div",{children:e("p",{className:"histogramme-label",children:h})})]})]})})};export{n as Histogramme};
 //# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../src/components/Histogramme.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from \"react\";\n\ninterface HistogrammeProps {\n  /** Maximum value for the bar chart */\n  maxValue: number;\n  /** Relative/current value to compare against max */\n  relativeValue: number;\n  /** Value to display in text */\n  value: number;\n  /** Unit label (e.g., \"MWh\") */\n  unit: string;\n  /** Description label (e.g., \"Soutirage\") */\n  label: string;\n  /** Background color of the container */\n  backgroundColor?: string;\n  /** Height of the histogram bar in pixels */\n  barHeight?: number;\n  /** Width of the component in pixels */\n  width?: number;\n}\n\nexport const Histogramme: React.FC<HistogrammeProps> = ({\n  maxValue,\n  relativeValue,\n  value,\n  unit,\n  label,\n  backgroundColor = \"#005896\",\n  barHeight = 103,\n  width = 54,\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 maxPercentage = 100;\n  const relativePercentage = Math.min((relativeValue / maxValue) * 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((relativeValue / maxValue) * 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 = relativeValue;\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 !== relativeValue\n    ) {\n      const previousHeight =\n        (Math.min((previousValueRef.current / maxValue) * 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 = relativeValue;\n  }, [relativeValue, maxValue, barHeight]);\n  const containerStyle: React.CSSProperties = {\n    backgroundColor,\n    position: \"relative\",\n    width: `${width}px`,\n    height: \"auto\",\n    padding: \"34px 0\",\n  };\n\n  const contentStyle: React.CSSProperties = {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    gap: \"16px\",\n    width: \"100%\",\n  };\n\n  const histogramStyle: React.CSSProperties = {\n    height: `${barHeight}px`,\n    width: \"32px\",\n    position: \"relative\",\n  };\n\n  const imageStyle: React.CSSProperties = {\n    display: \"block\",\n    maxWidth: \"none\",\n    width: \"100%\",\n    height: \"100%\",\n  };\n\n  const textContainerStyle: React.CSSProperties = {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    gap: \"2px\",\n    width: \"100%\",\n  };\n\n  const valueContainerStyle: React.CSSProperties = {\n    textAlign: \"center\",\n    width: \"40px\",\n  };\n\n  const valueStyle: React.CSSProperties = {\n    fontFamily: \"'Open Sans', sans-serif\",\n    fontWeight: 600,\n    fontSize: \"16px\",\n    lineHeight: \"14px\",\n    color: \"#FFFFFF\",\n    margin: 0,\n    display: \"block\",\n  };\n\n  const unitStyle: React.CSSProperties = {\n    fontFamily: \"'Open Sans', sans-serif\",\n    fontWeight: 600,\n    fontSize: \"12px\",\n    color: \"#FFFFFF\",\n    margin: 0,\n    display: \"block\",\n  };\n\n  const labelStyle: React.CSSProperties = {\n    fontFamily: \"'Open Sans', sans-serif\",\n    fontWeight: 400,\n    fontSize: \"12px\",\n    lineHeight: \"18px\",\n    color: \"#DDDFE0\",\n    textAlign: \"left\",\n    whiteSpace: \"nowrap\",\n    margin: 0,\n  };\n\n  return (\n    <div style={containerStyle}>\n      <div style={contentStyle}>\n        <div style={histogramStyle}>\n          <svg\n            width=\"32\"\n            height={barHeight}\n            viewBox={`0 0 32 ${barHeight}`}\n            style={{ display: \"block\" }}\n          >\n            {/* Background bar (max value) */}\n            <rect\n              x=\"0\"\n              y={barHeight - maxBarHeight}\n              width=\"32\"\n              height={maxBarHeight}\n              fill=\"#D3D64E\"\n              rx=\"2\"\n            />\n            {/* Foreground bar (relative value) with animation */}\n            <rect\n              x=\"0\"\n              y={barHeight - currentRelativeBarHeight}\n              width=\"32\"\n              height={currentRelativeBarHeight}\n              fill=\"#C0C402\"\n              rx=\"2\"\n            />\n          </svg>\n        </div>\n        <div style={textContainerStyle}>\n          <div style={valueContainerStyle}>\n            <p style={valueStyle}>{value}</p>\n            <p style={unitStyle}>{unit}</p>\n          </div>\n          <div>\n            <p style={labelStyle}>{label}</p>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["Histogramme","_a","maxValue","relativeValue","value","unit","label","_b","backgroundColor","_c","barHeight","_d","width","_e","useState","animatedHeight","setAnimatedHeight","_f","isAnimating","setIsAnimating","previousValueRef","useRef","isInitialMount","relativePercentage","Math","min","maxBarHeight","currentRelativeBarHeight","useEffect","targetHeight","current","startTime_1","Date","now","animate_1","elapsed","progress","easeOutQuart","pow","requestAnimationFrame","previousHeight_1","startTime_2","animate_2","containerStyle","position","concat","height","padding","histogramStyle","_jsx","style","children","_jsxs","display","flexDirection","alignItems","gap","viewBox","x","y","fill","rx","textAlign","fontFamily","fontWeight","fontSize","lineHeight","color","margin","whiteSpace"],"mappings":"8GAqBO,IAAMA,EAA0C,SAACC,GACtD,IAAAC,EAAQD,EAAAC,SACRC,EAAaF,EAAAE,cACbC,EAAKH,EAAAG,MACLC,EAAIJ,EAAAI,KACJC,EAAKL,EAAAK,MACLC,EAA2BN,EAAAO,gBAA3BA,OAAe,IAAAD,EAAG,UAASA,EAC3BE,EAAAR,EAAAS,UAAAA,OAAS,IAAAD,EAAG,IAAGA,EACfE,EAAUV,EAAAW,MAAVA,OAAK,IAAAD,EAAG,GAAEA,EAGJE,EAAsCC,EAAS,GAA9CC,EAAcF,EAAA,GAAEG,EAAiBH,EAAA,GAClCI,EAAgCH,GAAS,GAAxCI,EAAWD,EAAA,GAAEE,EAAcF,EAAA,GAC5BG,EAAmBC,EAAsB,MACzCC,EAAiBD,GAAO,GAIxBE,EAAqBC,KAAKC,IAAKtB,EAAgBD,EAAY,IAAK,KAGhEwB,EAAehB,EAEfiB,EAA2BT,EAC7BH,EAF6BQ,EAAqB,IAAOb,EAM7DkB,EAAU,WACR,IAAMC,EACHL,KAAKC,IAAKtB,EAAgBD,EAAY,IAAK,KAAO,IAAOQ,EAG5D,GAAIY,EAAeQ,QAAnB,CACER,EAAeQ,SAAU,EACzBX,GAAe,GACfH,EAAkB,GAClBI,EAAiBU,QAAU3B,EAE3B,IAAM4B,EAAYC,KAAKC,MAGjBC,EAAU,WACd,IAAMC,EAAUH,KAAKC,MAAQF,EACvBK,EAAWZ,KAAKC,IAAIU,EAJX,IAI+B,GAGxCE,EAAe,EAAIb,KAAKc,IAAI,EAAIF,EAAU,GAGhDpB,EADsBa,EAAeQ,GAGjCD,EAAW,EACbG,sBAAsBL,GAEtBf,GAAe,EAEnB,EAEAoB,sBAAsBL,EAEvB,KA5BD,CA+BA,GAC+B,OAA7Bd,EAAiBU,SACjBV,EAAiBU,UAAY3B,EAC7B,CACA,IAAMqC,EACHhB,KAAKC,IAAKL,EAAiBU,QAAU5B,EAAY,IAAK,KAAO,IAC9DQ,EACFS,GAAe,GACfH,EAAkBwB,GAElB,IAAMC,EAAYT,KAAKC,MAGjBS,EAAU,WACd,IAAMP,EAAUH,KAAKC,MAAQQ,EACvBL,EAAWZ,KAAKC,IAAIU,EAJX,IAI+B,GAGxCE,EAAe,EAAIb,KAAKc,IAAI,EAAIF,EAAU,GAIhDpB,EADEwB,GAAkBX,EAAeW,GAAkBH,GAGjDD,EAAW,EACbG,sBAAsBG,GAEtBvB,GAAe,EAEnB,EAEAoB,sBAAsBG,EACvB,MAAuC,OAA7BtB,EAAiBU,SAE1Bd,EAAkBa,GAGpBT,EAAiBU,QAAU3B,CAxC1B,CAyCF,EAAE,CAACA,EAAeD,EAAUQ,IAC7B,IAAMiC,EAAsC,CAC1CnC,gBAAeA,EACfoC,SAAU,WACVhC,MAAO,GAAGiC,OAAAjC,EAAS,MACnBkC,OAAQ,OACRC,QAAS,UAWLC,EAAsC,CAC1CF,OAAQ,GAAGD,OAAAnC,EAAa,MACxBE,MAAO,OACPgC,SAAU,YAqDZ,OACEK,EAAA,MAAA,CAAKC,MAAOP,EAAcQ,SACxBC,EAAK,MAAA,CAAAF,MAlEiC,CACxCG,QAAS,OACTC,cAAe,SACfC,WAAY,SACZC,IAAK,OACL5C,MAAO,QA8DHuC,SAAA,CAAAF,EAAA,MAAA,CAAKC,MAAOF,EACVG,SAAAC,EAAA,MAAA,CACExC,MAAM,KACNkC,OAAQpC,EACR+C,QAAS,UAAAZ,OAAUnC,GACnBwC,MAAO,CAAEG,QAAS,SAASF,SAAA,CAG3BF,EACE,OAAA,CAAAS,EAAE,IACFC,EAAGjD,EAAYgB,EACfd,MAAM,KACNkC,OAAQpB,EACRkC,KAAK,UACLC,GAAG,MAGLZ,EAAA,OAAA,CACES,EAAE,IACFC,EAAGjD,EAAYiB,EACff,MAAM,KACNkC,OAAQnB,EACRiC,KAAK,UACLC,GAAG,WAITT,EAAA,MAAA,CAAKF,MAzEqC,CAC9CG,QAAS,OACTC,cAAe,SACfC,WAAY,SACZC,IAAK,MACL5C,MAAO,QAqEDuC,SAAA,CAAAC,EAAA,MAAA,CAAKF,MAlEoC,CAC/CY,UAAW,SACXlD,MAAO,QAgE8BuC,SAAA,CAC7BF,EAAG,IAAA,CAAAC,MA9D2B,CACtCa,WAAY,0BACZC,WAAY,IACZC,SAAU,OACVC,WAAY,OACZC,MAAO,UACPC,OAAQ,EACRf,QAAS,SAuDmBF,SAAG/C,IACvB6C,EAAA,IAAA,CAAGC,MArD0B,CACrCa,WAAY,0BACZC,WAAY,IACZC,SAAU,OACVE,MAAO,UACPC,OAAQ,EACRf,QAAS,SA+CqBF,SAAA9C,OAExB4C,EAAA,MAAA,CAAAE,SACEF,EAAG,IAAA,CAAAC,MA/C2B,CACtCa,WAAY,0BACZC,WAAY,IACZC,SAAU,OACVC,WAAY,OACZC,MAAO,UACPL,UAAW,OACXO,WAAY,SACZD,OAAQ,GAuCoBjB,SAAG7C,aAMnC"}
+{"version":3,"file":"index.esm.js","sources":["../src/components/Histogramme.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from \"react\";\nimport \"./Histogramme.css\";\n\ninterface HistogrammeProps {\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  /** Value to display in text */\n  value: number;\n  /** Unit label (e.g., \"MWh\") */\n  unit: string;\n  /** Description label (e.g., \"Soutirage\") */\n  label: string;\n  /** Background color of the container */\n  backgroundColor?: string;\n  /** Height of the histogram bar in pixels */\n  barHeight?: number;\n}\n\nexport const Histogramme: React.FC<HistogrammeProps> = ({\n  max,\n  relative,\n  value,\n  unit,\n  label,\n  barHeight = 103,\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=\"histogramme-container\"\n    >\n      <div className=\"histogramme-content\">\n        <div \n          className=\"histogramme-bar\"\n          style={{\n            height: `${barHeight}px`,\n            width: \"32px\"\n          }}\n        >\n          <svg\n            width=\"32\"\n            height={barHeight}\n            viewBox={`0 0 32 ${barHeight}`}\n            className=\"histogramme-svg\"\n          >\n            {/* Background bar (max value) */}\n            <rect\n              x=\"0\"\n              y={barHeight - maxBarHeight}\n              width=\"32\"\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=\"32\"\n              height={currentRelativeBarHeight}\n              fill={relative.color}\n              rx=\"2\"\n            />\n          </svg>\n        </div>\n        <div className=\"histogramme-text-container\">\n          <div className=\"histogramme-value-container\">\n            <p className=\"histogramme-value\">{value}</p>\n            <p className=\"histogramme-unit\">{unit}</p>\n          </div>\n          <div>\n            <p className=\"histogramme-label\">{label}</p>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["Histogramme","_a","max","relative","value","unit","label","_b","barHeight","_c","useState","animatedHeight","setAnimatedHeight","_d","isAnimating","setIsAnimating","previousValueRef","useRef","isInitialMount","relativePercentage","Math","min","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","children","viewBox","x","y","fill","color","rx"],"mappings":"8GA0BO,IAAMA,EAA0C,SAACC,GACtD,IAAAC,QACAC,aACAC,UACAC,SACAC,UACAC,EAAAN,EAAAO,UAAAA,OAAS,IAAAD,EAAG,IAAGA,EAGTE,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,EAASC,MAAQF,EAAIE,MAAS,IAAK,KAGlEkB,EAAed,EAEfe,EAA2BT,EAC7BH,EAF6BQ,EAAqB,IAAOX,EAkF7D,OA5EAgB,EAAU,WACR,IAAMC,EACHL,KAAKC,IAAKlB,EAASC,MAAQF,EAAIE,MAAS,IAAK,KAAO,IAAOI,EAG9D,GAAIU,EAAeQ,QAAnB,CACER,EAAeQ,SAAU,EACzBX,GAAe,GACfH,EAAkB,GAClBI,EAAiBU,QAAUvB,EAASC,MAEpC,IAAMuB,EAAYC,KAAKC,MAGjBC,EAAU,WACd,IAAMC,EAAUH,KAAKC,MAAQF,EACvBK,EAAWZ,KAAKC,IAAIU,EAJX,IAI+B,GAGxCE,EAAe,EAAIb,KAAKc,IAAI,EAAIF,EAAU,GAGhDpB,EADsBa,EAAeQ,GAGjCD,EAAW,EACbG,sBAAsBL,GAEtBf,GAAe,EAEnB,EAEAoB,sBAAsBL,EAEvB,KA5BD,CA+BA,GAC+B,OAA7Bd,EAAiBU,SACjBV,EAAiBU,UAAYvB,EAASC,MACtC,CACA,IAAMgC,EACHhB,KAAKC,IAAKL,EAAiBU,QAAUxB,EAAIE,MAAS,IAAK,KAAO,IAC/DI,EACFO,GAAe,GACfH,EAAkBwB,GAElB,IAAMC,EAAYT,KAAKC,MAGjBS,EAAU,WACd,IAAMP,EAAUH,KAAKC,MAAQQ,EACvBL,EAAWZ,KAAKC,IAAIU,EAJX,IAI+B,GAGxCE,EAAe,EAAIb,KAAKc,IAAI,EAAIF,EAAU,GAIhDpB,EADEwB,GAAkBX,EAAeW,GAAkBH,GAGjDD,EAAW,EACbG,sBAAsBG,GAEtBvB,GAAe,EAEnB,EAEAoB,sBAAsBG,EACvB,MAAuC,OAA7BtB,EAAiBU,SAE1Bd,EAAkBa,GAGpBT,EAAiBU,QAAUvB,EAASC,KAxCnC,CAyCH,EAAG,CAACD,EAASC,MAAOF,EAAIE,MAAOI,IAG7B+B,EACE,MAAA,CAAAC,UAAU,iCAEVC,EAAK,MAAA,CAAAD,UAAU,gCACbD,EACE,MAAA,CAAAC,UAAU,kBACVE,MAAO,CACLC,OAAQ,GAAGC,OAAApC,EAAa,MACxBqC,MAAO,QAGTC,SAAAL,EAAA,MAAA,CACEI,MAAM,KACNF,OAAQnC,EACRuC,QAAS,UAAUH,OAAApC,GACnBgC,UAAU,kBAAiBM,SAAA,CAG3BP,EACE,OAAA,CAAAS,EAAE,IACFC,EAAGzC,EAAYc,EACfuB,MAAM,KACNF,OAAQrB,EACR4B,KAAMhD,EAAIiD,MACVC,GAAG,MAGLb,EAAA,OAAA,CACES,EAAE,IACFC,EAAGzC,EAAYe,EACfsB,MAAM,KACNF,OAAQpB,EACR2B,KAAM/C,EAASgD,MACfC,GAAG,WAITX,EAAK,MAAA,CAAAD,UAAU,6BACbM,SAAA,CAAAL,EAAA,MAAA,CAAKD,UAAU,8BAA6BM,SAAA,CAC1CP,EAAG,IAAA,CAAAC,UAAU,oBAAqBM,SAAA1C,IAClCmC,EAAG,IAAA,CAAAC,UAAU,mBAAoBM,SAAAzC,OAEnCkC,EAAA,MAAA,CAAAO,SACEP,EAAG,IAAA,CAAAC,UAAU,oBAAqBM,SAAAxC,aAM9C"}

package/dist/index.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("react");exports.Histogramme=function(i){var n=i.maxValue,r=i.relativeValue,a=i.value,l=i.unit,s=i.label,o=i.backgroundColor,c=void 0===o?"#005896":o,h=i.barHeight,u=void 0===h?103:h,x=i.width,d=void 0===x?54:x,p=t.useState(0),f=p[0],m=p[1],g=t.useState(!1),v=g[0],F=g[1],y=t.useRef(null),w=t.useRef(!0),j=Math.min(r/n*100,100),D=u,S=v?f:j/100*u;t.useEffect(function(){var e=Math.min(r/n*100,100)/100*u;if(w.current){w.current=!1,F(!0),m(0),y.current=r;var t=Date.now(),i=function(){var n=Date.now()-t,r=Math.min(n/1e3,1),a=1-Math.pow(1-r,4);m(e*a),r<1?requestAnimationFrame(i):F(!1)};requestAnimationFrame(i)}else{if(null!==y.current&&y.current!==r){var a=Math.min(y.current/n*100,100)/100*u;F(!0),m(a);var l=Date.now(),s=function(){var t=Date.now()-l,i=Math.min(t/2e3,1),n=1-Math.pow(1-i,4);m(a+(e-a)*n),i<1?requestAnimationFrame(s):F(!1)};requestAnimationFrame(s)}else null===y.current&&m(e);y.current=r}},[r,n,u]);var b={backgroundColor:c,position:"relative",width:"".concat(d,"px"),height:"auto",padding:"34px 0"},M={height:"".concat(u,"px"),width:"32px",position:"relative"};return e.jsx("div",{style:b,children:e.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",gap:"16px",width:"100%"},children:[e.jsx("div",{style:M,children:e.jsxs("svg",{width:"32",height:u,viewBox:"0 0 32 ".concat(u),style:{display:"block"},children:[e.jsx("rect",{x:"0",y:u-D,width:"32",height:D,fill:"#D3D64E",rx:"2"}),e.jsx("rect",{x:"0",y:u-S,width:"32",height:S,fill:"#C0C402",rx:"2"})]})}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",gap:"2px",width:"100%"},children:[e.jsxs("div",{style:{textAlign:"center",width:"40px"},children:[e.jsx("p",{style:{fontFamily:"'Open Sans', sans-serif",fontWeight:600,fontSize:"16px",lineHeight:"14px",color:"#FFFFFF",margin:0,display:"block"},children:a}),e.jsx("p",{style:{fontFamily:"'Open Sans', sans-serif",fontWeight:600,fontSize:"12px",color:"#FFFFFF",margin:0,display:"block"},children:l})]}),e.jsx("div",{children:e.jsx("p",{style:{fontFamily:"'Open Sans', sans-serif",fontWeight:400,fontSize:"12px",lineHeight:"18px",color:"#DDDFE0",textAlign:"left",whiteSpace:"nowrap",margin:0},children:s})})]})]})})};
+"use strict";var e=require("react/jsx-runtime"),a=require("react");exports.Histogramme=function(t){var r=t.max,i=t.relative,s=t.value,n=t.unit,l=t.label,c=t.barHeight,m=void 0===c?103:c,u=a.useState(0),h=u[0],o=u[1],v=a.useState(!1),x=v[0],d=v[1],g=a.useRef(null),j=a.useRef(!0),f=Math.min(i.value/r.value*100,100),w=m,N=x?h:f/100*m;return a.useEffect(function(){var e=Math.min(i.value/r.value*100,100)/100*m;if(j.current){j.current=!1,d(!0),o(0),g.current=i.value;var a=Date.now(),t=function(){var r=Date.now()-a,i=Math.min(r/1e3,1),s=1-Math.pow(1-i,4);o(e*s),i<1?requestAnimationFrame(t):d(!1)};requestAnimationFrame(t)}else{if(null!==g.current&&g.current!==i.value){var s=Math.min(g.current/r.value*100,100)/100*m;d(!0),o(s);var n=Date.now(),l=function(){var a=Date.now()-n,t=Math.min(a/2e3,1),r=1-Math.pow(1-t,4);o(s+(e-s)*r),t<1?requestAnimationFrame(l):d(!1)};requestAnimationFrame(l)}else null===g.current&&o(e);g.current=i.value}},[i.value,r.value,m]),e.jsx("div",{className:"histogramme-container",children:e.jsxs("div",{className:"histogramme-content",children:[e.jsx("div",{className:"histogramme-bar",style:{height:"".concat(m,"px"),width:"32px"},children:e.jsxs("svg",{width:"32",height:m,viewBox:"0 0 32 ".concat(m),className:"histogramme-svg",children:[e.jsx("rect",{x:"0",y:m-w,width:"32",height:w,fill:r.color,rx:"2"}),e.jsx("rect",{x:"0",y:m-N,width:"32",height:N,fill:i.color,rx:"2"})]})}),e.jsxs("div",{className:"histogramme-text-container",children:[e.jsxs("div",{className:"histogramme-value-container",children:[e.jsx("p",{className:"histogramme-value",children:s}),e.jsx("p",{className:"histogramme-unit",children:n})]}),e.jsx("div",{children:e.jsx("p",{className:"histogramme-label",children:l})})]})]})})};
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/components/Histogramme.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from \"react\";\n\ninterface HistogrammeProps {\n  /** Maximum value for the bar chart */\n  maxValue: number;\n  /** Relative/current value to compare against max */\n  relativeValue: number;\n  /** Value to display in text */\n  value: number;\n  /** Unit label (e.g., \"MWh\") */\n  unit: string;\n  /** Description label (e.g., \"Soutirage\") */\n  label: string;\n  /** Background color of the container */\n  backgroundColor?: string;\n  /** Height of the histogram bar in pixels */\n  barHeight?: number;\n  /** Width of the component in pixels */\n  width?: number;\n}\n\nexport const Histogramme: React.FC<HistogrammeProps> = ({\n  maxValue,\n  relativeValue,\n  value,\n  unit,\n  label,\n  backgroundColor = \"#005896\",\n  barHeight = 103,\n  width = 54,\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 maxPercentage = 100;\n  const relativePercentage = Math.min((relativeValue / maxValue) * 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((relativeValue / maxValue) * 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 = relativeValue;\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 !== relativeValue\n    ) {\n      const previousHeight =\n        (Math.min((previousValueRef.current / maxValue) * 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 = relativeValue;\n  }, [relativeValue, maxValue, barHeight]);\n  const containerStyle: React.CSSProperties = {\n    backgroundColor,\n    position: \"relative\",\n    width: `${width}px`,\n    height: \"auto\",\n    padding: \"34px 0\",\n  };\n\n  const contentStyle: React.CSSProperties = {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    gap: \"16px\",\n    width: \"100%\",\n  };\n\n  const histogramStyle: React.CSSProperties = {\n    height: `${barHeight}px`,\n    width: \"32px\",\n    position: \"relative\",\n  };\n\n  const imageStyle: React.CSSProperties = {\n    display: \"block\",\n    maxWidth: \"none\",\n    width: \"100%\",\n    height: \"100%\",\n  };\n\n  const textContainerStyle: React.CSSProperties = {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    gap: \"2px\",\n    width: \"100%\",\n  };\n\n  const valueContainerStyle: React.CSSProperties = {\n    textAlign: \"center\",\n    width: \"40px\",\n  };\n\n  const valueStyle: React.CSSProperties = {\n    fontFamily: \"'Open Sans', sans-serif\",\n    fontWeight: 600,\n    fontSize: \"16px\",\n    lineHeight: \"14px\",\n    color: \"#FFFFFF\",\n    margin: 0,\n    display: \"block\",\n  };\n\n  const unitStyle: React.CSSProperties = {\n    fontFamily: \"'Open Sans', sans-serif\",\n    fontWeight: 600,\n    fontSize: \"12px\",\n    color: \"#FFFFFF\",\n    margin: 0,\n    display: \"block\",\n  };\n\n  const labelStyle: React.CSSProperties = {\n    fontFamily: \"'Open Sans', sans-serif\",\n    fontWeight: 400,\n    fontSize: \"12px\",\n    lineHeight: \"18px\",\n    color: \"#DDDFE0\",\n    textAlign: \"left\",\n    whiteSpace: \"nowrap\",\n    margin: 0,\n  };\n\n  return (\n    <div style={containerStyle}>\n      <div style={contentStyle}>\n        <div style={histogramStyle}>\n          <svg\n            width=\"32\"\n            height={barHeight}\n            viewBox={`0 0 32 ${barHeight}`}\n            style={{ display: \"block\" }}\n          >\n            {/* Background bar (max value) */}\n            <rect\n              x=\"0\"\n              y={barHeight - maxBarHeight}\n              width=\"32\"\n              height={maxBarHeight}\n              fill=\"#D3D64E\"\n              rx=\"2\"\n            />\n            {/* Foreground bar (relative value) with animation */}\n            <rect\n              x=\"0\"\n              y={barHeight - currentRelativeBarHeight}\n              width=\"32\"\n              height={currentRelativeBarHeight}\n              fill=\"#C0C402\"\n              rx=\"2\"\n            />\n          </svg>\n        </div>\n        <div style={textContainerStyle}>\n          <div style={valueContainerStyle}>\n            <p style={valueStyle}>{value}</p>\n            <p style={unitStyle}>{unit}</p>\n          </div>\n          <div>\n            <p style={labelStyle}>{label}</p>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["_a","maxValue","relativeValue","value","unit","label","_b","backgroundColor","_c","barHeight","_d","width","_e","useState","animatedHeight","setAnimatedHeight","_f","isAnimating","setIsAnimating","previousValueRef","useRef","isInitialMount","relativePercentage","Math","min","maxBarHeight","currentRelativeBarHeight","useEffect","targetHeight","current","startTime_1","Date","now","animate_1","elapsed","progress","easeOutQuart","pow","requestAnimationFrame","previousHeight_1","startTime_2","animate_2","containerStyle","position","concat","height","padding","histogramStyle","_jsx","jsx","style","children","_jsxs","display","flexDirection","alignItems","gap","viewBox","x","y","fill","rx","textAlign","fontFamily","fontWeight","fontSize","lineHeight","color","margin","whiteSpace"],"mappings":"uFAqBuD,SAACA,GACtD,IAAAC,EAAQD,EAAAC,SACRC,EAAaF,EAAAE,cACbC,EAAKH,EAAAG,MACLC,EAAIJ,EAAAI,KACJC,EAAKL,EAAAK,MACLC,EAA2BN,EAAAO,gBAA3BA,OAAe,IAAAD,EAAG,UAASA,EAC3BE,EAAAR,EAAAS,UAAAA,OAAS,IAAAD,EAAG,IAAGA,EACfE,EAAUV,EAAAW,MAAVA,OAAK,IAAAD,EAAG,GAAEA,EAGJE,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,GAIxBE,EAAqBC,KAAKC,IAAKtB,EAAgBD,EAAY,IAAK,KAGhEwB,EAAehB,EAEfiB,EAA2BT,EAC7BH,EAF6BQ,EAAqB,IAAOb,EAM7DkB,EAAAA,UAAU,WACR,IAAMC,EACHL,KAAKC,IAAKtB,EAAgBD,EAAY,IAAK,KAAO,IAAOQ,EAG5D,GAAIY,EAAeQ,QAAnB,CACER,EAAeQ,SAAU,EACzBX,GAAe,GACfH,EAAkB,GAClBI,EAAiBU,QAAU3B,EAE3B,IAAM4B,EAAYC,KAAKC,MAGjBC,EAAU,WACd,IAAMC,EAAUH,KAAKC,MAAQF,EACvBK,EAAWZ,KAAKC,IAAIU,EAJX,IAI+B,GAGxCE,EAAe,EAAIb,KAAKc,IAAI,EAAIF,EAAU,GAGhDpB,EADsBa,EAAeQ,GAGjCD,EAAW,EACbG,sBAAsBL,GAEtBf,GAAe,EAEnB,EAEAoB,sBAAsBL,EAEvB,KA5BD,CA+BA,GAC+B,OAA7Bd,EAAiBU,SACjBV,EAAiBU,UAAY3B,EAC7B,CACA,IAAMqC,EACHhB,KAAKC,IAAKL,EAAiBU,QAAU5B,EAAY,IAAK,KAAO,IAC9DQ,EACFS,GAAe,GACfH,EAAkBwB,GAElB,IAAMC,EAAYT,KAAKC,MAGjBS,EAAU,WACd,IAAMP,EAAUH,KAAKC,MAAQQ,EACvBL,EAAWZ,KAAKC,IAAIU,EAJX,IAI+B,GAGxCE,EAAe,EAAIb,KAAKc,IAAI,EAAIF,EAAU,GAIhDpB,EADEwB,GAAkBX,EAAeW,GAAkBH,GAGjDD,EAAW,EACbG,sBAAsBG,GAEtBvB,GAAe,EAEnB,EAEAoB,sBAAsBG,EACvB,MAAuC,OAA7BtB,EAAiBU,SAE1Bd,EAAkBa,GAGpBT,EAAiBU,QAAU3B,CAxC1B,CAyCF,EAAE,CAACA,EAAeD,EAAUQ,IAC7B,IAAMiC,EAAsC,CAC1CnC,gBAAeA,EACfoC,SAAU,WACVhC,MAAO,GAAGiC,OAAAjC,EAAS,MACnBkC,OAAQ,OACRC,QAAS,UAWLC,EAAsC,CAC1CF,OAAQ,GAAGD,OAAAnC,EAAa,MACxBE,MAAO,OACPgC,SAAU,YAqDZ,OACEK,EAAAC,IAAA,MAAA,CAAKC,MAAOR,EAAcS,SACxBC,OAAK,MAAA,CAAAF,MAlEiC,CACxCG,QAAS,OACTC,cAAe,SACfC,WAAY,SACZC,IAAK,OACL7C,MAAO,QA8DHwC,SAAA,CAAAH,EAAAC,IAAA,MAAA,CAAKC,MAAOH,EACVI,SAAAC,EAAAA,KAAA,MAAA,CACEzC,MAAM,KACNkC,OAAQpC,EACRgD,QAAS,UAAAb,OAAUnC,GACnByC,MAAO,CAAEG,QAAS,SAASF,SAAA,CAG3BH,EAAAA,IACE,OAAA,CAAAU,EAAE,IACFC,EAAGlD,EAAYgB,EACfd,MAAM,KACNkC,OAAQpB,EACRmC,KAAK,UACLC,GAAG,MAGLb,EAAAC,IAAA,OAAA,CACES,EAAE,IACFC,EAAGlD,EAAYiB,EACff,MAAM,KACNkC,OAAQnB,EACRkC,KAAK,UACLC,GAAG,WAITT,EAAAA,KAAA,MAAA,CAAKF,MAzEqC,CAC9CG,QAAS,OACTC,cAAe,SACfC,WAAY,SACZC,IAAK,MACL7C,MAAO,QAqEDwC,SAAA,CAAAC,EAAAA,KAAA,MAAA,CAAKF,MAlEoC,CAC/CY,UAAW,SACXnD,MAAO,QAgE8BwC,SAAA,CAC7BH,EAAGC,IAAA,IAAA,CAAAC,MA9D2B,CACtCa,WAAY,0BACZC,WAAY,IACZC,SAAU,OACVC,WAAY,OACZC,MAAO,UACPC,OAAQ,EACRf,QAAS,SAuDmBF,SAAGhD,IACvB6C,MAAA,IAAA,CAAGE,MArD0B,CACrCa,WAAY,0BACZC,WAAY,IACZC,SAAU,OACVE,MAAO,UACPC,OAAQ,EACRf,QAAS,SA+CqBF,SAAA/C,OAExB4C,EAAAC,IAAA,MAAA,CAAAE,SACEH,EAAGC,IAAA,IAAA,CAAAC,MA/C2B,CACtCa,WAAY,0BACZC,WAAY,IACZC,SAAU,OACVC,WAAY,OACZC,MAAO,UACPL,UAAW,OACXO,WAAY,SACZD,OAAQ,GAuCoBjB,SAAG9C,aAMnC"}
+{"version":3,"file":"index.js","sources":["../src/components/Histogramme.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from \"react\";\nimport \"./Histogramme.css\";\n\ninterface HistogrammeProps {\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  /** Value to display in text */\n  value: number;\n  /** Unit label (e.g., \"MWh\") */\n  unit: string;\n  /** Description label (e.g., \"Soutirage\") */\n  label: string;\n  /** Background color of the container */\n  backgroundColor?: string;\n  /** Height of the histogram bar in pixels */\n  barHeight?: number;\n}\n\nexport const Histogramme: React.FC<HistogrammeProps> = ({\n  max,\n  relative,\n  value,\n  unit,\n  label,\n  barHeight = 103,\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=\"histogramme-container\"\n    >\n      <div className=\"histogramme-content\">\n        <div \n          className=\"histogramme-bar\"\n          style={{\n            height: `${barHeight}px`,\n            width: \"32px\"\n          }}\n        >\n          <svg\n            width=\"32\"\n            height={barHeight}\n            viewBox={`0 0 32 ${barHeight}`}\n            className=\"histogramme-svg\"\n          >\n            {/* Background bar (max value) */}\n            <rect\n              x=\"0\"\n              y={barHeight - maxBarHeight}\n              width=\"32\"\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=\"32\"\n              height={currentRelativeBarHeight}\n              fill={relative.color}\n              rx=\"2\"\n            />\n          </svg>\n        </div>\n        <div className=\"histogramme-text-container\">\n          <div className=\"histogramme-value-container\">\n            <p className=\"histogramme-value\">{value}</p>\n            <p className=\"histogramme-unit\">{unit}</p>\n          </div>\n          <div>\n            <p className=\"histogramme-label\">{label}</p>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["_a","max","relative","value","unit","label","_b","barHeight","_c","useState","animatedHeight","setAnimatedHeight","_d","isAnimating","setIsAnimating","previousValueRef","useRef","isInitialMount","relativePercentage","Math","min","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","children","viewBox","x","y","fill","color","rx"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rte-utils",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "description": "React components library in TypeScript for agigox projects",
   "type": "module",
   "main": "dist/index.js",
@@ -45,6 +45,7 @@
     "jest": "^29.6.0",
     "rollup": "^3.26.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
     "tslib": "^2.8.1",
     "typescript": "^5.1.0"
   },