@mui/x-charts-premium 9.0.4 → 9.1.0

package/ScatterChartPremium/webgl/useScatterWebGLPlotData.js

@@ -0,0 +1,140 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useScatterWebGLPlotData = useScatterWebGLPlotData;
+var React = _interopRequireWildcard(require("react"));
+var _hooks = require("@mui/x-charts/hooks");
+var _parseColor = require("../../utils/webgl/parseColor");
+const DEFAULT_MARKER_SIZE = 4;
+const EMPTY_DATA = {
+  centers: new Float32Array(0),
+  sizes: new Float32Array(0),
+  colors: new Uint8Array(0),
+  pointCount: 0
+};
+function useScatterWebGLPlotData() {
+  const seriesData = (0, _hooks.useScatterSeriesContext)();
+  const {
+    xAxis: xAxes,
+    xAxisIds
+  } = (0, _hooks.useXAxes)();
+  const {
+    yAxis: yAxes,
+    yAxisIds
+  } = (0, _hooks.useYAxes)();
+  const drawingArea = (0, _hooks.useDrawingArea)();
+  const defaultXAxisId = xAxisIds[0];
+  const defaultYAxisId = yAxisIds[0];
+
+  // Colors and sizes depend only on series identity (series color + markerSize).
+  // When only the drawing area or axes change we reuse the cached Float32Array
+  // references so the WebGL program can skip the GPU upload for them.
+  // Caveat: if the axis scale starts producing non-numeric values for some points
+  // (e.g. NaN after a config change), those points are skipped from the centers
+  // walk while the cached sizes/colors entries for them stay in place — which can
+  // desynchronise styles from positions until the cache is invalidated. Acceptable
+  // for now since seriesData identity changes on any series mutation.
+  const cachedStylesRef = React.useRef(null);
+
+  // Centers change on every zoom/axis update, but the underlying ArrayBuffer
+  // can be reused to avoid allocating ~1.6 MB per zoom frame at 200k points.
+  // We return a fresh Float32Array VIEW over the pooled buffer so the WebGL
+  // program's reference-equality short-circuit still treats it as new data.
+  const centersPoolRef = React.useRef(null);
+  return React.useMemo(() => {
+    if (!seriesData) {
+      return EMPTY_DATA;
+    }
+    const {
+      series,
+      seriesOrder
+    } = seriesData;
+    let maxPoints = 0;
+    for (const seriesId of seriesOrder) {
+      const s = series[seriesId];
+      if (s.hidden) {
+        continue;
+      }
+      maxPoints += s.data?.length ?? 0;
+    }
+    if (maxPoints === 0) {
+      return EMPTY_DATA;
+    }
+    const cached = cachedStylesRef.current;
+    const reuseStyles = cached !== null && cached.seriesData === seriesData && cached.sizes.length === maxPoints && cached.colors.length === maxPoints * 4;
+    const centersLength = maxPoints * 2;
+    let pool = centersPoolRef.current;
+    if (pool === null || pool.length < centersLength) {
+      pool = new Float32Array(centersLength);
+      centersPoolRef.current = pool;
+    }
+    // New view over the shared buffer — reference identity differs each call so
+    // the GPU upload path treats the centers as dirty, but no heap allocation
+    // of the underlying buffer is incurred.
+    const centers = new Float32Array(pool.buffer, 0, centersLength);
+    const sizes = reuseStyles ? cached.sizes : new Float32Array(maxPoints);
+    const colors = reuseStyles ? cached.colors : new Uint8Array(maxPoints * 4);
+    let pointCount = 0;
+    const dx = -drawingArea.left;
+    const dy = -drawingArea.top;
+    for (const seriesId of seriesOrder) {
+      const s = series[seriesId];
+      if (s.hidden) {
+        continue;
+      }
+      const xAxisId = s.xAxisId ?? defaultXAxisId;
+      const yAxisId = s.yAxisId ?? defaultYAxisId;
+      if (!(xAxisId in xAxes) || !(yAxisId in yAxes)) {
+        continue;
+      }
+      const xScale = xAxes[xAxisId].scale;
+      const yScale = yAxes[yAxisId].scale;
+      const data = s.data;
+      if (!data) {
+        continue;
+      }
+      const [cr, cg, cb, ca] = (0, _parseColor.parseColor)(s.color);
+      const markerSize = s.markerSize ?? DEFAULT_MARKER_SIZE;
+      for (let i = 0; i < data.length; i += 1) {
+        const point = data[i];
+        if (point == null) {
+          continue;
+        }
+        const sx = xScale(point.x);
+        const sy = yScale(point.y);
+        if (sx == null || sy == null || Number.isNaN(sx) || Number.isNaN(sy)) {
+          continue;
+        }
+        const offset2 = pointCount * 2;
+        centers[offset2] = sx + dx;
+        centers[offset2 + 1] = sy + dy;
+        if (!reuseStyles) {
+          sizes[pointCount] = markerSize;
+          const offset4 = pointCount * 4;
+          colors[offset4] = cr;
+          colors[offset4 + 1] = cg;
+          colors[offset4 + 2] = cb;
+          colors[offset4 + 3] = ca;
+        }
+        pointCount += 1;
+      }
+    }
+    if (!reuseStyles) {
+      cachedStylesRef.current = {
+        seriesData,
+        sizes,
+        colors
+      };
+    }
+    return {
+      centers,
+      sizes,
+      colors,
+      pointCount
+    };
+  }, [seriesData, xAxes, yAxes, drawingArea, defaultXAxisId, defaultYAxisId]);
+}

