rte-utils 1.1.0 → 1.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +45 -38
- package/dist/components/Histogram.d.ts +22 -0
- package/dist/components/Histogramme.d.ts +16 -16
- package/dist/components/index.d.ts +1 -1
- package/dist/index.css +1 -1
- package/dist/index.esm.css +1 -1
- package/dist/index.esm.js +1 -1
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +4 -1
package/README.md
CHANGED
|
@@ -23,19 +23,25 @@ import 'rte-utils/dist/index.css'; // Import the CSS styles
|
|
|
23
23
|
|
|
24
24
|
```tsx
|
|
25
25
|
import React from 'react';
|
|
26
|
-
import {
|
|
26
|
+
import { Histogram } from 'rte-utils';
|
|
27
27
|
import 'rte-utils/dist/index.css';
|
|
28
28
|
|
|
29
29
|
function App() {
|
|
30
30
|
return (
|
|
31
31
|
<div>
|
|
32
|
-
<
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
32
|
+
<Histogram
|
|
33
|
+
max={{ value: 100, color: "#D3D64E" }}
|
|
34
|
+
relative={{ value: 56, color: "#C0C402" }}
|
|
35
|
+
barWidth={32}
|
|
36
|
+
>
|
|
37
|
+
<div className="histogram-value-container">
|
|
38
|
+
<p className="histogram-value">56</p>
|
|
39
|
+
<p className="histogram-unit">MWh</p>
|
|
40
|
+
</div>
|
|
41
|
+
<div>
|
|
42
|
+
<p className="histogram-label">Soutirage</p>
|
|
43
|
+
</div>
|
|
44
|
+
</Histogram>
|
|
39
45
|
</div>
|
|
40
46
|
);
|
|
41
47
|
}
|
|
@@ -47,7 +53,7 @@ export default App;
|
|
|
47
53
|
|
|
48
54
|
```tsx
|
|
49
55
|
import React, { useState } from 'react';
|
|
50
|
-
import {
|
|
56
|
+
import { Histogram } from 'rte-utils';
|
|
51
57
|
import 'rte-utils/dist/index.css';
|
|
52
58
|
|
|
53
59
|
function EnergyDashboard() {
|
|
@@ -55,16 +61,20 @@ function EnergyDashboard() {
|
|
|
55
61
|
|
|
56
62
|
return (
|
|
57
63
|
<div style={{ display: 'flex', gap: '1rem' }}>
|
|
58
|
-
<
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
value={currentValue}
|
|
62
|
-
unit="MWh"
|
|
63
|
-
label="Consommation"
|
|
64
|
-
backgroundColor="#0066cc"
|
|
64
|
+
<Histogram
|
|
65
|
+
max={{ value: 100, color: "#D3D64E" }}
|
|
66
|
+
relative={{ value: currentValue, color: "#C0C402" }}
|
|
65
67
|
barHeight={120}
|
|
66
|
-
|
|
67
|
-
|
|
68
|
+
barWidth={40}
|
|
69
|
+
>
|
|
70
|
+
<div className="histogram-value-container">
|
|
71
|
+
<p className="histogram-value">{currentValue}</p>
|
|
72
|
+
<p className="histogram-unit">MWh</p>
|
|
73
|
+
</div>
|
|
74
|
+
<div>
|
|
75
|
+
<p className="histogram-label">Consommation</p>
|
|
76
|
+
</div>
|
|
77
|
+
</Histogram>
|
|
68
78
|
|
|
69
79
|
<button onClick={() => setCurrentValue(prev => prev + 10)}>
|
|
70
80
|
Increase (+10)
|
|
@@ -76,7 +86,7 @@ function EnergyDashboard() {
|
|
|
76
86
|
|
|
77
87
|
## Components
|
|
78
88
|
|
|
79
|
-
###
|
|
89
|
+
### Histogram
|
|
80
90
|
|
|
81
91
|
A histogram component with smooth animations for energy data visualization.
|
|
82
92
|
|
|
@@ -84,22 +94,19 @@ A histogram component with smooth animations for energy data visualization.
|
|
|
84
94
|
|
|
85
95
|
| Prop | Type | Required | Default | Description |
|
|
86
96
|
|------|------|----------|---------|-------------|
|
|
87
|
-
| `
|
|
88
|
-
| `
|
|
89
|
-
| `value` | `number` | ✅ | - | Value to display in text |
|
|
90
|
-
| `unit` | `string` | ✅ | - | Unit label (e.g., "MWh") |
|
|
91
|
-
| `label` | `string` | ✅ | - | Description label (e.g., "Soutirage") |
|
|
92
|
-
| `backgroundColor` | `string` | ❌ | `#005896` | Background color of the container |
|
|
97
|
+
| `max` | `{ value: number; color: string }` | ✅ | - | Maximum value configuration with value and color |
|
|
98
|
+
| `relative` | `{ value: number; color: string }` | ✅ | - | Relative/current value configuration with value and color |
|
|
93
99
|
| `barHeight` | `number` | ❌ | `103` | Height of the histogram bar in pixels |
|
|
94
|
-
| `
|
|
100
|
+
| `barWidth` | `number` | ❌ | `32` | Width of the histogram bar in pixels |
|
|
101
|
+
| `children` | `React.ReactNode` | ❌ | - | Child components (typically text content) |
|
|
95
102
|
|
|
96
103
|
#### Features
|
|
97
104
|
|
|
98
105
|
- **Smooth animations**: 2-second Chart.js-style transitions
|
|
99
106
|
- **Incremental updates**: Animations from previous to new values (not from 0)
|
|
100
|
-
- **
|
|
101
|
-
- Background bar
|
|
102
|
-
- Foreground bar
|
|
107
|
+
- **Dynamic two-color visualization**:
|
|
108
|
+
- Background bar color defined by `max.color` represents the maximum value
|
|
109
|
+
- Foreground bar color defined by `relative.color` represents the relative value
|
|
103
110
|
- **Customizable**: Colors, dimensions, and styling options
|
|
104
111
|
- **TypeScript support**: Full type definitions included
|
|
105
112
|
|
|
@@ -113,15 +120,15 @@ import 'rte-utils/dist/index.css';
|
|
|
113
120
|
|
|
114
121
|
You can override the default styles by targeting the CSS classes:
|
|
115
122
|
|
|
116
|
-
- `.
|
|
117
|
-
- `.
|
|
118
|
-
- `.
|
|
119
|
-
- `.
|
|
120
|
-
- `.
|
|
121
|
-
- `.
|
|
122
|
-
- `.
|
|
123
|
-
- `.
|
|
124
|
-
- `.
|
|
123
|
+
- `.histogram-container`
|
|
124
|
+
- `.histogram-content`
|
|
125
|
+
- `.histogram-bar`
|
|
126
|
+
- `.histogram-svg`
|
|
127
|
+
- `.histogram-text-container`
|
|
128
|
+
- `.histogram-value-container`
|
|
129
|
+
- `.histogram-value`
|
|
130
|
+
- `.histogram-unit`
|
|
131
|
+
- `.histogram-label`
|
|
125
132
|
|
|
126
133
|
## License
|
|
127
134
|
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./Histogram.css";
|
|
3
|
+
interface HistogramProps {
|
|
4
|
+
/** Maximum value configuration with value and color */
|
|
5
|
+
max: {
|
|
6
|
+
value: number;
|
|
7
|
+
color: string;
|
|
8
|
+
};
|
|
9
|
+
/** Relative/current value configuration with value and color */
|
|
10
|
+
relative: {
|
|
11
|
+
value: number;
|
|
12
|
+
color: string;
|
|
13
|
+
};
|
|
14
|
+
/** Height of the histogram bar in pixels */
|
|
15
|
+
barHeight?: number;
|
|
16
|
+
/** Width of the histogram bar in pixels */
|
|
17
|
+
barWidth?: number;
|
|
18
|
+
/** Child components (typically text content) */
|
|
19
|
+
children?: React.ReactNode;
|
|
20
|
+
}
|
|
21
|
+
export declare const Histogram: React.FC<HistogramProps>;
|
|
22
|
+
export {};
|
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import "./Histogramme.css";
|
|
3
|
-
interface
|
|
4
|
-
/** Maximum value
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
value
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
/** Background color of the container */
|
|
15
|
-
backgroundColor?: string;
|
|
3
|
+
interface HistogramProps {
|
|
4
|
+
/** Maximum value configuration with value and color */
|
|
5
|
+
max: {
|
|
6
|
+
value: number;
|
|
7
|
+
color: string;
|
|
8
|
+
};
|
|
9
|
+
/** Relative/current value configuration with value and color */
|
|
10
|
+
relative: {
|
|
11
|
+
value: number;
|
|
12
|
+
color: string;
|
|
13
|
+
};
|
|
16
14
|
/** Height of the histogram bar in pixels */
|
|
17
15
|
barHeight?: number;
|
|
18
|
-
/** Width of the
|
|
19
|
-
|
|
16
|
+
/** Width of the histogram bar in pixels */
|
|
17
|
+
barWidth?: number;
|
|
18
|
+
/** Child components (typically text content) */
|
|
19
|
+
children?: React.ReactNode;
|
|
20
20
|
}
|
|
21
|
-
export declare const
|
|
21
|
+
export declare const Histogram: React.FC<HistogramProps>;
|
|
22
22
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export { Histogram } from './Histogram';
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap");*{font-family:Open Sans,sans-serif}.histogram-container{border:3px solid #2c2f33;height:auto;max-width:54px;position:relative}.histogram-content{align-items:center;display:flex;flex-direction:column;gap:8px;width:100%}.histogram-bar{position:relative}.histogram-svg{display:block}.histogram-text-container{align-items:center;display:flex;flex-direction:column;gap:0;width:100%}.histogram-value-container{text-align:center;width:40px}.histogram-value{font-size:16px;line-height:14px}.histogram-unit,.histogram-value{color:#000;display:block;font-weight:600;margin:0}.histogram-unit{font-size:12px}.histogram-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
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap");*{font-family:Open Sans,sans-serif}.histogram-container{border:3px solid #2c2f33;height:auto;max-width:54px;position:relative}.histogram-content{align-items:center;display:flex;flex-direction:column;gap:8px;width:100%}.histogram-bar{position:relative}.histogram-svg{display:block}.histogram-text-container{align-items:center;display:flex;flex-direction:column;gap:0;width:100%}.histogram-value-container{text-align:center;width:40px}.histogram-value{font-size:16px;line-height:14px}.histogram-unit,.histogram-value{color:#000;display:block;font-weight:600;margin:0}.histogram-unit{font-size:12px}.histogram-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
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e,jsxs as
|
|
1
|
+
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useState as a,useRef as r,useEffect as i}from"react";var n=function(n){var c=n.max,o=n.relative,l=n.barHeight,h=void 0===l?103:l,u=n.barWidth,m=void 0===u?32:u,v=n.children,s=a(0),d=s[0],g=s[1],w=a(!1),x=w[0],f=w[1],p=r(null),M=r(!0),N=Math.min(o.value/c.value*100,100),q=h,A=x?d:N/100*h;return i(function(){var e=Math.min(o.value/c.value*100,100)/100*h;if(M.current){M.current=!1,f(!0),g(0),p.current=o.value;var t=Date.now(),a=function(){var r=Date.now()-t,i=Math.min(r/1e3,1),n=1-Math.pow(1-i,4);g(e*n),i<1?requestAnimationFrame(a):f(!1)};requestAnimationFrame(a)}else{if(null!==p.current&&p.current!==o.value){var r=Math.min(p.current/c.value*100,100)/100*h;f(!0),g(r);var i=Date.now(),n=function(){var t=Date.now()-i,a=Math.min(t/2e3,1),c=1-Math.pow(1-a,4);g(r+(e-r)*c),a<1?requestAnimationFrame(n):f(!1)};requestAnimationFrame(n)}else null===p.current&&g(e);p.current=o.value}},[o.value,c.value,h]),e("div",{className:"histogram-container",children:t("div",{className:"histogram-content",children:[e("div",{className:"histogram-bar",style:{height:"".concat(h,"px"),width:"".concat(m,"px")},children:t("svg",{width:m,height:h,viewBox:"0 0 ".concat(m," ").concat(h),className:"histogram-svg",children:[e("rect",{x:"0",y:h-q,width:m,height:q,fill:c.color,rx:"2"}),e("rect",{x:"0",y:h-A,width:m,height:A,fill:o.color,rx:"2"})]})}),v&&e("div",{className:"histogram-text-container",children:v})]})})};export{n as Histogram};
|
|
2
2
|
//# sourceMappingURL=index.esm.js.map
|
package/dist/index.esm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.esm.js","sources":["../src/components/
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":["../src/components/Histogram.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from \"react\";\nimport \"./Histogram.css\";\n\ninterface HistogramProps {\n /** Maximum value configuration with value and color */\n max: {\n value: number;\n color: string;\n };\n /** Relative/current value configuration with value and color */\n relative: {\n value: number;\n color: string;\n };\n /** Height of the histogram bar in pixels */\n barHeight?: number;\n /** Width of the histogram bar in pixels */\n barWidth?: number;\n /** Child components (typically text content) */\n children?: React.ReactNode;\n}\n\nexport const Histogram: React.FC<HistogramProps> = ({\n max,\n relative,\n barHeight = 103,\n barWidth = 32,\n children,\n}) => {\n // Animation state\n const [animatedHeight, setAnimatedHeight] = useState(0);\n const [isAnimating, setIsAnimating] = useState(false);\n const previousValueRef = useRef<number | null>(null);\n const isInitialMount = useRef(true);\n\n // Calculate the height percentages for the two bars\n const relativePercentage = Math.min((relative.value / max.value) * 100, 100);\n\n // Calculate actual heights in pixels\n const maxBarHeight = barHeight;\n const targetRelativeBarHeight = (relativePercentage / 100) * barHeight;\n const currentRelativeBarHeight = isAnimating\n ? animatedHeight\n : targetRelativeBarHeight;\n\n // Animation effect\n useEffect(() => {\n const targetHeight =\n (Math.min((relative.value / max.value) * 100, 100) / 100) * barHeight;\n\n // On initial mount, start from 0\n if (isInitialMount.current) {\n isInitialMount.current = false;\n setIsAnimating(true);\n setAnimatedHeight(0);\n previousValueRef.current = relative.value;\n\n const startTime = Date.now();\n const duration = 1000; // 2 seconds\n\n const animate = () => {\n const elapsed = Date.now() - startTime;\n const progress = Math.min(elapsed / duration, 1);\n\n // Chart.js-like easing function (easeOutQuart)\n const easeOutQuart = 1 - Math.pow(1 - progress, 4);\n\n const currentHeight = targetHeight * easeOutQuart;\n setAnimatedHeight(currentHeight);\n\n if (progress < 1) {\n requestAnimationFrame(animate);\n } else {\n setIsAnimating(false);\n }\n };\n\n requestAnimationFrame(animate);\n return;\n }\n\n // For subsequent updates, animate from previous value to new value\n if (\n previousValueRef.current !== null &&\n previousValueRef.current !== relative.value\n ) {\n const previousHeight =\n (Math.min((previousValueRef.current / max.value) * 100, 100) / 100) *\n barHeight;\n setIsAnimating(true);\n setAnimatedHeight(previousHeight);\n\n const startTime = Date.now();\n const duration = 2000; // 2 seconds\n\n const animate = () => {\n const elapsed = Date.now() - startTime;\n const progress = Math.min(elapsed / duration, 1);\n\n // Chart.js-like easing function (easeOutQuart)\n const easeOutQuart = 1 - Math.pow(1 - progress, 4);\n\n const currentHeight =\n previousHeight + (targetHeight - previousHeight) * easeOutQuart;\n setAnimatedHeight(currentHeight);\n\n if (progress < 1) {\n requestAnimationFrame(animate);\n } else {\n setIsAnimating(false);\n }\n };\n\n requestAnimationFrame(animate);\n } else if (previousValueRef.current === null) {\n // Set initial value without animation if no previous value\n setAnimatedHeight(targetHeight);\n }\n\n previousValueRef.current = relative.value;\n }, [relative.value, max.value, barHeight]);\n\n return (\n <div \n className=\"histogram-container\"\n >\n <div className=\"histogram-content\">\n <div \n className=\"histogram-bar\"\n style={{\n height: `${barHeight}px`,\n width: `${barWidth}px`\n }}\n >\n <svg\n width={barWidth}\n height={barHeight}\n viewBox={`0 0 ${barWidth} ${barHeight}`}\n className=\"histogram-svg\"\n >\n {/* Background bar (max value) */}\n <rect\n x=\"0\"\n y={barHeight - maxBarHeight}\n width={barWidth}\n height={maxBarHeight}\n fill={max.color}\n rx=\"2\"\n />\n {/* Foreground bar (relative value) with animation */}\n <rect\n x=\"0\"\n y={barHeight - currentRelativeBarHeight}\n width={barWidth}\n height={currentRelativeBarHeight}\n fill={relative.color}\n rx=\"2\"\n />\n </svg>\n </div>\n {children && (\n <div className=\"histogram-text-container\">\n {children}\n </div>\n )}\n </div>\n </div>\n );\n};\n"],"names":["Histogram","_a","max","relative","_b","barHeight","_c","barWidth","children","_d","useState","animatedHeight","setAnimatedHeight","_e","isAnimating","setIsAnimating","previousValueRef","useRef","isInitialMount","relativePercentage","Math","min","value","maxBarHeight","currentRelativeBarHeight","useEffect","targetHeight","current","startTime_1","Date","now","animate_1","elapsed","progress","easeOutQuart","pow","requestAnimationFrame","previousHeight_1","startTime_2","animate_2","_jsx","className","_jsxs","style","height","concat","width","viewBox","x","y","fill","color","rx"],"mappings":"8GAsBO,IAAMA,EAAsC,SAACC,OAClDC,EAAGD,EAAAC,IACHC,EAAQF,EAAAE,SACRC,EAAeH,EAAAI,UAAfA,OAAY,IAAAD,EAAA,MACZE,EAAAL,EAAAM,SAAAA,OAAQ,IAAAD,EAAG,GAAEA,EACbE,EAAQP,EAAAO,SAGFC,EAAsCC,EAAS,GAA9CC,EAAcF,EAAA,GAAEG,EAAiBH,EAAA,GAClCI,EAAgCH,GAAS,GAAxCI,EAAWD,EAAA,GAAEE,EAAcF,EAAA,GAC5BG,EAAmBC,EAAsB,MACzCC,EAAiBD,GAAO,GAGxBE,EAAqBC,KAAKC,IAAKlB,EAASmB,MAAQpB,EAAIoB,MAAS,IAAK,KAGlEC,EAAelB,EAEfmB,EAA2BV,EAC7BH,EAF6BQ,EAAqB,IAAOd,EAkF7D,OA5EAoB,EAAU,WACR,IAAMC,EACHN,KAAKC,IAAKlB,EAASmB,MAAQpB,EAAIoB,MAAS,IAAK,KAAO,IAAOjB,EAG9D,GAAIa,EAAeS,QAAnB,CACET,EAAeS,SAAU,EACzBZ,GAAe,GACfH,EAAkB,GAClBI,EAAiBW,QAAUxB,EAASmB,MAEpC,IAAMM,EAAYC,KAAKC,MAGjBC,EAAU,WACd,IAAMC,EAAUH,KAAKC,MAAQF,EACvBK,EAAWb,KAAKC,IAAIW,EAJX,IAI+B,GAGxCE,EAAe,EAAId,KAAKe,IAAI,EAAIF,EAAU,GAGhDrB,EADsBc,EAAeQ,GAGjCD,EAAW,EACbG,sBAAsBL,GAEtBhB,GAAe,EAEnB,EAEAqB,sBAAsBL,EAEvB,KA5BD,CA+BA,GAC+B,OAA7Bf,EAAiBW,SACjBX,EAAiBW,UAAYxB,EAASmB,MACtC,CACA,IAAMe,EACHjB,KAAKC,IAAKL,EAAiBW,QAAUzB,EAAIoB,MAAS,IAAK,KAAO,IAC/DjB,EACFU,GAAe,GACfH,EAAkByB,GAElB,IAAMC,EAAYT,KAAKC,MAGjBS,EAAU,WACd,IAAMP,EAAUH,KAAKC,MAAQQ,EACvBL,EAAWb,KAAKC,IAAIW,EAJX,IAI+B,GAGxCE,EAAe,EAAId,KAAKe,IAAI,EAAIF,EAAU,GAIhDrB,EADEyB,GAAkBX,EAAeW,GAAkBH,GAGjDD,EAAW,EACbG,sBAAsBG,GAEtBxB,GAAe,EAEnB,EAEAqB,sBAAsBG,EACvB,MAAuC,OAA7BvB,EAAiBW,SAE1Bf,EAAkBc,GAGpBV,EAAiBW,QAAUxB,EAASmB,KAxCnC,CAyCH,EAAG,CAACnB,EAASmB,MAAOpB,EAAIoB,MAAOjB,IAG7BmC,EACE,MAAA,CAAAC,UAAU,+BAEVC,EAAK,MAAA,CAAAD,UAAU,8BACbD,EACE,MAAA,CAAAC,UAAU,gBACVE,MAAO,CACLC,OAAQ,GAAGC,OAAAxC,EAAa,MACxByC,MAAO,GAAGD,OAAAtC,EAAY,OAGxBC,SAAAkC,EAAA,MAAA,CACEI,MAAOvC,EACPqC,OAAQvC,EACR0C,QAAS,OAAOF,OAAAtC,cAAYF,GAC5BoC,UAAU,gBAAejC,SAAA,CAGzBgC,EACE,OAAA,CAAAQ,EAAE,IACFC,EAAG5C,EAAYkB,EACfuB,MAAOvC,EACPqC,OAAQrB,EACR2B,KAAMhD,EAAIiD,MACVC,GAAG,MAGLZ,UACEQ,EAAE,IACFC,EAAG5C,EAAYmB,EACfsB,MAAOvC,EACPqC,OAAQpB,EACR0B,KAAM/C,EAASgD,MACfC,GAAG,WAIR5C,GACCgC,SAAKC,UAAU,2BACZjC,SAAAA,QAMb"}
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),t=require("react");exports.
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),t=require("react");exports.Histogram=function(a){var r=a.max,i=a.relative,n=a.barHeight,s=void 0===n?103:n,c=a.barWidth,u=void 0===c?32:c,l=a.children,o=t.useState(0),h=o[0],v=o[1],m=t.useState(!1),x=m[0],d=m[1],g=t.useRef(null),f=t.useRef(!0),w=Math.min(i.value/r.value*100,100),j=s,M=x?h:w/100*s;return t.useEffect(function(){var e=Math.min(i.value/r.value*100,100)/100*s;if(f.current){f.current=!1,d(!0),v(0),g.current=i.value;var t=Date.now(),a=function(){var r=Date.now()-t,i=Math.min(r/1e3,1),n=1-Math.pow(1-i,4);v(e*n),i<1?requestAnimationFrame(a):d(!1)};requestAnimationFrame(a)}else{if(null!==g.current&&g.current!==i.value){var n=Math.min(g.current/r.value*100,100)/100*s;d(!0),v(n);var c=Date.now(),u=function(){var t=Date.now()-c,a=Math.min(t/2e3,1),r=1-Math.pow(1-a,4);v(n+(e-n)*r),a<1?requestAnimationFrame(u):d(!1)};requestAnimationFrame(u)}else null===g.current&&v(e);g.current=i.value}},[i.value,r.value,s]),e.jsx("div",{className:"histogram-container",children:e.jsxs("div",{className:"histogram-content",children:[e.jsx("div",{className:"histogram-bar",style:{height:"".concat(s,"px"),width:"".concat(u,"px")},children:e.jsxs("svg",{width:u,height:s,viewBox:"0 0 ".concat(u," ").concat(s),className:"histogram-svg",children:[e.jsx("rect",{x:"0",y:s-j,width:u,height:j,fill:r.color,rx:"2"}),e.jsx("rect",{x:"0",y:s-M,width:u,height:M,fill:i.color,rx:"2"})]})}),l&&e.jsx("div",{className:"histogram-text-container",children:l})]})})};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/components/
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/components/Histogram.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from \"react\";\nimport \"./Histogram.css\";\n\ninterface HistogramProps {\n /** Maximum value configuration with value and color */\n max: {\n value: number;\n color: string;\n };\n /** Relative/current value configuration with value and color */\n relative: {\n value: number;\n color: string;\n };\n /** Height of the histogram bar in pixels */\n barHeight?: number;\n /** Width of the histogram bar in pixels */\n barWidth?: number;\n /** Child components (typically text content) */\n children?: React.ReactNode;\n}\n\nexport const Histogram: React.FC<HistogramProps> = ({\n max,\n relative,\n barHeight = 103,\n barWidth = 32,\n children,\n}) => {\n // Animation state\n const [animatedHeight, setAnimatedHeight] = useState(0);\n const [isAnimating, setIsAnimating] = useState(false);\n const previousValueRef = useRef<number | null>(null);\n const isInitialMount = useRef(true);\n\n // Calculate the height percentages for the two bars\n const relativePercentage = Math.min((relative.value / max.value) * 100, 100);\n\n // Calculate actual heights in pixels\n const maxBarHeight = barHeight;\n const targetRelativeBarHeight = (relativePercentage / 100) * barHeight;\n const currentRelativeBarHeight = isAnimating\n ? animatedHeight\n : targetRelativeBarHeight;\n\n // Animation effect\n useEffect(() => {\n const targetHeight =\n (Math.min((relative.value / max.value) * 100, 100) / 100) * barHeight;\n\n // On initial mount, start from 0\n if (isInitialMount.current) {\n isInitialMount.current = false;\n setIsAnimating(true);\n setAnimatedHeight(0);\n previousValueRef.current = relative.value;\n\n const startTime = Date.now();\n const duration = 1000; // 2 seconds\n\n const animate = () => {\n const elapsed = Date.now() - startTime;\n const progress = Math.min(elapsed / duration, 1);\n\n // Chart.js-like easing function (easeOutQuart)\n const easeOutQuart = 1 - Math.pow(1 - progress, 4);\n\n const currentHeight = targetHeight * easeOutQuart;\n setAnimatedHeight(currentHeight);\n\n if (progress < 1) {\n requestAnimationFrame(animate);\n } else {\n setIsAnimating(false);\n }\n };\n\n requestAnimationFrame(animate);\n return;\n }\n\n // For subsequent updates, animate from previous value to new value\n if (\n previousValueRef.current !== null &&\n previousValueRef.current !== relative.value\n ) {\n const previousHeight =\n (Math.min((previousValueRef.current / max.value) * 100, 100) / 100) *\n barHeight;\n setIsAnimating(true);\n setAnimatedHeight(previousHeight);\n\n const startTime = Date.now();\n const duration = 2000; // 2 seconds\n\n const animate = () => {\n const elapsed = Date.now() - startTime;\n const progress = Math.min(elapsed / duration, 1);\n\n // Chart.js-like easing function (easeOutQuart)\n const easeOutQuart = 1 - Math.pow(1 - progress, 4);\n\n const currentHeight =\n previousHeight + (targetHeight - previousHeight) * easeOutQuart;\n setAnimatedHeight(currentHeight);\n\n if (progress < 1) {\n requestAnimationFrame(animate);\n } else {\n setIsAnimating(false);\n }\n };\n\n requestAnimationFrame(animate);\n } else if (previousValueRef.current === null) {\n // Set initial value without animation if no previous value\n setAnimatedHeight(targetHeight);\n }\n\n previousValueRef.current = relative.value;\n }, [relative.value, max.value, barHeight]);\n\n return (\n <div \n className=\"histogram-container\"\n >\n <div className=\"histogram-content\">\n <div \n className=\"histogram-bar\"\n style={{\n height: `${barHeight}px`,\n width: `${barWidth}px`\n }}\n >\n <svg\n width={barWidth}\n height={barHeight}\n viewBox={`0 0 ${barWidth} ${barHeight}`}\n className=\"histogram-svg\"\n >\n {/* Background bar (max value) */}\n <rect\n x=\"0\"\n y={barHeight - maxBarHeight}\n width={barWidth}\n height={maxBarHeight}\n fill={max.color}\n rx=\"2\"\n />\n {/* Foreground bar (relative value) with animation */}\n <rect\n x=\"0\"\n y={barHeight - currentRelativeBarHeight}\n width={barWidth}\n height={currentRelativeBarHeight}\n fill={relative.color}\n rx=\"2\"\n />\n </svg>\n </div>\n {children && (\n <div className=\"histogram-text-container\">\n {children}\n </div>\n )}\n </div>\n </div>\n );\n};\n"],"names":["_a","max","relative","_b","barHeight","_c","barWidth","children","_d","useState","animatedHeight","setAnimatedHeight","_e","isAnimating","setIsAnimating","previousValueRef","useRef","isInitialMount","relativePercentage","Math","min","value","maxBarHeight","currentRelativeBarHeight","useEffect","targetHeight","current","startTime_1","Date","now","animate_1","elapsed","progress","easeOutQuart","pow","requestAnimationFrame","previousHeight_1","startTime_2","animate_2","_jsx","className","_jsxs","jsxs","jsx","style","height","concat","width","viewBox","x","y","fill","color","rx"],"mappings":"qFAsBmD,SAACA,OAClDC,EAAGD,EAAAC,IACHC,EAAQF,EAAAE,SACRC,EAAeH,EAAAI,UAAfA,OAAY,IAAAD,EAAA,MACZE,EAAAL,EAAAM,SAAAA,OAAQ,IAAAD,EAAG,GAAEA,EACbE,EAAQP,EAAAO,SAGFC,EAAsCC,EAAAA,SAAS,GAA9CC,EAAcF,EAAA,GAAEG,EAAiBH,EAAA,GAClCI,EAAgCH,EAAAA,UAAS,GAAxCI,EAAWD,EAAA,GAAEE,EAAcF,EAAA,GAC5BG,EAAmBC,SAAsB,MACzCC,EAAiBD,UAAO,GAGxBE,EAAqBC,KAAKC,IAAKlB,EAASmB,MAAQpB,EAAIoB,MAAS,IAAK,KAGlEC,EAAelB,EAEfmB,EAA2BV,EAC7BH,EAF6BQ,EAAqB,IAAOd,EAkF7D,OA5EAoB,EAAAA,UAAU,WACR,IAAMC,EACHN,KAAKC,IAAKlB,EAASmB,MAAQpB,EAAIoB,MAAS,IAAK,KAAO,IAAOjB,EAG9D,GAAIa,EAAeS,QAAnB,CACET,EAAeS,SAAU,EACzBZ,GAAe,GACfH,EAAkB,GAClBI,EAAiBW,QAAUxB,EAASmB,MAEpC,IAAMM,EAAYC,KAAKC,MAGjBC,EAAU,WACd,IAAMC,EAAUH,KAAKC,MAAQF,EACvBK,EAAWb,KAAKC,IAAIW,EAJX,IAI+B,GAGxCE,EAAe,EAAId,KAAKe,IAAI,EAAIF,EAAU,GAGhDrB,EADsBc,EAAeQ,GAGjCD,EAAW,EACbG,sBAAsBL,GAEtBhB,GAAe,EAEnB,EAEAqB,sBAAsBL,EAEvB,KA5BD,CA+BA,GAC+B,OAA7Bf,EAAiBW,SACjBX,EAAiBW,UAAYxB,EAASmB,MACtC,CACA,IAAMe,EACHjB,KAAKC,IAAKL,EAAiBW,QAAUzB,EAAIoB,MAAS,IAAK,KAAO,IAC/DjB,EACFU,GAAe,GACfH,EAAkByB,GAElB,IAAMC,EAAYT,KAAKC,MAGjBS,EAAU,WACd,IAAMP,EAAUH,KAAKC,MAAQQ,EACvBL,EAAWb,KAAKC,IAAIW,EAJX,IAI+B,GAGxCE,EAAe,EAAId,KAAKe,IAAI,EAAIF,EAAU,GAIhDrB,EADEyB,GAAkBX,EAAeW,GAAkBH,GAGjDD,EAAW,EACbG,sBAAsBG,GAEtBxB,GAAe,EAEnB,EAEAqB,sBAAsBG,EACvB,MAAuC,OAA7BvB,EAAiBW,SAE1Bf,EAAkBc,GAGpBV,EAAiBW,QAAUxB,EAASmB,KAxCnC,CAyCH,EAAG,CAACnB,EAASmB,MAAOpB,EAAIoB,MAAOjB,IAG7BmC,EAAAA,IACE,MAAA,CAAAC,UAAU,+BAEVC,EAAKC,KAAA,MAAA,CAAAF,UAAU,8BACbD,EACEI,IAAA,MAAA,CAAAH,UAAU,gBACVI,MAAO,CACLC,OAAQ,GAAGC,OAAA1C,EAAa,MACxB2C,MAAO,GAAGD,OAAAxC,EAAY,OAGxBC,SAAAkC,EAAAA,KAAA,MAAA,CACEM,MAAOzC,EACPuC,OAAQzC,EACR4C,QAAS,OAAOF,OAAAxC,cAAYF,GAC5BoC,UAAU,gBAAejC,SAAA,CAGzBgC,EACEI,IAAA,OAAA,CAAAM,EAAE,IACFC,EAAG9C,EAAYkB,EACfyB,MAAOzC,EACPuC,OAAQvB,EACR6B,KAAMlD,EAAImD,MACVC,GAAG,MAGLd,cACEU,EAAE,IACFC,EAAG9C,EAAYmB,EACfwB,MAAOzC,EACPuC,OAAQtB,EACR4B,KAAMjD,EAASkD,MACfC,GAAG,WAIR9C,GACCgC,EAAAA,WAAKC,UAAU,2BACZjC,SAAAA,QAMb"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "rte-utils",
|
|
3
|
-
"version": "1.1
|
|
3
|
+
"version": "1.2.1",
|
|
4
4
|
"description": "React components library in TypeScript for agigox projects",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -49,6 +49,9 @@
|
|
|
49
49
|
"tslib": "^2.8.1",
|
|
50
50
|
"typescript": "^5.1.0"
|
|
51
51
|
},
|
|
52
|
+
"optionalDependencies": {
|
|
53
|
+
"fsevents": "^2.3.3"
|
|
54
|
+
},
|
|
52
55
|
"repository": {
|
|
53
56
|
"type": "git",
|
|
54
57
|
"url": "git+https://github.com/agigox/rte-utils.git"
|