Merge pull request #3058 from ag-grid/AG-13501

AG-13501 Fix inconsistent use of visibility
ag-grid · Nov 27, 2024 · faf75e5 · faf75e5
2 parents 74c7a98 + 84a4a17
commit faf75e5
Show file tree

Hide file tree

Showing 11 changed files with 21 additions and 52 deletions.
diff --git a/packages/ag-charts-community/src/chart/series/cartesian/bubbleSeries.ts b/packages/ag-charts-community/src/chart/series/cartesian/bubbleSeries.ts
@@ -150,7 +150,7 @@ export class BubbleSeries extends CartesianSeries<Group, BubbleSeriesProperties,
     }
 
     override createNodeData() {
-        const { axes, dataModel, processedData, colorScale, sizeScale } = this;
+        const { axes, dataModel, processedData, colorScale, sizeScale, visible } = this;
         const {
             xKey,
             yKey,
@@ -166,7 +166,6 @@ export class BubbleSeries extends CartesianSeries<Group, BubbleSeriesProperties,
             label,
             colorKey,
             marker,
-            visible,
         } = this.properties;
         const markerShape = getMarker(marker.shape);
         const { placement } = label;

diff --git a/packages/ag-charts-community/src/chart/series/cartesian/scatterSeries.ts b/packages/ag-charts-community/src/chart/series/cartesian/scatterSeries.ts
@@ -115,21 +115,9 @@ export class ScatterSeries extends CartesianSeries<Group, ScatterSeriesPropertie
     }
 
     override createNodeData() {
-        const { axes, dataModel, processedData, colorScale } = this;
-        const {
-            xKey,
-            yKey,
-            xFilterKey,
-            yFilterKey,
-            labelKey,
-            colorKey,
-            xName,
-            yName,
-            labelName,
-            marker,
-            label,
-            visible,
-        } = this.properties;
+        const { axes, dataModel, processedData, colorScale, visible } = this;
+        const { xKey, yKey, xFilterKey, yFilterKey, labelKey, colorKey, xName, yName, labelName, marker, label } =
+            this.properties;
         const { placement } = label;
         const markerShape = getMarker(marker.shape);
 

diff --git a/packages/ag-charts-community/src/chart/series/series.ts b/packages/ag-charts-community/src/chart/series/series.ts
@@ -253,13 +253,15 @@ export abstract class Series<
     }
 
     set visible(value: boolean) {
+        // @ts-expect-error(2341) Ensure properties.visible is only accessed from here
         this.properties.visible = value;
         this.ctx.legendManager.toggleItem({ enabled: value, seriesId: this.id });
         this.ctx.legendManager.update();
         this.visibleMaybeChanged();
     }
 
     get visible() {
+        // @ts-expect-error(2341) Ensure properties.visible is only accessed from here
         return this.properties.visible && this.ctx.legendManager.getSeriesEnabled(this.id);
     }
 

diff --git a/packages/ag-charts-community/src/chart/series/seriesProperties.ts b/packages/ag-charts-community/src/chart/series/seriesProperties.ts
@@ -74,8 +74,9 @@ export abstract class SeriesProperties<T extends object> extends BaseProperties<
     @Validate(STRING, { optional: true })
     id?: string;
 
+    // Private - use series.visible
     @Validate(BOOLEAN)
-    visible: boolean = true;
+    protected readonly visible: boolean = true;
 
     @Validate(REAL_NUMBER, { optional: true })
     focusPriority?: number = Infinity;

diff --git a/packages/ag-charts-enterprise/src/series/candlestick/candlestickSeries.ts b/packages/ag-charts-enterprise/src/series/candlestick/candlestickSeries.ts
@@ -236,14 +236,14 @@ export class CandlestickSeries extends OhlcSeriesBase<CandlestickNode, Candlesti
             id,
             data,
             ctx: { legendManager },
+            visible,
         } = this;
         const {
             xKey,
             yName,
             item: { up, down },
             showInLegend,
             legendItemName,
-            visible,
         } = this.properties;
 
         if (!data?.length || !xKey || legendType !== 'category') {

diff --git a/packages/ag-charts-enterprise/src/series/funnel/baseFunnelSeries.ts b/packages/ag-charts-enterprise/src/series/funnel/baseFunnelSeries.ts
@@ -309,7 +309,7 @@ export abstract class BaseFunnelSeries<
             visible: this.visible,
         };
 
-        const isVisible = this.visible && this.properties.visible;
+        const isVisible = this.visible;
         if (!isVisible) return context;
 
         const xValues = dataModel.resolveKeysById(this, 'xValue', processedData);

