[86bypvb0j][d3-chart] line.area got an option to disable interpolatio…

…n of all values
semrush · May 27, 2024 · bcef316 · bcef316
1 parent 6d8c03f
commit bcef316
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 22 deletions.
diff --git a/semcore/d3-chart/CHANGELOG.md b/semcore/d3-chart/CHANGELOG.md
@@ -2,6 +2,13 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [3.45.0] - 2024-05-27
+
+### Changed
+
+- `Line.Area` got an option `autoInterpolate` that allows to disable auto interpolation of all missing values.
+- `Line.Area` data now accepts `interpolateValue` symbol that allows spot interpolation of values if `autoInterpolate` set to `false`.
+
 ## [3.44.1] - 2024-05-24
 
 ### Changed

diff --git a/semcore/d3-chart/src/Line.jsx b/semcore/d3-chart/src/Line.jsx
@@ -136,7 +136,7 @@ function Null(props) {
 function Area(props) {
   const uid = useUID();
   const {
-    Element: SAria,
+    Element: SLineArea,
     styles,
     data,
     hide,
@@ -149,27 +149,54 @@ function Area(props) {
     curve = curveCardinal,
     area,
     patterns,
+    autoInterpolate = true,
   } = props;
   const [xScale, yScale] = scale;
-  const dataToArea = area ?? data.filter((d) => definedData(y0, y1)(d));
-
-  const d3 = d3Area()
-    .curve(curve)
-    .x((data) => xScale(data[x]))
-    .y0((data) => yScale(data[y0]))
-    .y1((data) => yScale(data[y1]));
-
-  return sstyled(styles)(
-    <SAria
-      aria-hidden
-      clipPath={`url(#${uid})`}
-      render='path'
-      hide={hide}
-      color={color}
-      d={d3(dataToArea)}
-      use:duration={`${duration}ms`}
-      patterns={patterns}
-    />,
+  const dataToArea = React.useMemo(() => {
+    if (area) return area;
+    const chunked = data.reduce(
+      (acc, d) => {
+        if (d[y0] === interpolateValue || d[y1] === interpolateValue) return acc;
+        if (definedData(y0, y1)(d)) {
+          acc[acc.length - 1].push(d);
+        } else if (acc[acc.length - 1].length > 0) {
+          acc.push([]);
+        }
+        return acc;
+      },
+      [[]],
+    );
+    if (autoInterpolate) {
+      return [chunked.flat()];
+    }
+
+    return chunked;
+  }, [data, y0, y1, area, autoInterpolate]);
+
+  return (
+    <>
+      {dataToArea.map((chunk, index) => {
+        const d3 = d3Area()
+          .curve(curve)
+          .x((data) => xScale(data[x]))
+          .y0((data) => yScale(data[y0]))
+          .y1((data) => yScale(data[y1]));
+
+        return sstyled(styles)(
+          <SLineArea
+            key={`${chunk.length}-${index}`}
+            aria-hidden
+            clipPath={`url(#${uid})`}
+            render='path'
+            hide={hide}
+            color={color}
+            d={d3(chunk)}
+            use:duration={`${duration}ms`}
+            patterns={patterns}
+          />,
+        );
+      })}
+    </>
   );
 }
 

diff --git a/semcore/d3-chart/src/style/line.shadow.css b/semcore/d3-chart/src/style/line.shadow.css
@@ -31,13 +31,13 @@ SNull[hide] {
   display: none;
 }
 
-SAria {
+SLineArea {
   transition-property: d;
   transition-duration: var(--duration);
   transition-timing-function: ease-in-out;
   opacity: 0.3;
   fill: var(--intergalactic-chart-palette-order-1, #2bb3ff);
 }
-SAria[color] {
+SLineArea[color] {
   fill: var(--color);
 }
diff --git a/semcore/d3-chart/src/types/Line.d.ts b/semcore/d3-chart/src/types/Line.d.ts
@@ -75,6 +75,13 @@ export type LineAreaProps = Omit<LineProps, 'transparent'> & {
    * Optional data for render area
    */
   area?: Array<{ [key: string]: number }>;
+
+  /**
+   * If disabled, area will not be rendered if corresponding position data is null. That case you use
+   * `interpolateValue` symbol for spot data interpolation.
+   * @default true
+   */
+  autoInterpolate?: boolean;
 };
 
 declare const Line: IntergalacticD3Component<'line', LineProps, Context> & {