@mui/x-charts-premium 9.7.0 → 9.9.0

package/BarChartPremium/BarChartPremium.d.mts

@@ -8,7 +8,7 @@ import type { ChartsContainerPremiumProps } from "../ChartsContainerPremium/inde
 export type RangeBarSeries = RangeBarSeriesType;
 export interface BarChartPremiumSlots extends BarChartProSlots {}
 export interface BarChartPremiumSlotProps extends BarChartProSlotProps {}
-export interface BarChartPremiumProps extends Omit<BarChartProProps, 'apiRef' | 'slots' | 'slotProps' | 'seriesConfig' | 'plugins' | 'series' | 'renderer'>, Omit<ChartsContainerPremiumProps<'bar', BarChartPremiumPluginSignatures>, 'series' | 'slots' | 'slotProps'>, Pick<BarPlotPremiumProps, 'renderer'> {
+export interface BarChartPremiumProps extends Omit<BarChartProProps, 'apiRef' | 'slots' | 'slotProps' | 'seriesConfig' | 'plugins' | 'series' | 'renderer'>, Omit<ChartsContainerPremiumProps<'bar', BarChartPremiumPluginSignatures>, 'series' | 'slots' | 'slotProps' | 'sampling'>, Pick<BarPlotPremiumProps, 'renderer'> {
   /**
    * Overridable component slots.
    * @default {}

package/BarChartPremium/BarChartPremium.d.ts

@@ -8,7 +8,7 @@ import type { ChartsContainerPremiumProps } from "../ChartsContainerPremium/inde
 export type RangeBarSeries = RangeBarSeriesType;
 export interface BarChartPremiumSlots extends BarChartProSlots {}
 export interface BarChartPremiumSlotProps extends BarChartProSlotProps {}
-export interface BarChartPremiumProps extends Omit<BarChartProProps, 'apiRef' | 'slots' | 'slotProps' | 'seriesConfig' | 'plugins' | 'series' | 'renderer'>, Omit<ChartsContainerPremiumProps<'bar', BarChartPremiumPluginSignatures>, 'series' | 'slots' | 'slotProps'>, Pick<BarPlotPremiumProps, 'renderer'> {
+export interface BarChartPremiumProps extends Omit<BarChartProProps, 'apiRef' | 'slots' | 'slotProps' | 'seriesConfig' | 'plugins' | 'series' | 'renderer'>, Omit<ChartsContainerPremiumProps<'bar', BarChartPremiumPluginSignatures>, 'series' | 'slots' | 'slotProps' | 'sampling'>, Pick<BarPlotPremiumProps, 'renderer'> {
   /**
    * Overridable component slots.
    * @default {}

package/BarChartPremium/BarChartPremium.js

@@ -35,7 +35,7 @@ var _ChartsDataProviderPremium = require("../ChartsDataProviderPremium");
 var _RangeBarPlot = require("./RangeBar/RangeBarPlot");
 var _FocusedRangeBar = require("./RangeBar/FocusedRangeBar");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["initialZoom", "zoomData", "onZoomChange", "apiRef", "showToolbar"];
+const _excluded = ["initialZoom", "zoomData", "onZoomChange", "apiRef", "showToolbar", "sampling"];
 /**
  * Demos:
  *
@@ -57,7 +57,8 @@ const BarChartPremium = exports.BarChartPremium = /*#__PURE__*/React.forwardRef(
       zoomData,
       onZoomChange,
       apiRef,
-      showToolbar
+      showToolbar,
+      sampling
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const {
@@ -83,7 +84,10 @@ const BarChartPremium = exports.BarChartPremium = /*#__PURE__*/React.forwardRef(
     onZoomChange,
     apiRef,
     plugins: _BarChartPremium2.BAR_CHART_PREMIUM_PLUGINS
-  }));
+  }), {
+    seriesType: 'bar',
+    method: sampling
+  });
   const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
   const Toolbar = props.slots?.toolbar ?? _ChartsToolbarPro.ChartsToolbarPro;
   const renderer = barPlotPremiumProps.renderer;
@@ -382,6 +386,13 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes /* remove-prop
    * @default 'svg-single'
    */
   renderer: _propTypes.default.oneOf(['svg-batch', 'svg-single', 'webgl']),
+  /**
+   * Sampling method used to render large datasets when zoomed out.
+   * - `'none'`: render every bar (no sampling).
+   * - `'minmax'`: keep the min and max per bucket and draw one merged bar.
+   * @default 'none'
+   */
+  sampling: _propTypes.default.oneOf(['minmax', 'none']),
   /**
    * The series to display in the bar chart.
    * An array of [[BarSeries]] or [[RangeBarSeries]] objects.

package/BarChartPremium/BarChartPremium.mjs

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["initialZoom", "zoomData", "onZoomChange", "apiRef", "showToolbar"];
+const _excluded = ["initialZoom", "zoomData", "onZoomChange", "apiRef", "showToolbar", "sampling"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
@@ -50,7 +50,8 @@ const BarChartPremium = /*#__PURE__*/React.forwardRef(function BarChartPremium(i
       zoomData,
       onZoomChange,
       apiRef,
-      showToolbar
+      showToolbar,
+      sampling
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
@@ -76,7 +77,10 @@ const BarChartPremium = /*#__PURE__*/React.forwardRef(function BarChartPremium(i
     onZoomChange,
     apiRef,
     plugins: BAR_CHART_PREMIUM_PLUGINS
-  }));
+  }), {
+    seriesType: 'bar',
+    method: sampling
+  });
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
   const Toolbar = props.slots?.toolbar ?? ChartsToolbarPro;
   const renderer = barPlotPremiumProps.renderer;
