@adsgency_npm/adsgency-ads-ui 0.1.0-alpha.36 → 0.1.0-alpha.37
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/dist/index.cjs +19 -9
- package/dist/index.js +19 -9
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -6188,6 +6188,7 @@ function AdsLineChart({
|
|
|
6188
6188
|
yAxisProps
|
|
6189
6189
|
}) {
|
|
6190
6190
|
const [activeDataKey, setActiveDataKey] = React48.useState(null);
|
|
6191
|
+
const [dataAnimationPhase, setDataAnimationPhase] = React48.useState("idle");
|
|
6191
6192
|
const chartElementRef = React48.useRef(null);
|
|
6192
6193
|
const previousDataRef = React48.useRef(data);
|
|
6193
6194
|
const hoverHighlightDataKey = series.find((item) => item.activeColor)?.dataKey ?? null;
|
|
@@ -6207,18 +6208,22 @@ function AdsLineChart({
|
|
|
6207
6208
|
wrapperStyle: tooltipWrapperStyle,
|
|
6208
6209
|
...restTooltipProps
|
|
6209
6210
|
} = tooltipProps ?? {};
|
|
6210
|
-
React48.
|
|
6211
|
+
React48.useLayoutEffect(() => {
|
|
6211
6212
|
if (previousDataRef.current === data) {
|
|
6212
6213
|
return;
|
|
6213
6214
|
}
|
|
6214
6215
|
previousDataRef.current = data;
|
|
6215
|
-
|
|
6216
|
-
|
|
6217
|
-
|
|
6218
|
-
|
|
6219
|
-
|
|
6220
|
-
|
|
6221
|
-
);
|
|
6216
|
+
setDataAnimationPhase("from");
|
|
6217
|
+
const frameId = window.requestAnimationFrame(() => {
|
|
6218
|
+
setDataAnimationPhase("to");
|
|
6219
|
+
});
|
|
6220
|
+
const timeoutId = window.setTimeout(() => {
|
|
6221
|
+
setDataAnimationPhase("idle");
|
|
6222
|
+
}, 360);
|
|
6223
|
+
return () => {
|
|
6224
|
+
window.cancelAnimationFrame(frameId);
|
|
6225
|
+
window.clearTimeout(timeoutId);
|
|
6226
|
+
};
|
|
6222
6227
|
}, [data]);
|
|
6223
6228
|
return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
6224
6229
|
"div",
|
|
@@ -6228,7 +6233,12 @@ function AdsLineChart({
|
|
|
6228
6233
|
"data-testid": "ads-line-chart",
|
|
6229
6234
|
ref: chartElementRef,
|
|
6230
6235
|
role: "img",
|
|
6231
|
-
style: {
|
|
6236
|
+
style: {
|
|
6237
|
+
height: getSafeHeight(height),
|
|
6238
|
+
opacity: dataAnimationPhase === "from" ? 0.72 : 1,
|
|
6239
|
+
transform: dataAnimationPhase === "from" ? "translateY(4px)" : "translateY(0)",
|
|
6240
|
+
transition: dataAnimationPhase === "to" ? "opacity 360ms ease-out, transform 360ms ease-out" : "none"
|
|
6241
|
+
},
|
|
6232
6242
|
children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
6233
6243
|
ChartContainer,
|
|
6234
6244
|
{
|
package/dist/index.js
CHANGED
|
@@ -6025,6 +6025,7 @@ function AdsLineChart({
|
|
|
6025
6025
|
yAxisProps
|
|
6026
6026
|
}) {
|
|
6027
6027
|
const [activeDataKey, setActiveDataKey] = React48.useState(null);
|
|
6028
|
+
const [dataAnimationPhase, setDataAnimationPhase] = React48.useState("idle");
|
|
6028
6029
|
const chartElementRef = React48.useRef(null);
|
|
6029
6030
|
const previousDataRef = React48.useRef(data);
|
|
6030
6031
|
const hoverHighlightDataKey = series.find((item) => item.activeColor)?.dataKey ?? null;
|
|
@@ -6044,18 +6045,22 @@ function AdsLineChart({
|
|
|
6044
6045
|
wrapperStyle: tooltipWrapperStyle,
|
|
6045
6046
|
...restTooltipProps
|
|
6046
6047
|
} = tooltipProps ?? {};
|
|
6047
|
-
React48.
|
|
6048
|
+
React48.useLayoutEffect(() => {
|
|
6048
6049
|
if (previousDataRef.current === data) {
|
|
6049
6050
|
return;
|
|
6050
6051
|
}
|
|
6051
6052
|
previousDataRef.current = data;
|
|
6052
|
-
|
|
6053
|
-
|
|
6054
|
-
|
|
6055
|
-
|
|
6056
|
-
|
|
6057
|
-
|
|
6058
|
-
);
|
|
6053
|
+
setDataAnimationPhase("from");
|
|
6054
|
+
const frameId = window.requestAnimationFrame(() => {
|
|
6055
|
+
setDataAnimationPhase("to");
|
|
6056
|
+
});
|
|
6057
|
+
const timeoutId = window.setTimeout(() => {
|
|
6058
|
+
setDataAnimationPhase("idle");
|
|
6059
|
+
}, 360);
|
|
6060
|
+
return () => {
|
|
6061
|
+
window.cancelAnimationFrame(frameId);
|
|
6062
|
+
window.clearTimeout(timeoutId);
|
|
6063
|
+
};
|
|
6059
6064
|
}, [data]);
|
|
6060
6065
|
return /* @__PURE__ */ jsx55(
|
|
6061
6066
|
"div",
|
|
@@ -6065,7 +6070,12 @@ function AdsLineChart({
|
|
|
6065
6070
|
"data-testid": "ads-line-chart",
|
|
6066
6071
|
ref: chartElementRef,
|
|
6067
6072
|
role: "img",
|
|
6068
|
-
style: {
|
|
6073
|
+
style: {
|
|
6074
|
+
height: getSafeHeight(height),
|
|
6075
|
+
opacity: dataAnimationPhase === "from" ? 0.72 : 1,
|
|
6076
|
+
transform: dataAnimationPhase === "from" ? "translateY(4px)" : "translateY(0)",
|
|
6077
|
+
transition: dataAnimationPhase === "to" ? "opacity 360ms ease-out, transform 360ms ease-out" : "none"
|
|
6078
|
+
},
|
|
6069
6079
|
children: /* @__PURE__ */ jsx55(
|
|
6070
6080
|
ChartContainer,
|
|
6071
6081
|
{
|