diff --git a/packages/ag-charts-enterprise/src/series/ohlc/ohlcSeries.ts b/packages/ag-charts-enterprise/src/series/ohlc/ohlcSeries.ts
@@ -191,14 +191,14 @@ export class OhlcSeries extends OhlcSeriesBase<OhlcNode, OhlcSeriesProperties> {
             id,
             data,
             ctx: { legendManager },
+            visible,
         } = this;
         const {
             xKey,
             yName,
             item: { up, down },
             showInLegend,
             legendItemName,
-            visible,
         } = this.properties;
 
         if (!data?.length || !xKey || legendType !== 'category') {

diff --git a/packages/ag-charts-enterprise/src/series/radar/radarSeries.ts b/packages/ag-charts-enterprise/src/series/radar/radarSeries.ts
@@ -308,7 +308,8 @@ export abstract class RadarSeries extends _ModuleSupport.PolarSeries<
         selection: _ModuleSupport.Selection<_ModuleSupport.Marker, RadarNodeDatum>,
         highlight: boolean
     ) {
-        const { angleKey, radiusKey, marker, visible } = this.properties;
+        const { visible } = this;
+        const { angleKey, radiusKey, marker } = this.properties;
         const { itemStyler } = marker;
 
         let selectionData: RadarNodeDatum[] = [];

diff --git a/packages/ag-charts-enterprise/src/series/radial-bar/radialBarSeries.ts b/packages/ag-charts-enterprise/src/series/radial-bar/radialBarSeries.ts
@@ -93,15 +93,6 @@ export class RadialBarSeries extends _ModuleSupport.PolarSeries<
         return new Sector();
     }
 
-    override addChartEventListeners(): void {
-        this.destroyFns.push(
-            this.ctx.chartEventManager?.addListener('legend-item-click', (event) => this.onLegendItemClick(event)),
-            this.ctx.chartEventManager?.addListener('legend-item-double-click', (event) =>
-                this.onLegendItemDoubleClick(event)
-            )
-        );
-    }
-
     override getSeriesDomain(direction: _ModuleSupport.ChartAxisDirection): any[] {
         const { dataModel, processedData } = this;
         if (!processedData || !dataModel) return [];
@@ -116,10 +107,11 @@ export class RadialBarSeries extends _ModuleSupport.PolarSeries<
     }
 
     override async processData(dataController: _ModuleSupport.DataController) {
-        const { angleKey, radiusKey, normalizedTo, visible } = this.properties;
+        const { visible } = this;
+        const { angleKey, radiusKey, normalizedTo } = this.properties;
         const animationEnabled = !this.ctx.animationManager.isSkipped();
 
-        if (!this.properties.isValid() || !(visible || animationEnabled)) return;
+        if (!this.properties.isValid()) return;
 
         const stackGroupId = this.getStackId();
         const stackGroupTrailingId = `${stackGroupId}-trailing`;
@@ -137,7 +129,7 @@ export class RadialBarSeries extends _ModuleSupport.PolarSeries<
             extraProps.push(animationValidation());
         }
 
-        const visibleProps = this.visible || !animationEnabled ? {} : { forceValue: 0 };
+        const visibleProps = visible || !animationEnabled ? {} : { forceValue: 0 };
 
         const radiusScaleType = this.axes[ChartAxisDirection.Y]?.scale.type;
         const angleScaleType = this.axes[ChartAxisDirection.X]?.scale.type;

diff --git a/packages/ag-charts-enterprise/src/series/radial-column/radialColumnSeriesBase.ts b/packages/ag-charts-enterprise/src/series/radial-column/radialColumnSeriesBase.ts
@@ -97,15 +97,6 @@ export abstract class RadialColumnSeriesBase<
         });
     }
 
-    override addChartEventListeners(): void {
-        this.destroyFns.push(
-            this.ctx.chartEventManager?.addListener('legend-item-click', (event) => this.onLegendItemClick(event)),
-            this.ctx.chartEventManager?.addListener('legend-item-double-click', (event) =>
-                this.onLegendItemDoubleClick(event)
-            )
-        );
-    }
-
     override getSeriesDomain(direction: _ModuleSupport.ChartAxisDirection): any[] {
         const { dataModel, processedData } = this;
         if (!processedData || !dataModel) return [];
@@ -122,10 +113,11 @@ export abstract class RadialColumnSeriesBase<
     protected abstract getStackId(): string;
 
     override async processData(dataController: _ModuleSupport.DataController) {
-        const { angleKey, radiusKey, normalizedTo, visible } = this.properties;
+        const { visible } = this;
+        const { angleKey, radiusKey, normalizedTo } = this.properties;
         const animationEnabled = !this.ctx.animationManager.isSkipped();
 
-        if (!this.properties.isValid() || !(visible || animationEnabled)) return;
+        if (!this.properties.isValid()) return;
 
         const stackGroupId = this.getStackId();
         const stackGroupTrailingId = `${stackGroupId}-trailing`;

diff --git a/packages/ag-charts-enterprise/src/series/range-bar/rangeBarSeries.ts b/packages/ag-charts-enterprise/src/series/range-bar/rangeBarSeries.ts
@@ -235,13 +235,7 @@ export class RangeBarSeries extends _ModuleSupport.AbstractBarSeries<
     }
 
     override createNodeData() {
-        const {
-            data,
-            dataModel,
-            groupScale,
-            processedData,
-            properties: { visible },
-        } = this;
+        const { data, dataModel, groupScale, processedData, visible } = this;
         const xAxis = this.getCategoryAxis();
         const yAxis = this.getValueAxis();