@adsgency_npm/adsgency-ads-ui 0.1.0-alpha.34 → 0.1.0-alpha.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.cjs +19 -2
  2. package/dist/index.js +19 -2
  3. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -6188,6 +6188,8 @@ function AdsLineChart({
6188
6188
  yAxisProps
6189
6189
  }) {
6190
6190
  const [activeDataKey, setActiveDataKey] = React48.useState(null);
6191
+ const chartElementRef = React48.useRef(null);
6192
+ const previousDataRef = React48.useRef(data);
6191
6193
  const hoverHighlightDataKey = series.find((item) => item.activeColor)?.dataKey ?? null;
6192
6194
  const chartData = React48.useMemo(
6193
6195
  () => data.map((datum) => {
@@ -6205,12 +6207,26 @@ function AdsLineChart({
6205
6207
  wrapperStyle: tooltipWrapperStyle,
6206
6208
  ...restTooltipProps
6207
6209
  } = tooltipProps ?? {};
6210
+ React48.useEffect(() => {
6211
+ if (previousDataRef.current === data) {
6212
+ return;
6213
+ }
6214
+ previousDataRef.current = data;
6215
+ chartElementRef.current?.animate?.(
6216
+ [
6217
+ { opacity: 0.72, transform: "translateY(4px)" },
6218
+ { opacity: 1, transform: "translateY(0)" }
6219
+ ],
6220
+ { duration: 360, easing: "ease-out" }
6221
+ );
6222
+ }, [data]);
6208
6223
  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
6209
6224
  "div",
6210
6225
  {
6211
6226
  "aria-label": ariaLabel ?? "Line chart",
6212
6227
  className: cn("w-full", className),
6213
6228
  "data-testid": "ads-line-chart",
6229
+ ref: chartElementRef,
6214
6230
  role: "img",
6215
6231
  style: { height: getSafeHeight(height) },
6216
6232
  children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
@@ -6316,7 +6332,7 @@ function AdsLineChart({
6316
6332
  dataKey: item.dataKey,
6317
6333
  fill: item.areaProps?.fill ?? color,
6318
6334
  fillOpacity: item.areaProps?.fillOpacity ?? opacity,
6319
- isAnimationActive: item.areaProps?.isAnimationActive ?? true,
6335
+ isAnimationActive: item.areaProps?.isAnimationActive ?? false,
6320
6336
  stroke: item.areaProps?.stroke ?? "none",
6321
6337
  type: item.areaProps?.type ?? curve
6322
6338
  }
@@ -6330,9 +6346,10 @@ function AdsLineChart({
6330
6346
  animationEasing: item.lineProps?.animationEasing ?? "ease-out",
6331
6347
  dataKey: item.dataKey,
6332
6348
  dot: item.lineProps?.dot ?? false,
6333
- isAnimationActive: item.lineProps?.isAnimationActive ?? true,
6349
+ isAnimationActive: item.lineProps?.isAnimationActive ?? false,
6334
6350
  onMouseEnter: () => setActiveDataKey(item.dataKey),
6335
6351
  onMouseLeave: () => setActiveDataKey(null),
6352
+ style: { opacity: 1, ...item.lineProps?.style },
6336
6353
  stroke: activeDataKey === item.dataKey ? item.activeColor ?? "#2196f3" : item.lineProps?.stroke ?? color,
6337
6354
  strokeWidth: item.lineProps?.strokeWidth ?? item.strokeWidth ?? 2,
6338
6355
  type: item.lineProps?.type ?? curve
package/dist/index.js CHANGED
@@ -6025,6 +6025,8 @@ function AdsLineChart({
6025
6025
  yAxisProps
6026
6026
  }) {
6027
6027
  const [activeDataKey, setActiveDataKey] = React48.useState(null);
6028
+ const chartElementRef = React48.useRef(null);
6029
+ const previousDataRef = React48.useRef(data);
6028
6030
  const hoverHighlightDataKey = series.find((item) => item.activeColor)?.dataKey ?? null;
6029
6031
  const chartData = React48.useMemo(
6030
6032
  () => data.map((datum) => {
@@ -6042,12 +6044,26 @@ function AdsLineChart({
6042
6044
  wrapperStyle: tooltipWrapperStyle,
6043
6045
  ...restTooltipProps
6044
6046
  } = tooltipProps ?? {};
6047
+ React48.useEffect(() => {
6048
+ if (previousDataRef.current === data) {
6049
+ return;
6050
+ }
6051
+ previousDataRef.current = data;
6052
+ chartElementRef.current?.animate?.(
6053
+ [
6054
+ { opacity: 0.72, transform: "translateY(4px)" },
6055
+ { opacity: 1, transform: "translateY(0)" }
6056
+ ],
6057
+ { duration: 360, easing: "ease-out" }
6058
+ );
6059
+ }, [data]);
6045
6060
  return /* @__PURE__ */ jsx55(
6046
6061
  "div",
6047
6062
  {
6048
6063
  "aria-label": ariaLabel ?? "Line chart",
6049
6064
  className: cn("w-full", className),
6050
6065
  "data-testid": "ads-line-chart",
6066
+ ref: chartElementRef,
6051
6067
  role: "img",
6052
6068
  style: { height: getSafeHeight(height) },
6053
6069
  children: /* @__PURE__ */ jsx55(
@@ -6153,7 +6169,7 @@ function AdsLineChart({
6153
6169
  dataKey: item.dataKey,
6154
6170
  fill: item.areaProps?.fill ?? color,
6155
6171
  fillOpacity: item.areaProps?.fillOpacity ?? opacity,
6156
- isAnimationActive: item.areaProps?.isAnimationActive ?? true,
6172
+ isAnimationActive: item.areaProps?.isAnimationActive ?? false,
6157
6173
  stroke: item.areaProps?.stroke ?? "none",
6158
6174
  type: item.areaProps?.type ?? curve
6159
6175
  }
@@ -6167,9 +6183,10 @@ function AdsLineChart({
6167
6183
  animationEasing: item.lineProps?.animationEasing ?? "ease-out",
6168
6184
  dataKey: item.dataKey,
6169
6185
  dot: item.lineProps?.dot ?? false,
6170
- isAnimationActive: item.lineProps?.isAnimationActive ?? true,
6186
+ isAnimationActive: item.lineProps?.isAnimationActive ?? false,
6171
6187
  onMouseEnter: () => setActiveDataKey(item.dataKey),
6172
6188
  onMouseLeave: () => setActiveDataKey(null),
6189
+ style: { opacity: 1, ...item.lineProps?.style },
6173
6190
  stroke: activeDataKey === item.dataKey ? item.activeColor ?? "#2196f3" : item.lineProps?.stroke ?? color,
6174
6191
  strokeWidth: item.lineProps?.strokeWidth ?? item.strokeWidth ?? 2,
6175
6192
  type: item.lineProps?.type ?? curve
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@adsgency_npm/adsgency-ads-ui",
3
- "version": "0.1.0-alpha.34",
3
+ "version": "0.1.0-alpha.36",
4
4
  "description": "AdsGency Ads Design System React component library.",
5
5
  "private": false,
6
6
  "type": "module",