@mui/x-charts-premium 9.0.3 → 9.1.0

package/HeatmapPremium/webgl/useHeatmapPlotData.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
@@ -9,49 +10,100 @@ var React = _interopRequireWildcard(require("react"));
 var _hooks = require("@mui/x-charts/hooks");
 var _internals = require("@mui/x-charts/internals");
 var _parseColor = require("../../utils/webgl/parseColor");
+/* Far enough off-canvas that the rect is never visible; used for invalid x/y entries.
+ * Avoids coupling the position pass to the color/saturation passes. */
+const OFFSCREEN = -1e9;
+function ensurePoolFloat32(pool, n) {
+  if (pool && pool.length >= n) {
+    return pool;
+  }
+  return new Float32Array(n);
+}
 function useHeatmapPlotData(drawingArea, series, xScale, yScale) {
   const width = xScale.bandwidth();
   const height = yScale.bandwidth();
   const colorScale = (0, _hooks.useZColorScale)();
   const store = (0, _internals.useStore)();
   const getHighlightState = store.use(_internals.selectorChartsHighlightStateCallback);
-  return React.useMemo(() => {
-    const centers = new Float32Array(series.data.length * 2);
-    const colors = new Float32Array(series.data.length * 4);
-    const saturations = new Float32Array(series.data.length);
-    const xDomain = xScale.domain();
-    const yDomain = yScale.domain();
+
+  /* Colors only change when series data or color scale changes. Cached so resize/highlight
+   * renders don't re-upload the colors buffer.
+   * Stored as Uint8 (1 byte per channel) — 4x less GPU traffic than Float32 RGBA. */
+  const colors = React.useMemo(() => {
+    const out = new Uint8Array(series.data.length * 4);
     for (let dataIndex = 0; dataIndex < series.data.length; dataIndex += 1) {
-      const [xIndex, yIndex, value] = series.data[dataIndex];
-      const x = xScale(xDomain[xIndex]);
-      const y = yScale(yDomain[yIndex]);
+      const value = series.data[dataIndex][2];
       const color = colorScale?.(value);
-      if (x === undefined || y === undefined || !color) {
+      if (!color) {
+        /* Alpha 0 hides the rect; src-alpha blending makes RGB irrelevant. */
         continue;
       }
-      centers[dataIndex * 2] = x + width / 2 - drawingArea.left;
-      centers[dataIndex * 2 + 1] = y + height / 2 - drawingArea.top;
       const rgbColor = (0, _parseColor.parseColor)(color);
-      colors[dataIndex * 4] = rgbColor[0];
-      colors[dataIndex * 4 + 1] = rgbColor[1];
-      colors[dataIndex * 4 + 2] = rgbColor[2];
-      colors[dataIndex * 4 + 3] = 1.0;
+      out[dataIndex * 4] = rgbColor[0];
+      out[dataIndex * 4 + 1] = rgbColor[1];
+      out[dataIndex * 4 + 2] = rgbColor[2];
+      out[dataIndex * 4 + 3] = 255;
+    }
+    return out;
+  }, [colorScale, series.data]);
+
+  /* Saturations only change with highlight state. Pooled so highlight churn doesn't
+   * allocate per change. */
+  const saturationsPoolRef = React.useRef(null);
+  const saturations = React.useMemo(() => {
+    const n = series.data.length;
+    const pool = ensurePoolFloat32(saturationsPoolRef.current ?? undefined, n);
+    saturationsPoolRef.current = pool;
+    for (let dataIndex = 0; dataIndex < n; dataIndex += 1) {
+      const item = series.data[dataIndex];
       const highlightState = getHighlightState({
         type: 'heatmap',
         seriesId: series.id,
-        xIndex,
-        yIndex
+        xIndex: item[0],
+        yIndex: item[1]
       });
+      let saturation = 0;
       if (highlightState === 'highlighted') {
-        saturations[dataIndex] = 0.2;
+        saturation = 0.2;
       } else if (highlightState === 'faded') {
-        saturations[dataIndex] = -0.2;
+        saturation = -0.2;
+      }
+      pool[dataIndex] = saturation;
+    }
+    /* Subarray gives a fresh identity over the same bytes — upload short-circuit fires. */
+    return pool.subarray(0, n);
+  }, [getHighlightState, series.data, series.id]);
+
+  /* Positions change on resize (drawing area / band width). Pooled to avoid per-frame
+   * allocation. Subarray view gives a fresh identity each call so the upload still runs. */
+  const centersPoolRef = React.useRef(null);
+  const centers = React.useMemo(() => {
+    const n = series.data.length;
+    const pool = ensurePoolFloat32(centersPoolRef.current ?? undefined, n * 2);
+    centersPoolRef.current = pool;
+    const left = drawingArea.left;
+    const top = drawingArea.top;
+    const halfWidth = width / 2;
+    const halfHeight = height / 2;
+    const xDomain = xScale.domain();
+    const yDomain = yScale.domain();
+    for (let dataIndex = 0; dataIndex < n; dataIndex += 1) {
+      const item = series.data[dataIndex];
+      const x = xScale(xDomain[item[0]]);
+      const y = yScale(yDomain[item[1]]);
+      if (x === undefined || y === undefined) {
+        pool[dataIndex * 2] = OFFSCREEN;
+        pool[dataIndex * 2 + 1] = OFFSCREEN;
+        continue;
       }
+      pool[dataIndex * 2] = x + halfWidth - left;
+      pool[dataIndex * 2 + 1] = y + halfHeight - top;
     }
-    return {
-      centers,
-      colors,
-      saturations
-    };
-  }, [colorScale, drawingArea.left, drawingArea.top, height, getHighlightState, series.data, series.id, width, xScale, yScale]);
+    return pool.subarray(0, n * 2);
+  }, [drawingArea.left, drawingArea.top, height, series.data, width, xScale, yScale]);
+  return React.useMemo(() => ({
+    centers,
+    colors,
+    saturations
+  }), [centers, colors, saturations]);
 }

package/HeatmapPremium/webgl/useHeatmapPlotData.mjs

@@ -1,50 +1,104 @@
+'use client';
+
 import * as React from 'react';
 import { useZColorScale } from '@mui/x-charts/hooks';
 import { selectorChartsHighlightStateCallback, useStore } from '@mui/x-charts/internals';
 import { parseColor } from "../../utils/webgl/parseColor.mjs";
+
+/* Far enough off-canvas that the rect is never visible; used for invalid x/y entries.
+ * Avoids coupling the position pass to the color/saturation passes. */
+const OFFSCREEN = -1e9;
+function ensurePoolFloat32(pool, n) {
+  if (pool && pool.length >= n) {
+    return pool;
+  }
+  return new Float32Array(n);
+}
 export function useHeatmapPlotData(drawingArea, series, xScale, yScale) {
   const width = xScale.bandwidth();
   const height = yScale.bandwidth();
   const colorScale = useZColorScale();
   const store = useStore();
   const getHighlightState = store.use(selectorChartsHighlightStateCallback);
-  return React.useMemo(() => {
-    const centers = new Float32Array(series.data.length * 2);
-    const colors = new Float32Array(series.data.length * 4);
-    const saturations = new Float32Array(series.data.length);
-    const xDomain = xScale.domain();
-    const yDomain = yScale.domain();
+
+  /* Colors only change when series data or color scale changes. Cached so resize/highlight
+   * renders don't re-upload the colors buffer.
+   * Stored as Uint8 (1 byte per channel) — 4x less GPU traffic than Float32 RGBA. */
+  const colors = React.useMemo(() => {
+    const out = new Uint8Array(series.data.length * 4);
     for (let dataIndex = 0; dataIndex < series.data.length; dataIndex += 1) {
-      const [xIndex, yIndex, value] = series.data[dataIndex];
-      const x = xScale(xDomain[xIndex]);
-      const y = yScale(yDomain[yIndex]);
+      const value = series.data[dataIndex][2];
       const color = colorScale?.(value);
-      if (x === undefined || y === undefined || !color) {
+      if (!color) {
+        /* Alpha 0 hides the rect; src-alpha blending makes RGB irrelevant. */
         continue;
       }
-      centers[dataIndex * 2] = x + width / 2 - drawingArea.left;
-      centers[dataIndex * 2 + 1] = y + height / 2 - drawingArea.top;
       const rgbColor = parseColor(color);
-      colors[dataIndex * 4] = rgbColor[0];
-      colors[dataIndex * 4 + 1] = rgbColor[1];
-      colors[dataIndex * 4 + 2] = rgbColor[2];
-      colors[dataIndex * 4 + 3] = 1.0;
+      out[dataIndex * 4] = rgbColor[0];
+      out[dataIndex * 4 + 1] = rgbColor[1];
+      out[dataIndex * 4 + 2] = rgbColor[2];
+      out[dataIndex * 4 + 3] = 255;
+    }
+    return out;
+  }, [colorScale, series.data]);
+
+  /* Saturations only change with highlight state. Pooled so highlight churn doesn't
+   * allocate per change. */
+  const saturationsPoolRef = React.useRef(null);
+  const saturations = React.useMemo(() => {
+    const n = series.data.length;
+    const pool = ensurePoolFloat32(saturationsPoolRef.current ?? undefined, n);
+    saturationsPoolRef.current = pool;
+    for (let dataIndex = 0; dataIndex < n; dataIndex += 1) {
+      const item = series.data[dataIndex];
       const highlightState = getHighlightState({
         type: 'heatmap',
         seriesId: series.id,
-        xIndex,
-        yIndex
+        xIndex: item[0],
+        yIndex: item[1]
       });
+      let saturation = 0;
       if (highlightState === 'highlighted') {
-        saturations[dataIndex] = 0.2;
+        saturation = 0.2;
       } else if (highlightState === 'faded') {
-        saturations[dataIndex] = -0.2;
+        saturation = -0.2;
+      }
+      pool[dataIndex] = saturation;
+    }
+    /* Subarray gives a fresh identity over the same bytes — upload short-circuit fires. */
+    return pool.subarray(0, n);
+  }, [getHighlightState, series.data, series.id]);
+
+  /* Positions change on resize (drawing area / band width). Pooled to avoid per-frame
+   * allocation. Subarray view gives a fresh identity each call so the upload still runs. */
+  const centersPoolRef = React.useRef(null);
+  const centers = React.useMemo(() => {
+    const n = series.data.length;
+    const pool = ensurePoolFloat32(centersPoolRef.current ?? undefined, n * 2);
+    centersPoolRef.current = pool;
+    const left = drawingArea.left;
+    const top = drawingArea.top;
+    const halfWidth = width / 2;
+    const halfHeight = height / 2;
+    const xDomain = xScale.domain();
+    const yDomain = yScale.domain();
+    for (let dataIndex = 0; dataIndex < n; dataIndex += 1) {
+      const item = series.data[dataIndex];
+      const x = xScale(xDomain[item[0]]);
+      const y = yScale(yDomain[item[1]]);
+      if (x === undefined || y === undefined) {
+        pool[dataIndex * 2] = OFFSCREEN;
+        pool[dataIndex * 2 + 1] = OFFSCREEN;
+        continue;
       }
+      pool[dataIndex * 2] = x + halfWidth - left;
+      pool[dataIndex * 2 + 1] = y + halfHeight - top;
     }
-    return {
-      centers,
-      colors,
-      saturations
-    };
-  }, [colorScale, drawingArea.left, drawingArea.top, height, getHighlightState, series.data, series.id, width, xScale, yScale]);
+    return pool.subarray(0, n * 2);
+  }, [drawingArea.left, drawingArea.top, height, series.data, width, xScale, yScale]);
+  return React.useMemo(() => ({
+    centers,
+    colors,
+    saturations
+  }), [centers, colors, saturations]);
 }

package/LICENSE

@@ -1,8 +1,10 @@
+# License
+
 Commercial License
 
 Copyright (c) 2020 Material-UI SAS
 
-MUI X Premium (https://mui.com/pricing/) is commercial software. You MUST agree to the
+MUI X Premium (https://mui.com/pricing/) is commercial software. You MUST agree to the
 End User License Agreement (EULA: https://mui.com/r/x-license-eula) to be able to
 use the software.
 

package/RadialBarChart/RadialBarChart.d.mts

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { type MakeOptional } from '@mui/x-internals/types';
+import { type ChartsSlots, type ChartsSlotProps } from '@mui/x-charts/internals';
+import { type ChartsRadialGridProps } from '@mui/x-charts/ChartsRadialGrid';
+import { type ChartsLegendSlots, type ChartsLegendSlotProps } from "../ChartsLegend/index.mjs";
+import { type ChartsTooltipSlots, type ChartsTooltipSlotProps } from "../ChartsTooltip/index.mjs";
+import { type ChartsOverlayProps, type ChartsOverlaySlots, type ChartsOverlaySlotProps } from "../ChartsOverlay/index.mjs";
+import { type ChartsToolbarSlots, type ChartsToolbarSlotProps } from "../Toolbar/index.mjs";
+import { type ChartsRadialDataProviderPremiumProps } from "../ChartsRadialDataProviderPremium/index.mjs";
+import type { RadialBarSeriesType } from "../models/seriesType/radialBar.mjs";
+import { type RadialBarChartPluginSignatures } from "./RadialBarChart.plugins.mjs";
+export type RadialBarSeries = MakeOptional<RadialBarSeriesType, 'type'>;
+export interface RadialBarChartSlots extends ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
+export interface RadialBarChartSlotProps extends ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
+export interface RadialBarChartProps extends Omit<ChartsRadialDataProviderPremiumProps<'radialBar', RadialBarChartPluginSignatures>, 'series' | 'plugins' | 'zAxis' | 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
+  /**
+   * The series to display in the radial bar chart.
+   * An array of [[RadialBarSeries]] objects.
+   */
+  series: Readonly<RadialBarSeries[]>;
+  /**
+   * Option to display a radial grid in the background.
+   */
+  grid?: Pick<ChartsRadialGridProps, 'radius' | 'rotation'>;
+  /**
+   * If `true`, the legend is not rendered.
+   */
+  hideLegend?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: RadialBarChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: RadialBarChartSlotProps;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+}
+/**
+ * Demos:
+ *
+ * - [Radial bar demonstration](https://mui.com/x/react-charts/radial-bar/)
+ *
+ * API:
+ *
+ * - [RadialBarChart API](https://mui.com/x/api/charts/radial-bar-chart/)
+ */
+declare const RadialBarChart: React.ForwardRefExoticComponent<RadialBarChartProps & React.RefAttributes<HTMLDivElement>>;
+export { RadialBarChart as Unstable_RadialBarChart };

package/RadialBarChart/RadialBarChart.d.ts

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { type MakeOptional } from '@mui/x-internals/types';
+import { type ChartsSlots, type ChartsSlotProps } from '@mui/x-charts/internals';
+import { type ChartsRadialGridProps } from '@mui/x-charts/ChartsRadialGrid';
+import { type ChartsLegendSlots, type ChartsLegendSlotProps } from "../ChartsLegend/index.js";
+import { type ChartsTooltipSlots, type ChartsTooltipSlotProps } from "../ChartsTooltip/index.js";
+import { type ChartsOverlayProps, type ChartsOverlaySlots, type ChartsOverlaySlotProps } from "../ChartsOverlay/index.js";
+import { type ChartsToolbarSlots, type ChartsToolbarSlotProps } from "../Toolbar/index.js";
+import { type ChartsRadialDataProviderPremiumProps } from "../ChartsRadialDataProviderPremium/index.js";
+import type { RadialBarSeriesType } from "../models/seriesType/radialBar.js";
+import { type RadialBarChartPluginSignatures } from "./RadialBarChart.plugins.js";
+export type RadialBarSeries = MakeOptional<RadialBarSeriesType, 'type'>;
+export interface RadialBarChartSlots extends ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
+export interface RadialBarChartSlotProps extends ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
+export interface RadialBarChartProps extends Omit<ChartsRadialDataProviderPremiumProps<'radialBar', RadialBarChartPluginSignatures>, 'series' | 'plugins' | 'zAxis' | 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
+  /**
+   * The series to display in the radial bar chart.
+   * An array of [[RadialBarSeries]] objects.
+   */
+  series: Readonly<RadialBarSeries[]>;
+  /**
+   * Option to display a radial grid in the background.
+   */
+  grid?: Pick<ChartsRadialGridProps, 'radius' | 'rotation'>;
+  /**
+   * If `true`, the legend is not rendered.
+   */
+  hideLegend?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: RadialBarChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: RadialBarChartSlotProps;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+}
+/**
+ * Demos:
+ *
+ * - [Radial bar demonstration](https://mui.com/x/react-charts/radial-bar/)
+ *
+ * API:
+ *
+ * - [RadialBarChart API](https://mui.com/x/api/charts/radial-bar-chart/)
+ */
+declare const RadialBarChart: React.ForwardRefExoticComponent<RadialBarChartProps & React.RefAttributes<HTMLDivElement>>;
+export { RadialBarChart as Unstable_RadialBarChart };