package/ScatterChartPremium/webgl/useScatterWebGLPlotData.mjs

@@ -0,0 +1,134 @@
+'use client';
+
+import * as React from 'react';
+import { useDrawingArea, useScatterSeriesContext, useXAxes, useYAxes } from '@mui/x-charts/hooks';
+import { parseColor } from "../../utils/webgl/parseColor.mjs";
+const DEFAULT_MARKER_SIZE = 4;
+const EMPTY_DATA = {
+  centers: new Float32Array(0),
+  sizes: new Float32Array(0),
+  colors: new Uint8Array(0),
+  pointCount: 0
+};
+export function useScatterWebGLPlotData() {
+  const seriesData = useScatterSeriesContext();
+  const {
+    xAxis: xAxes,
+    xAxisIds
+  } = useXAxes();
+  const {
+    yAxis: yAxes,
+    yAxisIds
+  } = useYAxes();
+  const drawingArea = useDrawingArea();
+  const defaultXAxisId = xAxisIds[0];
+  const defaultYAxisId = yAxisIds[0];
+
+  // Colors and sizes depend only on series identity (series color + markerSize).
+  // When only the drawing area or axes change we reuse the cached Float32Array
+  // references so the WebGL program can skip the GPU upload for them.
+  // Caveat: if the axis scale starts producing non-numeric values for some points
+  // (e.g. NaN after a config change), those points are skipped from the centers
+  // walk while the cached sizes/colors entries for them stay in place — which can
+  // desynchronise styles from positions until the cache is invalidated. Acceptable
+  // for now since seriesData identity changes on any series mutation.
+  const cachedStylesRef = React.useRef(null);
+
+  // Centers change on every zoom/axis update, but the underlying ArrayBuffer
+  // can be reused to avoid allocating ~1.6 MB per zoom frame at 200k points.
+  // We return a fresh Float32Array VIEW over the pooled buffer so the WebGL
+  // program's reference-equality short-circuit still treats it as new data.
+  const centersPoolRef = React.useRef(null);
+  return React.useMemo(() => {
+    if (!seriesData) {
+      return EMPTY_DATA;
+    }
+    const {
+      series,
+      seriesOrder
+    } = seriesData;
+    let maxPoints = 0;
+    for (const seriesId of seriesOrder) {
+      const s = series[seriesId];
+      if (s.hidden) {
+        continue;
+      }
+      maxPoints += s.data?.length ?? 0;
+    }
+    if (maxPoints === 0) {
+      return EMPTY_DATA;
+    }
+    const cached = cachedStylesRef.current;
+    const reuseStyles = cached !== null && cached.seriesData === seriesData && cached.sizes.length === maxPoints && cached.colors.length === maxPoints * 4;
+    const centersLength = maxPoints * 2;
+    let pool = centersPoolRef.current;
+    if (pool === null || pool.length < centersLength) {
+      pool = new Float32Array(centersLength);
+      centersPoolRef.current = pool;
+    }
+    // New view over the shared buffer — reference identity differs each call so
+    // the GPU upload path treats the centers as dirty, but no heap allocation
+    // of the underlying buffer is incurred.
+    const centers = new Float32Array(pool.buffer, 0, centersLength);
+    const sizes = reuseStyles ? cached.sizes : new Float32Array(maxPoints);
+    const colors = reuseStyles ? cached.colors : new Uint8Array(maxPoints * 4);
+    let pointCount = 0;
+    const dx = -drawingArea.left;
+    const dy = -drawingArea.top;
+    for (const seriesId of seriesOrder) {
+      const s = series[seriesId];
+      if (s.hidden) {
+        continue;
+      }
+      const xAxisId = s.xAxisId ?? defaultXAxisId;
+      const yAxisId = s.yAxisId ?? defaultYAxisId;
+      if (!(xAxisId in xAxes) || !(yAxisId in yAxes)) {
+        continue;
+      }
+      const xScale = xAxes[xAxisId].scale;
+      const yScale = yAxes[yAxisId].scale;
+      const data = s.data;
+      if (!data) {
+        continue;
+      }
+      const [cr, cg, cb, ca] = parseColor(s.color);
+      const markerSize = s.markerSize ?? DEFAULT_MARKER_SIZE;
+      for (let i = 0; i < data.length; i += 1) {
+        const point = data[i];
+        if (point == null) {
+          continue;
+        }
+        const sx = xScale(point.x);
+        const sy = yScale(point.y);
+        if (sx == null || sy == null || Number.isNaN(sx) || Number.isNaN(sy)) {
+          continue;
+        }
+        const offset2 = pointCount * 2;
+        centers[offset2] = sx + dx;
+        centers[offset2 + 1] = sy + dy;
+        if (!reuseStyles) {
+          sizes[pointCount] = markerSize;
+          const offset4 = pointCount * 4;
+          colors[offset4] = cr;
+          colors[offset4 + 1] = cg;
+          colors[offset4 + 2] = cb;
+          colors[offset4 + 3] = ca;
+        }
+        pointCount += 1;
+      }
+    }
+    if (!reuseStyles) {
+      cachedStylesRef.current = {
+        seriesData,
+        sizes,
+        colors
+      };
+    }
+    return {
+      centers,
+      sizes,
+      colors,
+      pointCount
+    };
+  }, [seriesData, xAxes, yAxes, drawingArea, defaultXAxisId, defaultYAxisId]);
+}

