rte-utils 1.0.0 → 1.1.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
+        maxValue={100}
+        relativeValue={56}
+        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
+        maxValue={100}
+        relativeValue={currentValue}
+        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 |
+|------|------|----------|---------|-------------|
+| `maxValue` | `number` | ✅ | - | Maximum value for the bar chart |
+| `relativeValue` | `number` | ✅ | - | Relative/current value to compare against max |
+| `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)
+- **Two-color visualization**: 
+  - Background bar (`#D3D64E`) represents the maximum value
+  - Foreground bar (`#C0C402`) 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,4 +1,5 @@
 import React from "react";
+import "./Histogramme.css";
 interface HistogrammeProps {
     /** Maximum value for the bar chart */
     maxValue: number;

package/dist/index.css

@@ -0,0 +1 @@
+.histogramme-container{height:auto;padding:34px 0;position:relative}.histogramme-content{align-items:center;display:flex;flex-direction:column;gap:16px;width:100%}.histogramme-bar{position:relative}.histogramme-svg{display:block}.histogramme-text-container{align-items:center;display:flex;flex-direction:column;gap:2px;width:100%}.histogramme-value-container{text-align:center;width:40px}.histogramme-value{font-size:16px;line-height:14px}.histogramme-unit,.histogramme-value{color:#fff;display:block;font-family:Open Sans,sans-serif;font-weight:600;margin:0}.histogramme-unit{font-size:12px}.histogramme-label{color:#dddfe0;font-family:Open Sans,sans-serif;font-size:12px;font-weight:400;line-height:18px;margin:0;text-align:left;white-space:nowrap}

package/dist/index.esm.css

@@ -0,0 +1 @@
+.histogramme-container{height:auto;padding:34px 0;position:relative}.histogramme-content{align-items:center;display:flex;flex-direction:column;gap:16px;width:100%}.histogramme-bar{position:relative}.histogramme-svg{display:block}.histogramme-text-container{align-items:center;display:flex;flex-direction:column;gap:2px;width:100%}.histogramme-value-container{text-align:center;width:40px}.histogramme-value{font-size:16px;line-height:14px}.histogramme-unit,.histogramme-value{color:#fff;display:block;font-family:Open Sans,sans-serif;font-weight:600;margin:0}.histogramme-unit{font-size:12px}.histogramme-label{color:#dddfe0;font-family:Open Sans,sans-serif;font-size:12px;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 c=n.maxValue,m=n.relativeValue,l=n.value,o=n.unit,h=n.label,s=n.backgroundColor,u=void 0===s?"#005896":s,d=n.barHeight,v=void 0===d?103:d,g=n.width,w=void 0===g?54:g,x=r(0),p=x[0],f=x[1],N=r(!1),M=N[0],b=N[1],D=t(null),q=t(!0),y=Math.min(m/c*100,100),A=v,C=M?p:y/100*v;return i(function(){var e=Math.min(m/c*100,100)/100*v;if(q.current){q.current=!1,b(!0),f(0),D.current=m;var a=Date.now(),r=function(){var t=Date.now()-a,i=Math.min(t/1e3,1),n=1-Math.pow(1-i,4);f(e*n),i<1?requestAnimationFrame(r):b(!1)};requestAnimationFrame(r)}else{if(null!==D.current&&D.current!==m){var t=Math.min(D.current/c*100,100)/100*v;b(!0),f(t);var i=Date.now(),n=function(){var a=Date.now()-i,r=Math.min(a/2e3,1),c=1-Math.pow(1-r,4);f(t+(e-t)*c),r<1?requestAnimationFrame(n):b(!1)};requestAnimationFrame(n)}else null===D.current&&f(e);D.current=m}},[m,c,v]),e("div",{className:"histogramme-container",style:{backgroundColor:u,width:"".concat(w,"px")},children:a("div",{className:"histogramme-content",children:[e("div",{className:"histogramme-bar",style:{height:"".concat(v,"px"),width:"32px"},children:a("svg",{width:"32",height:v,viewBox:"0 0 32 ".concat(v),className:"histogramme-svg",children:[e("rect",{x:"0",y:v-A,width:"32",height:A,fill:"#D3D64E",rx:"2"}),e("rect",{x:"0",y:v-C,width:"32",height:C,fill:"#C0C402",rx:"2"})]})}),a("div",{className:"histogramme-text-container",children:[a("div",{className:"histogramme-value-container",children:[e("p",{className:"histogramme-value",children:l}),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":"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"}
+{"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 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\n  return (\n    <div \n      className=\"histogramme-container\"\n      style={{ \n        backgroundColor,\n        width: `${width}px`\n      }}\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=\"#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 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","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","_jsx","className","style","concat","children","_jsxs","height","viewBox","x","y","fill","rx"],"mappings":"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"}

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"),t=require("react");exports.Histogramme=function(a){var r=a.maxValue,i=a.relativeValue,n=a.value,s=a.unit,c=a.label,l=a.backgroundColor,m=void 0===l?"#005896":l,o=a.barHeight,h=void 0===o?103:o,u=a.width,d=void 0===u?54:u,v=t.useState(0),x=v[0],g=v[1],j=t.useState(!1),w=j[0],f=j[1],p=t.useRef(null),N=t.useRef(!0),M=Math.min(i/r*100,100),b=h,q=w?x:M/100*h;return t.useEffect(function(){var e=Math.min(i/r*100,100)/100*h;if(N.current){N.current=!1,f(!0),g(0),p.current=i;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!==i){var n=Math.min(p.current/r*100,100)/100*h;f(!0),g(n);var s=Date.now(),c=function(){var t=Date.now()-s,a=Math.min(t/2e3,1),r=1-Math.pow(1-a,4);g(n+(e-n)*r),a<1?requestAnimationFrame(c):f(!1)};requestAnimationFrame(c)}else null===p.current&&g(e);p.current=i}},[i,r,h]),e.jsx("div",{className:"histogramme-container",style:{backgroundColor:m,width:"".concat(d,"px")},children:e.jsxs("div",{className:"histogramme-content",children:[e.jsx("div",{className:"histogramme-bar",style:{height:"".concat(h,"px"),width:"32px"},children:e.jsxs("svg",{width:"32",height:h,viewBox:"0 0 32 ".concat(h),className:"histogramme-svg",children:[e.jsx("rect",{x:"0",y:h-b,width:"32",height:b,fill:"#D3D64E",rx:"2"}),e.jsx("rect",{x:"0",y:h-q,width:"32",height:q,fill:"#C0C402",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:n}),e.jsx("p",{className:"histogramme-unit",children:s})]}),e.jsx("div",{children:e.jsx("p",{className:"histogramme-label",children:c})})]})]})})};
 //# 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 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\n  return (\n    <div \n      className=\"histogramme-container\"\n      style={{ \n        backgroundColor,\n        width: `${width}px`\n      }}\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=\"#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 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","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","_jsx","jsx","className","style","concat","children","_jsxs","jsxs","height","viewBox","x","y","fill","rx"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rte-utils",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "React components library in TypeScript for agigox projects",
   "type": "module",
   "main": "dist/index.js",
@@ -45,366 +45,10 @@
     "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"
   },
-  "dependencies": {
-    "acorn": "^8.15.0",
-    "acorn-jsx": "^5.3.2",
-    "ajv": "^6.12.6",
-    "ansi-escapes": "^4.3.2",
-    "ansi-regex": "^5.0.1",
-    "ansi-styles": "^4.3.0",
-    "anymatch": "^3.1.3",
-    "argparse": "^2.0.1",
-    "array-buffer-byte-length": "^1.0.2",
-    "array-includes": "^3.1.9",
-    "array-union": "^2.1.0",
-    "array.prototype.findlast": "^1.2.5",
-    "array.prototype.flat": "^1.3.3",
-    "array.prototype.flatmap": "^1.3.3",
-    "array.prototype.tosorted": "^1.1.4",
-    "arraybuffer.prototype.slice": "^1.0.4",
-    "async-function": "^1.0.0",
-    "available-typed-arrays": "^1.0.7",
-    "babel-jest": "^29.7.0",
-    "babel-plugin-istanbul": "^6.1.1",
-    "babel-plugin-jest-hoist": "^29.6.3",
-    "babel-preset-current-node-syntax": "^1.1.1",
-    "babel-preset-jest": "^29.6.3",
-    "balanced-match": "^1.0.2",
-    "brace-expansion": "^2.0.2",
-    "braces": "^3.0.3",
-    "browserslist": "^4.25.1",
-    "bser": "^2.1.1",
-    "buffer-from": "^1.1.2",
-    "call-bind": "^1.0.8",
-    "call-bind-apply-helpers": "^1.0.2",
-    "call-bound": "^1.0.4",
-    "callsites": "^3.1.0",
-    "camelcase": "^5.3.1",
-    "caniuse-lite": "^1.0.30001731",
-    "chalk": "^4.1.2",
-    "char-regex": "^1.0.2",
-    "ci-info": "^3.9.0",
-    "cjs-module-lexer": "^1.4.3",
-    "cliui": "^8.0.1",
-    "co": "^4.6.0",
-    "collect-v8-coverage": "^1.0.2",
-    "color-convert": "^2.0.1",
-    "color-name": "^1.1.4",
-    "commander": "^2.20.3",
-    "commondir": "^1.0.1",
-    "concat-map": "^0.0.1",
-    "convert-source-map": "^2.0.0",
-    "create-jest": "^29.7.0",
-    "cross-spawn": "^7.0.6",
-    "csstype": "^3.1.3",
-    "data-view-buffer": "^1.0.2",
-    "data-view-byte-length": "^1.0.2",
-    "data-view-byte-offset": "^1.0.1",
-    "debug": "^4.4.1",
-    "dedent": "^1.6.0",
-    "deep-is": "^0.1.4",
-    "deepmerge": "^4.3.1",
-    "define-data-property": "^1.1.4",
-    "define-properties": "^1.2.1",
-    "detect-newline": "^3.1.0",
-    "diff-sequences": "^29.6.3",
-    "dir-glob": "^3.0.1",
-    "doctrine": "^3.0.0",
-    "dunder-proto": "^1.0.1",
-    "electron-to-chromium": "^1.5.192",
-    "emittery": "^0.13.1",
-    "emoji-regex": "^8.0.0",
-    "error-ex": "^1.3.2",
-    "es-abstract": "^1.24.0",
-    "es-define-property": "^1.0.1",
-    "es-errors": "^1.3.0",
-    "es-iterator-helpers": "^1.2.1",
-    "es-object-atoms": "^1.1.1",
-    "es-set-tostringtag": "^2.1.0",
-    "es-shim-unscopables": "^1.1.0",
-    "es-to-primitive": "^1.3.0",
-    "escalade": "^3.2.0",
-    "escape-string-regexp": "^4.0.0",
-    "eslint-scope": "^7.2.2",
-    "eslint-visitor-keys": "^3.4.3",
-    "espree": "^9.6.1",
-    "esprima": "^4.0.1",
-    "esquery": "^1.6.0",
-    "esrecurse": "^4.3.0",
-    "estraverse": "^5.3.0",
-    "estree-walker": "^2.0.2",
-    "esutils": "^2.0.3",
-    "execa": "^5.1.1",
-    "exit": "^0.1.2",
-    "expect": "^29.7.0",
-    "fast-deep-equal": "^3.1.3",
-    "fast-glob": "^3.3.3",
-    "fast-json-stable-stringify": "^2.1.0",
-    "fast-levenshtein": "^2.0.6",
-    "fastq": "^1.19.1",
-    "fb-watchman": "^2.0.2",
-    "file-entry-cache": "^6.0.1",
-    "fill-range": "^7.1.1",
-    "find-up": "^5.0.0",
-    "flat-cache": "^3.2.0",
-    "flatted": "^3.3.3",
-    "for-each": "^0.3.5",
-    "fs.realpath": "^1.0.0",
-    "fsevents": "^2.3.3",
-    "function-bind": "^1.1.2",
-    "function.prototype.name": "^1.1.8",
-    "functions-have-names": "^1.2.3",
-    "gensync": "^1.0.0-beta.2",
-    "get-caller-file": "^2.0.5",
-    "get-intrinsic": "^1.3.0",
-    "get-package-type": "^0.1.0",
-    "get-proto": "^1.0.1",
-    "get-stream": "^6.0.1",
-    "get-symbol-description": "^1.1.0",
-    "glob": "^8.1.0",
-    "glob-parent": "^6.0.2",
-    "globals": "^13.24.0",
-    "globalthis": "^1.0.4",
-    "globby": "^11.1.0",
-    "gopd": "^1.2.0",
-    "graceful-fs": "^4.2.11",
-    "graphemer": "^1.4.0",
-    "has-bigints": "^1.1.0",
-    "has-flag": "^4.0.0",
-    "has-property-descriptors": "^1.0.2",
-    "has-proto": "^1.2.0",
-    "has-symbols": "^1.1.0",
-    "has-tostringtag": "^1.0.2",
-    "hasown": "^2.0.2",
-    "html-escaper": "^2.0.2",
-    "human-signals": "^2.1.0",
-    "ignore": "^5.3.2",
-    "import-fresh": "^3.3.1",
-    "import-local": "^3.2.0",
-    "imurmurhash": "^0.1.4",
-    "inflight": "^1.0.6",
-    "inherits": "^2.0.4",
-    "internal-slot": "^1.1.0",
-    "is-array-buffer": "^3.0.5",
-    "is-arrayish": "^0.2.1",
-    "is-async-function": "^2.1.1",
-    "is-bigint": "^1.1.0",
-    "is-boolean-object": "^1.2.2",
-    "is-callable": "^1.2.7",
-    "is-core-module": "^2.16.1",
-    "is-data-view": "^1.0.2",
-    "is-date-object": "^1.1.0",
-    "is-extglob": "^2.1.1",
-    "is-finalizationregistry": "^1.1.1",
-    "is-fullwidth-code-point": "^3.0.0",
-    "is-generator-fn": "^2.1.0",
-    "is-generator-function": "^1.1.0",
-    "is-glob": "^4.0.3",
-    "is-map": "^2.0.3",
-    "is-module": "^1.0.0",
-    "is-negative-zero": "^2.0.3",
-    "is-number": "^7.0.0",
-    "is-number-object": "^1.1.1",
-    "is-path-inside": "^3.0.3",
-    "is-reference": "^1.2.1",
-    "is-regex": "^1.2.1",
-    "is-set": "^2.0.3",
-    "is-shared-array-buffer": "^1.0.4",
-    "is-stream": "^2.0.1",
-    "is-string": "^1.1.1",
-    "is-symbol": "^1.1.1",
-    "is-typed-array": "^1.1.15",
-    "is-weakmap": "^2.0.2",
-    "is-weakref": "^1.1.1",
-    "is-weakset": "^2.0.4",
-    "isarray": "^2.0.5",
-    "isexe": "^2.0.0",
-    "istanbul-lib-coverage": "^3.2.2",
-    "istanbul-lib-instrument": "^6.0.3",
-    "istanbul-lib-report": "^3.0.1",
-    "istanbul-lib-source-maps": "^4.0.1",
-    "istanbul-reports": "^3.1.7",
-    "iterator.prototype": "^1.1.5",
-    "jest-changed-files": "^29.7.0",
-    "jest-circus": "^29.7.0",
-    "jest-cli": "^29.7.0",
-    "jest-config": "^29.7.0",
-    "jest-diff": "^29.7.0",
-    "jest-docblock": "^29.7.0",
-    "jest-each": "^29.7.0",
-    "jest-environment-node": "^29.7.0",
-    "jest-get-type": "^29.6.3",
-    "jest-haste-map": "^29.7.0",
-    "jest-leak-detector": "^29.7.0",
-    "jest-matcher-utils": "^29.7.0",
-    "jest-message-util": "^29.7.0",
-    "jest-mock": "^29.7.0",
-    "jest-pnp-resolver": "^1.2.3",
-    "jest-regex-util": "^29.6.3",
-    "jest-resolve": "^29.7.0",
-    "jest-resolve-dependencies": "^29.7.0",
-    "jest-runner": "^29.7.0",
-    "jest-runtime": "^29.7.0",
-    "jest-snapshot": "^29.7.0",
-    "jest-util": "^29.7.0",
-    "jest-validate": "^29.7.0",
-    "jest-watcher": "^29.7.0",
-    "jest-worker": "^29.7.0",
-    "js-tokens": "^4.0.0",
-    "js-yaml": "^4.1.0",
-    "jsesc": "^3.1.0",
-    "json-buffer": "^3.0.1",
-    "json-parse-even-better-errors": "^2.3.1",
-    "json-schema-traverse": "^0.4.1",
-    "json-stable-stringify-without-jsonify": "^1.0.1",
-    "json5": "^2.2.3",
-    "jsx-ast-utils": "^3.3.5",
-    "keyv": "^4.5.4",
-    "kleur": "^3.0.3",
-    "leven": "^3.1.0",
-    "levn": "^0.4.1",
-    "lines-and-columns": "^1.2.4",
-    "locate-path": "^6.0.0",
-    "lodash.merge": "^4.6.2",
-    "loose-envify": "^1.4.0",
-    "lru-cache": "^5.1.1",
-    "magic-string": "^0.30.17",
-    "make-dir": "^4.0.0",
-    "makeerror": "^1.0.12",
-    "math-intrinsics": "^1.1.0",
-    "merge-stream": "^2.0.0",
-    "merge2": "^1.4.1",
-    "micromatch": "^4.0.8",
-    "mimic-fn": "^2.1.0",
-    "minimatch": "^9.0.3",
-    "ms": "^2.1.3",
-    "natural-compare": "^1.4.0",
-    "node-int64": "^0.4.0",
-    "node-releases": "^2.0.19",
-    "normalize-path": "^3.0.0",
-    "npm-run-path": "^4.0.1",
-    "object-assign": "^4.1.1",
-    "object-inspect": "^1.13.4",
-    "object-keys": "^1.1.1",
-    "object.assign": "^4.1.7",
-    "object.entries": "^1.1.9",
-    "object.fromentries": "^2.0.8",
-    "object.values": "^1.2.1",
-    "once": "^1.4.0",
-    "onetime": "^5.1.2",
-    "optionator": "^0.9.4",
-    "own-keys": "^1.0.1",
-    "p-limit": "^3.1.0",
-    "p-locate": "^5.0.0",
-    "p-try": "^2.2.0",
-    "parent-module": "^1.0.1",
-    "parse-json": "^5.2.0",
-    "path-exists": "^4.0.0",
-    "path-is-absolute": "^1.0.1",
-    "path-key": "^3.1.1",
-    "path-parse": "^1.0.7",
-    "path-type": "^4.0.0",
-    "picocolors": "^1.1.1",
-    "picomatch": "^4.0.3",
-    "pirates": "^4.0.7",
-    "pkg-dir": "^4.2.0",
-    "possible-typed-array-names": "^1.1.0",
-    "prelude-ls": "^1.2.1",
-    "pretty-format": "^29.7.0",
-    "prompts": "^2.4.2",
-    "prop-types": "^15.8.1",
-    "punycode": "^2.3.1",
-    "pure-rand": "^6.1.0",
-    "queue-microtask": "^1.2.3",
-    "randombytes": "^2.1.0",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "react-is": "^18.3.1",
-    "reflect.getprototypeof": "^1.0.10",
-    "regexp.prototype.flags": "^1.5.4",
-    "require-directory": "^2.1.1",
-    "resolve": "^1.22.10",
-    "resolve-cwd": "^3.0.0",
-    "resolve-from": "^4.0.0",
-    "resolve.exports": "^2.0.3",
-    "reusify": "^1.1.0",
-    "rimraf": "^3.0.2",
-    "run-parallel": "^1.2.0",
-    "safe-array-concat": "^1.1.3",
-    "safe-buffer": "^5.2.1",
-    "safe-push-apply": "^1.0.0",
-    "safe-regex-test": "^1.1.0",
-    "scheduler": "^0.26.0",
-    "semver": "^7.7.2",
-    "serialize-javascript": "^6.0.2",
-    "set-function-length": "^1.2.2",
-    "set-function-name": "^2.0.2",
-    "set-proto": "^1.0.0",
-    "shebang-command": "^2.0.0",
-    "shebang-regex": "^3.0.0",
-    "side-channel": "^1.1.0",
-    "side-channel-list": "^1.0.0",
-    "side-channel-map": "^1.0.1",
-    "side-channel-weakmap": "^1.0.2",
-    "signal-exit": "^3.0.7",
-    "sisteransi": "^1.0.5",
-    "slash": "^3.0.0",
-    "smob": "^1.5.0",
-    "source-map": "^0.6.1",
-    "source-map-support": "^0.5.13",
-    "sprintf-js": "^1.0.3",
-    "stack-utils": "^2.0.6",
-    "stop-iteration-iterator": "^1.1.0",
-    "string-length": "^4.0.2",
-    "string-width": "^4.2.3",
-    "string.prototype.matchall": "^4.0.12",
-    "string.prototype.repeat": "^1.0.0",
-    "string.prototype.trim": "^1.2.10",
-    "string.prototype.trimend": "^1.0.9",
-    "string.prototype.trimstart": "^1.0.8",
-    "strip-ansi": "^6.0.1",
-    "strip-bom": "^4.0.0",
-    "strip-final-newline": "^2.0.0",
-    "strip-json-comments": "^3.1.1",
-    "supports-color": "^7.2.0",
-    "supports-preserve-symlinks-flag": "^1.0.0",
-    "terser": "^5.43.1",
-    "test-exclude": "^6.0.0",
-    "text-table": "^0.2.0",
-    "tmpl": "^1.0.5",
-    "to-regex-range": "^5.0.1",
-    "ts-api-utils": "^1.4.3",
-    "type-check": "^0.4.0",
-    "type-detect": "^4.0.8",
-    "type-fest": "^0.20.2",
-    "typed-array-buffer": "^1.0.3",
-    "typed-array-byte-length": "^1.0.3",
-    "typed-array-byte-offset": "^1.0.4",
-    "typed-array-length": "^1.0.7",
-    "unbox-primitive": "^1.1.0",
-    "undici-types": "^7.8.0",
-    "update-browserslist-db": "^1.1.3",
-    "uri-js": "^4.4.1",
-    "v8-to-istanbul": "^9.3.0",
-    "walker": "^1.0.8",
-    "which": "^2.0.2",
-    "which-boxed-primitive": "^1.1.1",
-    "which-builtin-type": "^1.2.1",
-    "which-collection": "^1.0.2",
-    "which-typed-array": "^1.1.19",
-    "word-wrap": "^1.2.5",
-    "wrap-ansi": "^7.0.0",
-    "wrappy": "^1.0.2",
-    "write-file-atomic": "^4.0.2",
-    "y18n": "^5.0.8",
-    "yallist": "^3.1.1",
-    "yargs": "^17.7.2",
-    "yargs-parser": "^21.1.1",
-    "yocto-queue": "^0.1.0"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/agigox/rte-utils.git"
@@ -412,5 +56,8 @@
   "bugs": {
     "url": "https://github.com/agigox/rte-utils/issues"
   },
-  "homepage": "https://github.com/agigox/rte-utils#readme"
+  "homepage": "https://github.com/agigox/rte-utils#readme",
+  "dependencies": {
+    "rte-utils": "^1.0.0"
+  }
 }