@@ -375,6 +379,13 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes /* remove-prop
    * @default 'svg-single'
    */
   renderer: PropTypes.oneOf(['svg-batch', 'svg-single', 'webgl']),
+  /**
+   * Sampling method used to render large datasets when zoomed out.
+   * - `'none'`: render every bar (no sampling).
+   * - `'minmax'`: keep the min and max per bucket and draw one merged bar.
+   * @default 'none'
+   */
+  sampling: PropTypes.oneOf(['minmax', 'none']),
   /**
    * The series to display in the bar chart.
    * An array of [[BarSeries]] or [[RangeBarSeries]] objects.

package/BarChartPremium/RangeBar/AnimatedRangeBarElement.d.mts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { BarProps } from '@mui/x-charts/BarChart';
 export interface AnimatedRangeBarElementProps extends BarProps {
   /**
@@ -5,4 +6,4 @@ export interface AnimatedRangeBarElementProps extends BarProps {
    */
   hidden?: boolean;
 }
-export declare function AnimatedRangeBarElement(props: AnimatedRangeBarElementProps): import("react/jsx-runtime").JSX.Element;
+export declare function AnimatedRangeBarElement(props: AnimatedRangeBarElementProps): React.JSX.Element;

package/BarChartPremium/RangeBar/AnimatedRangeBarElement.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { BarProps } from '@mui/x-charts/BarChart';
 export interface AnimatedRangeBarElementProps extends BarProps {
   /**
@@ -5,4 +6,4 @@ export interface AnimatedRangeBarElementProps extends BarProps {
    */
   hidden?: boolean;
 }
-export declare function AnimatedRangeBarElement(props: AnimatedRangeBarElementProps): import("react/jsx-runtime").JSX.Element;
+export declare function AnimatedRangeBarElement(props: AnimatedRangeBarElementProps): React.JSX.Element;

package/BarChartPremium/RangeBar/FocusedRangeBar.d.mts

@@ -1,2 +1,2 @@
 import * as React from 'react';
-export declare function FocusedRangeBar(props: React.SVGAttributes<SVGRectElement>): import("react/jsx-runtime").JSX.Element | null;
+export declare function FocusedRangeBar(props: React.SVGAttributes<SVGRectElement>): React.JSX.Element | null;

package/BarChartPremium/RangeBar/FocusedRangeBar.d.ts

@@ -1,2 +1,2 @@
 import * as React from 'react';
-export declare function FocusedRangeBar(props: React.SVGAttributes<SVGRectElement>): import("react/jsx-runtime").JSX.Element | null;
+export declare function FocusedRangeBar(props: React.SVGAttributes<SVGRectElement>): React.JSX.Element | null;

package/BarChartPremium/RangeBar/seriesConfig/index.js

@@ -14,7 +14,7 @@ var _seriesProcessor = _interopRequireDefault(require("./seriesProcessor"));
 var _getColor = _interopRequireDefault(require("./getColor"));
 var _legend = _interopRequireDefault(require("./legend"));
 var _keyboardFocusHandler = _interopRequireDefault(require("./keyboardFocusHandler"));
-var _tooltipPosition = _interopRequireDefault(require("./tooltipPosition"));
+var _tooltipPosition = require("./tooltipPosition");
 var _getSeriesWithDefaultValues = require("./getSeriesWithDefaultValues");
 var _descriptionGetter = _interopRequireDefault(require("./descriptionGetter"));
 var _RangeBarPreviewPlot = require("../../../ChartsZoomSlider/internals/previews/RangeBarPreviewPlot");