package/index.d.mts

@@ -50,6 +50,8 @@ export * from "./ChartsRadialDataProviderPremium/index.mjs";
 export * from "./ChartsContainerPremium/index.mjs";
 export * from "./BarChartPremium/index.mjs";
 export * from "./HeatmapPremium/index.mjs";
+export * from "./ScatterChartPremium/index.mjs";
 export * from "./ChartsWebGLLayer/index.mjs";
 export * from "./CandlestickChart/index.mjs";
-export * from "./RadialLineChart/index.mjs";
+export * from "./RadialLineChart/index.mjs";
+export * from "./RadialBarChart/index.mjs";

package/index.d.ts

@@ -50,6 +50,8 @@ export * from "./ChartsRadialDataProviderPremium/index.js";
 export * from "./ChartsContainerPremium/index.js";
 export * from "./BarChartPremium/index.js";
 export * from "./HeatmapPremium/index.js";
+export * from "./ScatterChartPremium/index.js";
 export * from "./ChartsWebGLLayer/index.js";
 export * from "./CandlestickChart/index.js";
-export * from "./RadialLineChart/index.js";
+export * from "./RadialLineChart/index.js";
+export * from "./RadialBarChart/index.js";

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-premium v9.0.4
+ * @mui/x-charts-premium v9.1.0
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the
@@ -594,6 +594,18 @@ Object.keys(_HeatmapPremium).forEach(function (key) {
     }
   });
 });
+var _ScatterChartPremium = require("./ScatterChartPremium");
+Object.keys(_ScatterChartPremium).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ScatterChartPremium[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ScatterChartPremium[key];
+    }
+  });
+});
 var _ChartsWebGLLayer = require("./ChartsWebGLLayer");
 Object.keys(_ChartsWebGLLayer).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -629,4 +641,16 @@ Object.keys(_RadialLineChart).forEach(function (key) {
       return _RadialLineChart[key];
     }
   });