@@ -23,7 +23,7 @@ const rangeBarSeriesConfig = exports.rangeBarSeriesConfig = {
   colorProcessor: _getColor.default,
   legendGetter: _legend.default,
   tooltipGetter: _tooltip.default,
-  tooltipItemPositionGetter: _tooltipPosition.default,
+  selectorTooltipItemPosition: _tooltipPosition.selectorTooltipItemPosition,
   axisTooltipGetter: _tooltip.axisTooltipGetter,
   xExtremumGetter: _extrema.getExtremumX,
   yExtremumGetter: _extrema.getExtremumY,

package/BarChartPremium/RangeBar/seriesConfig/index.mjs

@@ -6,7 +6,7 @@ import seriesProcessor from "./seriesProcessor.mjs";
 import getColor from "./getColor.mjs";
 import legendGetter from "./legend.mjs";
 import keyboardFocusHandler from "./keyboardFocusHandler.mjs";
-import tooltipItemPositionGetter from "./tooltipPosition.mjs";
+import { selectorTooltipItemPosition } from "./tooltipPosition.mjs";
 import { getSeriesWithDefaultValues } from "./getSeriesWithDefaultValues.mjs";
 import descriptionGetter from "./descriptionGetter.mjs";
 import { RangeBarPreviewPlot } from "../../../ChartsZoomSlider/internals/previews/RangeBarPreviewPlot.mjs";
@@ -15,7 +15,7 @@ export const rangeBarSeriesConfig = {
   colorProcessor: getColor,
   legendGetter,
   tooltipGetter,
-  tooltipItemPositionGetter,
+  selectorTooltipItemPosition,
   axisTooltipGetter,
   xExtremumGetter: getExtremumX,
   yExtremumGetter: getExtremumY,

package/BarChartPremium/RangeBar/seriesConfig/tooltipPosition.d.mts

@@ -1,3 +1,2 @@
-import type { TooltipItemPositionGetter } from '@mui/x-charts/internals';
-declare const tooltipItemPositionGetter: TooltipItemPositionGetter<'rangeBar'>;
-export default tooltipItemPositionGetter;
+import type { TooltipItemPositionSelector } from '@mui/x-charts/internals';
+export declare const selectorTooltipItemPosition: TooltipItemPositionSelector<'rangeBar'>;

package/BarChartPremium/RangeBar/seriesConfig/tooltipPosition.d.ts

@@ -1,3 +1,2 @@
-import type { TooltipItemPositionGetter } from '@mui/x-charts/internals';
-declare const tooltipItemPositionGetter: TooltipItemPositionGetter<'rangeBar'>;
-export default tooltipItemPositionGetter;
+import type { TooltipItemPositionSelector } from '@mui/x-charts/internals';
+export declare const selectorTooltipItemPosition: TooltipItemPositionSelector<'rangeBar'>;

package/BarChartPremium/RangeBar/seriesConfig/tooltipPosition.js

@@ -3,29 +3,27 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.selectorTooltipItemPosition = void 0;
+var _store = require("@mui/x-internals/store");
+var _internals = require("@mui/x-charts/internals");
 var _createGetRangeBarDimensions = require("../createGetRangeBarDimensions");
-const tooltipItemPositionGetter = params => {
-  const {
-    series,
-    identifier,
-    axesConfig,
-    placement
-  } = params;
-  if (!identifier || identifier.dataIndex === undefined) {
+const selectorTooltipItemPosition = exports.selectorTooltipItemPosition = (0, _store.createSelectorMemoized)(_internals.selectorChartsTooltipItem, _internals.selectorChartSeriesProcessed, _internals.selectorChartXAxis, _internals.selectorChartYAxis, function selectorTooltipItemPosition(identifier, series, xAxes, yAxes, placement) {
+  if (!identifier || identifier.type !== 'rangeBar' || identifier.dataIndex === undefined) {
     return null;
   }
   const itemSeries = series.rangeBar?.series[identifier.seriesId];
-  if (series.rangeBar == null || itemSeries == null) {
+  if (!series.rangeBar || !itemSeries) {
     return null;
   }
-  if (axesConfig.x === undefined || axesConfig.y === undefined) {
+  const xAxis = xAxes.axis[itemSeries.xAxisId ?? xAxes.axisIds[0]];
+  const yAxis = yAxes.axis[itemSeries.yAxisId ?? yAxes.axisIds[0]];
+  if (xAxis === undefined || yAxis === undefined) {
     return null;
   }
   const dimensions = (0, _createGetRangeBarDimensions.createGetRangeBarDimensions)({
     verticalLayout: itemSeries.layout === 'vertical',
-    xAxisConfig: axesConfig.x,
-    yAxisConfig: axesConfig.y,
+    xAxisConfig: xAxis,
+    yAxisConfig: yAxis,
     series: itemSeries,
     numberOfGroups: series.rangeBar.seriesOrder.length
   })(identifier.dataIndex, series.rangeBar.seriesOrder.findIndex(id => id === itemSeries.id));
@@ -61,5 +59,4 @@ const tooltipItemPositionGetter = params => {
         y
       };
   }
-};
-var _default = exports.default = tooltipItemPositionGetter;
+});

package/BarChartPremium/RangeBar/seriesConfig/tooltipPosition.mjs

@@ -1,25 +1,23 @@
+import { createSelectorMemoized } from '@mui/x-internals/store';
+import { selectorChartsTooltipItem, selectorChartSeriesProcessed, selectorChartXAxis, selectorChartYAxis } from '@mui/x-charts/internals';
 import { createGetRangeBarDimensions } from "../createGetRangeBarDimensions.mjs";
-const tooltipItemPositionGetter = params => {
-  const {
-    series,
-    identifier,
-    axesConfig,
-    placement
-  } = params;
-  if (!identifier || identifier.dataIndex === undefined) {
+export const selectorTooltipItemPosition = createSelectorMemoized(selectorChartsTooltipItem, selectorChartSeriesProcessed, selectorChartXAxis, selectorChartYAxis, function selectorTooltipItemPosition(identifier, series, xAxes, yAxes, placement) {
+  if (!identifier || identifier.type !== 'rangeBar' || identifier.dataIndex === undefined) {
     return null;
   }
   const itemSeries = series.rangeBar?.series[identifier.seriesId];
-  if (series.rangeBar == null || itemSeries == null) {
+  if (!series.rangeBar || !itemSeries) {
     return null;
   }
-  if (axesConfig.x === undefined || axesConfig.y === undefined) {
+  const xAxis = xAxes.axis[itemSeries.xAxisId ?? xAxes.axisIds[0]];
+  const yAxis = yAxes.axis[itemSeries.yAxisId ?? yAxes.axisIds[0]];
+  if (xAxis === undefined || yAxis === undefined) {
     return null;
   }
   const dimensions = createGetRangeBarDimensions({
     verticalLayout: itemSeries.layout === 'vertical',
-    xAxisConfig: axesConfig.x,
-    yAxisConfig: axesConfig.y,
+    xAxisConfig: xAxis,
+    yAxisConfig: yAxis,
     series: itemSeries,
     numberOfGroups: series.rangeBar.seriesOrder.length
   })(identifier.dataIndex, series.rangeBar.seriesOrder.findIndex(id => id === itemSeries.id));
@@ -55,5 +53,4 @@ const tooltipItemPositionGetter = params => {
         y
       };
   }
-};
-export default tooltipItemPositionGetter;
+});

package/BarChartPremium/webgl/BarWebGLProgram.d.mts

@@ -5,11 +5,10 @@ export declare class BarWebGLProgram {
   private readonly program;
   private readonly vao;
   private readonly quadBuffer;
-  private readonly aPositionLocation;
-  private readonly centersBuffer;
-  private readonly halfSizesBuffer;
-  private readonly colorsBuffer;
-  private readonly cornerRadiiBuffer;
+  private readonly centers;
+  private readonly halfSizes;
+  private readonly colors;
+  private readonly cornerRadii;
   private readonly uResolution;
   constructor(gl: WebGL2RenderingContext);
   setResolution(width: number, height: number): void;

package/BarChartPremium/webgl/BarWebGLProgram.d.ts

@@ -5,11 +5,10 @@ export declare class BarWebGLProgram {
   private readonly program;
   private readonly vao;
   private readonly quadBuffer;
-  private readonly aPositionLocation;
-  private readonly centersBuffer;
-  private readonly halfSizesBuffer;
-  private readonly colorsBuffer;
-  private readonly cornerRadiiBuffer;
+  private readonly centers;
+  private readonly halfSizes;
+  private readonly colors;
+  private readonly cornerRadii;
   private readonly uResolution;
   constructor(gl: WebGL2RenderingContext);
   setResolution(width: number, height: number): void;

package/BarChartPremium/webgl/BarWebGLProgram.js

@@ -5,36 +5,29 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.BarWebGLProgram = void 0;
 var _utils = require("../../utils/webgl/utils");
+var _instancedAttribute = require("../../utils/webgl/instancedAttribute");
 var _shaders = require("./shaders");
 class BarWebGLProgram {
   shaders = [];
+
+  /* Colors come in as Uint8 [0, 255]; normalized=true makes the GPU read them back as vec4 in [0, 1]. */
+
   constructor(gl) {
     this.gl = gl;
-    gl.enable(gl.BLEND);
-    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-    this.program = gl.createProgram();
-    const vertexShader = (0, _utils.compileShader)(gl, _shaders.barVertexShaderSource, gl.VERTEX_SHADER);
-    const fragmentShader = (0, _utils.compileShader)(gl, _shaders.barFragmentShaderSource, gl.FRAGMENT_SHADER);
-    gl.attachShader(this.program, vertexShader);
-    gl.attachShader(this.program, fragmentShader);
-    gl.linkProgram(this.program);
-    this.shaders.push(vertexShader, fragmentShader);
-    if (process.env.NODE_ENV !== 'production' && !gl.getProgramParameter(this.program, gl.LINK_STATUS)) {
-      console.error(`Program linking failed: ${gl.getProgramInfoLog(this.program)}`);
-      console.error(`Vertex info-log: ${gl.getShaderInfoLog(vertexShader)}`);
-      console.error(`Fragment info-log: ${gl.getShaderInfoLog(fragmentShader)}`);
-    }
-
-    // Cache locations once.
+    (0, _utils.setupStandardBlending)(gl);
+    const linked = (0, _utils.linkProgram)(gl, _shaders.barVertexShaderSource, _shaders.barFragmentShaderSource);
+    this.program = linked.program;
+    this.shaders.push(...linked.shaders);
     this.uResolution = gl.getUniformLocation(this.program, 'u_resolution');
-    this.aPositionLocation = gl.getAttribLocation(this.program, 'a_position');
     this.quadBuffer = (0, _utils.uploadQuadBuffer)(gl);
     this.vao = gl.createVertexArray();
-    this.centersBuffer = createInstancedBuffer(gl, this.program, 'a_center', 2, gl.FLOAT, false);
-    this.halfSizesBuffer = createInstancedBuffer(gl, this.program, 'a_halfSize', 2, gl.FLOAT, false);
-    // Colors come in as Uint8 [0, 255]; normalized=true makes the GPU read them back as vec4 in [0, 1].
-    this.colorsBuffer = createInstancedBuffer(gl, this.program, 'a_color', 4, gl.UNSIGNED_BYTE, true);
-    this.cornerRadiiBuffer = createInstancedBuffer(gl, this.program, 'a_cornerRadii', 4, gl.FLOAT, false);
+    gl.bindVertexArray(this.vao);
+    (0, _utils.bindQuadBuffer)(gl, this.program, this.quadBuffer);
+    this.centers = (0, _instancedAttribute.createInstancedAttribute)(gl, this.program, 'a_center', 2);
+    this.halfSizes = (0, _instancedAttribute.createInstancedAttribute)(gl, this.program, 'a_halfSize', 2);
+    this.colors = (0, _instancedAttribute.createInstancedAttribute)(gl, this.program, 'a_color', 4, gl.UNSIGNED_BYTE, true);
+    this.cornerRadii = (0, _instancedAttribute.createInstancedAttribute)(gl, this.program, 'a_cornerRadii', 4);
+    gl.bindVertexArray(null);
   }
   setResolution(width, height) {
     this.gl.useProgram(this.program);
@@ -42,18 +35,10 @@ class BarWebGLProgram {
   }
   plot(plotData) {
     const gl = this.gl;
-    gl.useProgram(this.program);
-    gl.bindVertexArray(this.vao);
-
-    // Bind quad buffer + a_position (per-vertex).
-    gl.bindBuffer(gl.ARRAY_BUFFER, this.quadBuffer);
-    gl.enableVertexAttribArray(this.aPositionLocation);
-    gl.vertexAttribPointer(this.aPositionLocation, 2, gl.FLOAT, false, 0, 0);
-    uploadAndBindInstanced(gl, this.centersBuffer, plotData.centers);
-    uploadAndBindInstanced(gl, this.halfSizesBuffer, plotData.halfSizes);
-    uploadAndBindInstanced(gl, this.colorsBuffer, plotData.colors);
-    uploadAndBindInstanced(gl, this.cornerRadiiBuffer, plotData.cornerRadii);
-    gl.bindVertexArray(null);
+    (0, _utils.uploadGrowableBuffer)(gl, this.centers.buffer, plotData.centers);
+    (0, _utils.uploadGrowableBuffer)(gl, this.halfSizes.buffer, plotData.halfSizes);
+    (0, _utils.uploadGrowableBuffer)(gl, this.colors.buffer, plotData.colors);
+    (0, _utils.uploadGrowableBuffer)(gl, this.cornerRadii.buffer, plotData.cornerRadii);
     (0, _utils.logWebGLErrors)(gl);
   }
   render(count) {
@@ -71,37 +56,11 @@ class BarWebGLProgram {
     gl.deleteProgram(this.program);
     gl.deleteVertexArray(this.vao);
     gl.deleteBuffer(this.quadBuffer);
-    gl.deleteBuffer(this.centersBuffer.buffer);
-    gl.deleteBuffer(this.halfSizesBuffer.buffer);
-    gl.deleteBuffer(this.colorsBuffer.buffer);
-    gl.deleteBuffer(this.cornerRadiiBuffer.buffer);
+    gl.deleteBuffer(this.centers.buffer.buffer);
+    gl.deleteBuffer(this.halfSizes.buffer.buffer);
+    gl.deleteBuffer(this.colors.buffer.buffer);
+    gl.deleteBuffer(this.cornerRadii.buffer.buffer);
     this.shaders.forEach(shader => gl.deleteShader(shader));
   }
 }
-exports.BarWebGLProgram = BarWebGLProgram;
-function createInstancedBuffer(gl, program, name, size, glType, normalized) {
-  return {
-    buffer: gl.createBuffer(),
-    capacityBytes: 0,
-    lastUploaded: null,
-    location: gl.getAttribLocation(program, name),
-    size,
-    glType,
-    normalized
-  };
-}
-function uploadAndBindInstanced(gl, target, data) {
-  gl.bindBuffer(gl.ARRAY_BUFFER, target.buffer);
-  if (target.lastUploaded !== data) {
-    if (data.byteLength <= target.capacityBytes) {
-      gl.bufferSubData(gl.ARRAY_BUFFER, 0, data);
-    } else {
-      gl.bufferData(gl.ARRAY_BUFFER, data, gl.DYNAMIC_DRAW);
-      target.capacityBytes = data.byteLength;
-    }
-    target.lastUploaded = data;
-  }
-  gl.enableVertexAttribArray(target.location);
-  gl.vertexAttribPointer(target.location, target.size, target.glType, target.normalized, 0, 0);
-  gl.vertexAttribDivisor(target.location, 1);
-}
+exports.BarWebGLProgram = BarWebGLProgram;

package/BarChartPremium/webgl/BarWebGLProgram.mjs

@@ -1,34 +1,27 @@
-import { compileShader, logWebGLErrors, uploadQuadBuffer } from "../../utils/webgl/utils.mjs";
+import { bindQuadBuffer, linkProgram, logWebGLErrors, setupStandardBlending, uploadGrowableBuffer, uploadQuadBuffer } from "../../utils/webgl/utils.mjs";
+import { createInstancedAttribute } from "../../utils/webgl/instancedAttribute.mjs";
 import { barFragmentShaderSource, barVertexShaderSource } from "./shaders.mjs";
 export class BarWebGLProgram {
   shaders = [];
+
+  /* Colors come in as Uint8 [0, 255]; normalized=true makes the GPU read them back as vec4 in [0, 1]. */
+
   constructor(gl) {
     this.gl = gl;
-    gl.enable(gl.BLEND);
-    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-    this.program = gl.createProgram();
-    const vertexShader = compileShader(gl, barVertexShaderSource, gl.VERTEX_SHADER);
-    const fragmentShader = compileShader(gl, barFragmentShaderSource, gl.FRAGMENT_SHADER);
-    gl.attachShader(this.program, vertexShader);
-    gl.attachShader(this.program, fragmentShader);
-    gl.linkProgram(this.program);
-    this.shaders.push(vertexShader, fragmentShader);
-    if (process.env.NODE_ENV !== 'production' && !gl.getProgramParameter(this.program, gl.LINK_STATUS)) {
-      console.error(`Program linking failed: ${gl.getProgramInfoLog(this.program)}`);
-      console.error(`Vertex info-log: ${gl.getShaderInfoLog(vertexShader)}`);
-      console.error(`Fragment info-log: ${gl.getShaderInfoLog(fragmentShader)}`);
-    }
-
-    // Cache locations once.
+    setupStandardBlending(gl);
+    const linked = linkProgram(gl, barVertexShaderSource, barFragmentShaderSource);
+    this.program = linked.program;
+    this.shaders.push(...linked.shaders);
     this.uResolution = gl.getUniformLocation(this.program, 'u_resolution');
-    this.aPositionLocation = gl.getAttribLocation(this.program, 'a_position');
     this.quadBuffer = uploadQuadBuffer(gl);
     this.vao = gl.createVertexArray();
-    this.centersBuffer = createInstancedBuffer(gl, this.program, 'a_center', 2, gl.FLOAT, false);
-    this.halfSizesBuffer = createInstancedBuffer(gl, this.program, 'a_halfSize', 2, gl.FLOAT, false);
-    // Colors come in as Uint8 [0, 255]; normalized=true makes the GPU read them back as vec4 in [0, 1].
-    this.colorsBuffer = createInstancedBuffer(gl, this.program, 'a_color', 4, gl.UNSIGNED_BYTE, true);
-    this.cornerRadiiBuffer = createInstancedBuffer(gl, this.program, 'a_cornerRadii', 4, gl.FLOAT, false);
+    gl.bindVertexArray(this.vao);
+    bindQuadBuffer(gl, this.program, this.quadBuffer);
+    this.centers = createInstancedAttribute(gl, this.program, 'a_center', 2);
+    this.halfSizes = createInstancedAttribute(gl, this.program, 'a_halfSize', 2);
+    this.colors = createInstancedAttribute(gl, this.program, 'a_color', 4, gl.UNSIGNED_BYTE, true);
+    this.cornerRadii = createInstancedAttribute(gl, this.program, 'a_cornerRadii', 4);
+    gl.bindVertexArray(null);
   }
   setResolution(width, height) {
     this.gl.useProgram(this.program);
@@ -36,18 +29,10 @@ export class BarWebGLProgram {
   }
   plot(plotData) {
     const gl = this.gl;
-    gl.useProgram(this.program);
-    gl.bindVertexArray(this.vao);
-
-    // Bind quad buffer + a_position (per-vertex).
-    gl.bindBuffer(gl.ARRAY_BUFFER, this.quadBuffer);
-    gl.enableVertexAttribArray(this.aPositionLocation);
-    gl.vertexAttribPointer(this.aPositionLocation, 2, gl.FLOAT, false, 0, 0);
-    uploadAndBindInstanced(gl, this.centersBuffer, plotData.centers);
-    uploadAndBindInstanced(gl, this.halfSizesBuffer, plotData.halfSizes);
-    uploadAndBindInstanced(gl, this.colorsBuffer, plotData.colors);
-    uploadAndBindInstanced(gl, this.cornerRadiiBuffer, plotData.cornerRadii);
-    gl.bindVertexArray(null);
+    uploadGrowableBuffer(gl, this.centers.buffer, plotData.centers);
+    uploadGrowableBuffer(gl, this.halfSizes.buffer, plotData.halfSizes);
+    uploadGrowableBuffer(gl, this.colors.buffer, plotData.colors);
+    uploadGrowableBuffer(gl, this.cornerRadii.buffer, plotData.cornerRadii);
     logWebGLErrors(gl);
   }
   render(count) {
@@ -65,36 +50,10 @@ export class BarWebGLProgram {
     gl.deleteProgram(this.program);
     gl.deleteVertexArray(this.vao);
     gl.deleteBuffer(this.quadBuffer);
-    gl.deleteBuffer(this.centersBuffer.buffer);
-    gl.deleteBuffer(this.halfSizesBuffer.buffer);
-    gl.deleteBuffer(this.colorsBuffer.buffer);
-    gl.deleteBuffer(this.cornerRadiiBuffer.buffer);
+    gl.deleteBuffer(this.centers.buffer.buffer);
+    gl.deleteBuffer(this.halfSizes.buffer.buffer);
+    gl.deleteBuffer(this.colors.buffer.buffer);
+    gl.deleteBuffer(this.cornerRadii.buffer.buffer);
     this.shaders.forEach(shader => gl.deleteShader(shader));
   }
-}
-function createInstancedBuffer(gl, program, name, size, glType, normalized) {
-  return {
-    buffer: gl.createBuffer(),
-    capacityBytes: 0,
-    lastUploaded: null,
-    location: gl.getAttribLocation(program, name),
-    size,
-    glType,
-    normalized
-  };
-}
-function uploadAndBindInstanced(gl, target, data) {
-  gl.bindBuffer(gl.ARRAY_BUFFER, target.buffer);
-  if (target.lastUploaded !== data) {
-    if (data.byteLength <= target.capacityBytes) {
-      gl.bufferSubData(gl.ARRAY_BUFFER, 0, data);
-    } else {
-      gl.bufferData(gl.ARRAY_BUFFER, data, gl.DYNAMIC_DRAW);
-      target.capacityBytes = data.byteLength;
-    }
-    target.lastUploaded = data;
-  }
-  gl.enableVertexAttribArray(target.location);
-  gl.vertexAttribPointer(target.location, target.size, target.glType, target.normalized, 0, 0);
-  gl.vertexAttribDivisor(target.location, 1);
 }

package/BarChartPremium/webgl/shaders.d.mts

@@ -1,2 +1,2 @@
 export declare const barVertexShaderSource = "\n    precision mediump float;\n\n    attribute vec2 a_position;\n    attribute vec2 a_center;\n    attribute vec2 a_halfSize;\n    attribute vec4 a_color;\n    attribute vec4 a_cornerRadii;\n\n    varying vec4 v_color;\n    varying vec2 v_pos;\n    varying vec2 v_halfSize;\n    varying vec4 v_cornerRadii;\n\n    uniform vec2 u_resolution;\n\n    void main() {\n      vec2 position = a_center + a_position * a_halfSize;\n      vec2 clipSpace = (position / u_resolution) * 2.0 - 1.0;\n      gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);\n\n      v_color = a_color;\n      v_pos = a_position * a_halfSize;\n      v_halfSize = a_halfSize;\n      v_cornerRadii = a_cornerRadii;\n    }\n  ";
-export declare const barFragmentShaderSource = "\n    precision mediump float;\n\n    varying vec4 v_color;\n    varying vec2 v_pos;\n    varying vec2 v_halfSize;\n    varying vec4 v_cornerRadii;\n\n    float roundedBoxSDF(vec2 pos, vec2 halfSize, vec4 r) {\n      float radius;\n      if (pos.x < 0.0) {\n        radius = pos.y < 0.0 ? r.x : r.w;\n      } else {\n        radius = pos.y < 0.0 ? r.y : r.z;\n      }\n\n      vec2 q = abs(pos) - halfSize + radius;\n      return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - radius;\n    }\n\n    void main() {\n      float dist = roundedBoxSDF(v_pos, v_halfSize, v_cornerRadii);\n      // Anti-alias only outside the SDF (dist >= 0). Starting smoothstep at 0\n      // keeps interior pixels at full color instead of fading them.\n      float alpha = 1.0 - smoothstep(0.0, 0.5, dist);\n\n      gl_FragColor = vec4(v_color.rgb, v_color.a * alpha);\n    }\n  ";
+export declare const barFragmentShaderSource = "\n    precision mediump float;\n\n    varying vec4 v_color;\n    varying vec2 v_pos;\n    varying vec2 v_halfSize;\n    varying vec4 v_cornerRadii;\n\n    \n    float roundedBoxSDF(vec2 pos, vec2 halfSize, vec4 r) {\n      float radius;\n      if (pos.x < 0.0) {\n        radius = pos.y < 0.0 ? r.x : r.w;\n      } else {\n        radius = pos.y < 0.0 ? r.y : r.z;\n      }\n\n      vec2 q = abs(pos) - halfSize + radius;\n      return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - radius;\n    }\n  \n\n    void main() {\n      float dist = roundedBoxSDF(v_pos, v_halfSize, v_cornerRadii);\n      // Anti-alias only outside the SDF (dist >= 0). Starting smoothstep at 0\n      // keeps interior pixels at full color instead of fading them.\n      float alpha = 1.0 - smoothstep(0.0, 0.5, dist);\n\n      gl_FragColor = vec4(v_color.rgb, v_color.a * alpha);\n    }\n  ";

package/BarChartPremium/webgl/shaders.d.ts

@@ -1,2 +1,2 @@
 export declare const barVertexShaderSource = "\n    precision mediump float;\n\n    attribute vec2 a_position;\n    attribute vec2 a_center;\n    attribute vec2 a_halfSize;\n    attribute vec4 a_color;\n    attribute vec4 a_cornerRadii;\n\n    varying vec4 v_color;\n    varying vec2 v_pos;\n    varying vec2 v_halfSize;\n    varying vec4 v_cornerRadii;\n\n    uniform vec2 u_resolution;\n\n    void main() {\n      vec2 position = a_center + a_position * a_halfSize;\n      vec2 clipSpace = (position / u_resolution) * 2.0 - 1.0;\n      gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);\n\n      v_color = a_color;\n      v_pos = a_position * a_halfSize;\n      v_halfSize = a_halfSize;\n      v_cornerRadii = a_cornerRadii;\n    }\n  ";
-export declare const barFragmentShaderSource = "\n    precision mediump float;\n\n    varying vec4 v_color;\n    varying vec2 v_pos;\n    varying vec2 v_halfSize;\n    varying vec4 v_cornerRadii;\n\n    float roundedBoxSDF(vec2 pos, vec2 halfSize, vec4 r) {\n      float radius;\n      if (pos.x < 0.0) {\n        radius = pos.y < 0.0 ? r.x : r.w;\n      } else {\n        radius = pos.y < 0.0 ? r.y : r.z;\n      }\n\n      vec2 q = abs(pos) - halfSize + radius;\n      return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - radius;\n    }\n\n    void main() {\n      float dist = roundedBoxSDF(v_pos, v_halfSize, v_cornerRadii);\n      // Anti-alias only outside the SDF (dist >= 0). Starting smoothstep at 0\n      // keeps interior pixels at full color instead of fading them.\n      float alpha = 1.0 - smoothstep(0.0, 0.5, dist);\n\n      gl_FragColor = vec4(v_color.rgb, v_color.a * alpha);\n    }\n  ";
+export declare const barFragmentShaderSource = "\n    precision mediump float;\n\n    varying vec4 v_color;\n    varying vec2 v_pos;\n    varying vec2 v_halfSize;\n    varying vec4 v_cornerRadii;\n\n    \n    float roundedBoxSDF(vec2 pos, vec2 halfSize, vec4 r) {\n      float radius;\n      if (pos.x < 0.0) {\n        radius = pos.y < 0.0 ? r.x : r.w;\n      } else {\n        radius = pos.y < 0.0 ? r.y : r.z;\n      }\n\n      vec2 q = abs(pos) - halfSize + radius;\n      return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - radius;\n    }\n  \n\n    void main() {\n      float dist = roundedBoxSDF(v_pos, v_halfSize, v_cornerRadii);\n      // Anti-alias only outside the SDF (dist >= 0). Starting smoothstep at 0\n      // keeps interior pixels at full color instead of fading them.\n      float alpha = 1.0 - smoothstep(0.0, 0.5, dist);\n\n      gl_FragColor = vec4(v_color.rgb, v_color.a * alpha);\n    }\n  ";

package/BarChartPremium/webgl/shaders.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.barVertexShaderSource = exports.barFragmentShaderSource = void 0;
+var _glsl = require("../../utils/webgl/glsl");
 // language=Glsl
 const barVertexShaderSource = exports.barVertexShaderSource = /* glsl */`
     precision mediump float;
@@ -34,10 +35,6 @@ const barVertexShaderSource = exports.barVertexShaderSource = /* glsl */`
   `;
 
 // language=Glsl
-// Per-corner radii ordering follows CSS: top-left, top-right, bottom-right, bottom-left.
-// Screen-space conventions after the y-flip in the vertex stage:
-//   v_pos.y < 0 -> top, v_pos.y > 0 -> bottom
-//   v_pos.x < 0 -> left, v_pos.x > 0 -> right
 const barFragmentShaderSource = exports.barFragmentShaderSource = /* glsl */`
     precision mediump float;
 
@@ -46,17 +43,7 @@ const barFragmentShaderSource = exports.barFragmentShaderSource = /* glsl */`
     varying vec2 v_halfSize;
     varying vec4 v_cornerRadii;
 
-    float roundedBoxSDF(vec2 pos, vec2 halfSize, vec4 r) {
-      float radius;
-      if (pos.x < 0.0) {
-        radius = pos.y < 0.0 ? r.x : r.w;
-      } else {
-        radius = pos.y < 0.0 ? r.y : r.z;
-      }
-
-      vec2 q = abs(pos) - halfSize + radius;
-      return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - radius;
-    }
+    ${_glsl.ROUNDED_BOX_SDF_GLSL}
 
     void main() {
       float dist = roundedBoxSDF(v_pos, v_halfSize, v_cornerRadii);