+});
+var _RadialBarChart = require("./RadialBarChart");
+Object.keys(_RadialBarChart).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _RadialBarChart[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _RadialBarChart[key];
+    }
+  });
 });

package/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-premium v9.0.4
+ * @mui/x-charts-premium v9.1.0
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the
@@ -66,6 +66,8 @@ export * from "./ChartsRadialDataProviderPremium/index.mjs";
 export * from "./ChartsContainerPremium/index.mjs";
 export * from "./BarChartPremium/index.mjs";
 export * from "./HeatmapPremium/index.mjs";
+export * from "./ScatterChartPremium/index.mjs";
 export * from "./ChartsWebGLLayer/index.mjs";
 export * from "./CandlestickChart/index.mjs";
-export * from "./RadialLineChart/index.mjs";
+export * from "./RadialLineChart/index.mjs";
+export * from "./RadialBarChart/index.mjs";

package/internals/index.d.mts

@@ -0,0 +1 @@
+export { default as getRadialLineItemAtPosition } from "../RadialLineChart/seriesConfig/getItemAtPosition.mjs";

package/internals/index.d.ts

@@ -0,0 +1 @@
+export { default as getRadialLineItemAtPosition } from "../RadialLineChart/seriesConfig/getItemAtPosition.js";

package/internals/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "getRadialLineItemAtPosition", {
+  enumerable: true,
+  get: function () {
+    return _getItemAtPosition.default;
+  }
+});
+var _getItemAtPosition = _interopRequireDefault(require("../RadialLineChart/seriesConfig/getItemAtPosition"));

package/internals/index.mjs

@@ -0,0 +1 @@
+export { default as getRadialLineItemAtPosition } from "../RadialLineChart/seriesConfig/getItemAtPosition.mjs";

package/models/seriesType/radialLine.d.mts

@@ -1,5 +1,5 @@
 import type { CommonSeriesType, CommonLineSeriesType, RadialSeriesType, StackableSeriesType, SeriesId, CommonDefaultizedProps } from '@mui/x-charts/internals';
-import type { StackOffsetType } from '@mui/x-charts/models';
+import type { CurveType, StackOffsetType } from '@mui/x-charts/models';
 import type { DefaultizedProps } from '@mui/x-internals/types';
 export interface RadialLineSeriesType extends CommonSeriesType<number | null, 'line'>, RadialSeriesType, StackableSeriesType, CommonLineSeriesType {
   type: 'radialLine';
@@ -8,6 +8,12 @@ export interface RadialLineSeriesType extends CommonSeriesType<number | null, 'l
    * @default 'none'
    */
   stackOffset?: StackOffsetType;
+  /**
+   * The type of curve to use for the line.
+   * Read more about curves at [line interpolation](https://mui.com/x/react-charts/lines/#interpolation).
+   * @default 'linear'
+   */
+  curve?: CurveType;
 }
 /**
  * An object that allows to identify a single line.

package/models/seriesType/radialLine.d.ts

@@ -1,5 +1,5 @@
 import type { CommonSeriesType, CommonLineSeriesType, RadialSeriesType, StackableSeriesType, SeriesId, CommonDefaultizedProps } from '@mui/x-charts/internals';
-import type { StackOffsetType } from '@mui/x-charts/models';
+import type { CurveType, StackOffsetType } from '@mui/x-charts/models';
 import type { DefaultizedProps } from '@mui/x-internals/types';
 export interface RadialLineSeriesType extends CommonSeriesType<number | null, 'line'>, RadialSeriesType, StackableSeriesType, CommonLineSeriesType {
   type: 'radialLine';
@@ -8,6 +8,12 @@ export interface RadialLineSeriesType extends CommonSeriesType<number | null, 'l
    * @default 'none'
    */
   stackOffset?: StackOffsetType;
+  /**
+   * The type of curve to use for the line.
+   * Read more about curves at [line interpolation](https://mui.com/x/react-charts/lines/#interpolation).
+   * @default 'linear'
+   */
+  curve?: CurveType;
 }
 /**
  * An object that allows to identify a single line.