AG-11561 Sankey, Chord fixes

packages/ag-charts-community/src/chart/factory/expectedEnterpriseModules.ts

@@ -101,6 +101,10 @@ export function isEnterpriseTopology(seriesType: string) {
     const type = getEnterpriseSeriesChartTypes(seriesType)?.find((v) => v === 'topology');
     return type === 'topology';
 }
+export function isEnterpriseFlowProportion(seriesType: string) {
+    const type = getEnterpriseSeriesChartTypes(seriesType)?.find((v) => v === 'flow-proportion');
+    return type === 'flow-proportion';
+}
 
 type UnknownPackage = { packageType: string } | EnterpriseModuleStub;
 function isEnterpriseModule(module: UnknownPackage): module is EnterpriseModuleStub {

packages/ag-charts-community/src/chart/flowProportionChart.ts

@@ -49,7 +49,7 @@ export class FlowProportionChart extends Chart {
             group.translationX = Math.floor(shrinkRect.x);
             group.translationY = Math.floor(shrinkRect.y);
             group.setClipRectInGroupCoordinateSpace(
-                new BBox(shrinkRect.x, shrinkRect.y, shrinkRect.width, shrinkRect.height)
+                new BBox(fullSeriesRect.x, fullSeriesRect.y, fullSeriesRect.width, fullSeriesRect.height)
             );
         }
 

packages/ag-charts-community/src/chart/mapping/types.ts

@@ -11,6 +11,7 @@ import { axisRegistry } from '../factory/axisRegistry';
 import { chartTypes } from '../factory/chartTypes';
 import {
     isEnterpriseCartesian,
+    isEnterpriseFlowProportion,
     isEnterpriseHierarchy,
     isEnterprisePolar,
     isEnterpriseTopology,
@@ -91,7 +92,7 @@ export function isAgFlowProportionChartOptions(input: AgChartOptions): input is
         return true;
     }
 
-    return chartTypes.isFlowProportion(specifiedType) || isEnterpriseTopology(specifiedType);
+    return chartTypes.isFlowProportion(specifiedType) || isEnterpriseFlowProportion(specifiedType);
 }
 
 export function isAgPolarChartOptionsWithSeriesBasedLegend(input: AgChartOptions): input is AgPolarChartOptions {

packages/ag-charts-community/src/options/series/flow-proportion/chordOptions.ts

@@ -1,6 +1,6 @@
 import type { AgChartCallbackParams } from '../../chart/callbackOptions';
 import type { AgChartLabelOptions } from '../../chart/labelOptions';
-import type { AgSeriesTooltipRendererParams } from '../../chart/tooltipOptions';
+import type { AgSeriesTooltip, AgSeriesTooltipRendererParams } from '../../chart/tooltipOptions';
 import type { CssColor, PixelSize } from '../../chart/types';
 import type { FillOptions, LineDashOptions, StrokeOptions } from '../cartesian/commonOptions';
 import type { AgBaseSeriesOptions, AgBaseSeriesThemeableOptions } from '../seriesOptions';
@@ -11,8 +11,6 @@ export interface AgChordSeriesOptions<TDatum = any>
         AgChordSeriesThemeableOptions<TDatum> {
     /** Configuration for the Chord Series. */
     type: 'chord';
-    /** Nodes to use instead of inferring from data. */
-    nodes?: any[];
 }
 
 export interface AgChordSeriesThemeableOptions<TDatum = any> extends AgBaseSeriesThemeableOptions<TDatum> {
@@ -26,6 +24,8 @@ export interface AgChordSeriesThemeableOptions<TDatum = any> extends AgBaseSerie
     link?: AgChordSeriesLinkOptions;
     /** Options for the nodes. */
     node?: AgChordSeriesNodeOptions;
+    /** Series-specific tooltip configuration. */
+    tooltip?: AgSeriesTooltip<AgChordSeriesTooltipRendererParams>;
 }
 
 export interface AgChordSeriesLabelOptions<TDatum>
@@ -42,8 +42,8 @@ export interface AgChordSeriesLinkOptions extends AgChordSeriesLinkStyle {}
 export interface AgChordSeriesNodeOptions extends FillOptions, StrokeOptions, LineDashOptions {
     /** Spacing of the nodes. */
     spacing?: PixelSize;
-    /** Height of the nodes. */
-    height?: PixelSize;
+    /** Width of the nodes. */
+    width?: PixelSize;
 }
 
 export interface AgChordSeriesOptionsKeys {
@@ -53,10 +53,6 @@ export interface AgChordSeriesOptionsKeys {
     toKey?: string;
     /** The key containing the size. */
     sizeKey?: string;
-    /** The node key containing the id when using the `nodes` property. */
-    idKey?: string;
-    /** The label key containing the id when using the `nodes` property. */
-    labelKey?: string;
 }
 
 export interface AgChordSeriesOptionsNames {
@@ -66,10 +62,6 @@ export interface AgChordSeriesOptionsNames {
     toIdName?: string;
     /** The name of the node key containing the size. */
     sizeName?: string;
-    /** The name of the node key containing the node id. */
-    idName?: string;
-    /** The name of the node key containing the label. */
-    labelName?: string;
 }
 
 export interface AgChordSeriesTooltipRendererParams

packages/ag-charts-community/src/options/series/flow-proportion/sankeyOptions.ts

@@ -1,6 +1,6 @@
 import type { AgChartCallbackParams } from '../../chart/callbackOptions';
 import type { AgChartLabelOptions } from '../../chart/labelOptions';
-import type { AgSeriesTooltipRendererParams } from '../../chart/tooltipOptions';
+import type { AgSeriesTooltip, AgSeriesTooltipRendererParams } from '../../chart/tooltipOptions';
 import type { CssColor, PixelSize } from '../../chart/types';
 import type { FillOptions, LineDashOptions, StrokeOptions } from '../cartesian/commonOptions';
 import type { AgBaseSeriesOptions, AgBaseSeriesThemeableOptions } from '../seriesOptions';
@@ -11,8 +11,6 @@ export interface AgSankeySeriesOptions<TDatum = any>
         AgSankeySeriesThemeableOptions<TDatum> {
     /** Configuration for the Sankey Series. */
     type: 'sankey';
-    /** Nodes to use instead of inferring from data. */
-    nodes?: any[];
 }
 
 export interface AgSankeySeriesThemeableOptions<TDatum = any> extends AgBaseSeriesThemeableOptions<TDatum> {
@@ -26,6 +24,8 @@ export interface AgSankeySeriesThemeableOptions<TDatum = any> extends AgBaseSeri
     link?: AgSankeySeriesLinkOptions;
     /** Options for the nodes. */
     node?: AgSankeySeriesNodeOptions;
+    /** Series-specific tooltip configuration. */
+    tooltip?: AgSeriesTooltip<AgSankeySeriesTooltipRendererParams>;
 }
 
 export interface AgSankeySeriesLabelOptions<TDatum>
@@ -53,10 +53,6 @@ export interface AgSankeySeriesOptionsKeys {
     toKey?: string;
     /** The key containing the size. */
     sizeKey?: string;
-    /** The node key containing the id when using the `nodes` property. */
-    idKey?: string;
-    /** The label key containing the id when using the `nodes` property. */
-    labelKey?: string;
 }
 
 export interface AgSankeySeriesOptionsNames {
@@ -66,10 +62,6 @@ export interface AgSankeySeriesOptionsNames {
     toIdName?: string;
     /** The name of the node key containing the size. */
     sizeName?: string;
-    /** The name of the node key containing the node id. */
-    idName?: string;
-    /** The name of the node key containing the label. */
-    labelName?: string;
 }
 
 export interface AgSankeySeriesTooltipRendererParams

packages/ag-charts-enterprise/src/series/chord/chordModule.ts

@@ -9,6 +9,7 @@ export const ChordModule: _ModuleSupport.SeriesModule<'chord'> = {
     optionsKey: 'series[]',
     packageType: 'enterprise',
     chartTypes: ['flow-proportion'],
+    solo: true,
 
     identifier: 'chord',
     instanceConstructor: ChordSeries,
@@ -29,7 +30,7 @@ export const ChordModule: _ModuleSupport.SeriesModule<'chord'> = {
             },
             node: {
                 spacing: 8,
-                height: 10,
+                width: 10,
                 strokeWidth: 0,
             },
             link: {
@@ -39,6 +40,9 @@ export const ChordModule: _ModuleSupport.SeriesModule<'chord'> = {
         },
         legend: {
             enabled: false,
+            item: {
+                toggleSeriesVisible: false,
+            },
         },
     },
     paletteFactory({ takeColors, colorsCount }) {

packages/ag-charts-enterprise/src/series/chord/chordSeries.ts

@@ -56,7 +56,6 @@ export class ChordSeries extends FlowProportionSeries<
     ChordNodeDatum,
     ChordLinkDatum,
     ChordNodeLabelDatum,
-    ChordNodeLabelDatum,
     ChordSeriesProperties,
     _Scene.Sector,
     ChordLink
@@ -92,26 +91,45 @@ export class ChordSeries extends FlowProportionSeries<
             _nodeDataDependencies: { seriesRectWidth, seriesRectHeight } = { seriesRectWidth: 0, seriesRectHeight: 0 },
         } = this;
         const {
-            label: { spacing: labelSpacing, maxWidth: labelMaxWidth, fontSize, fontFamily },
-            node: { height: nodeHeight, spacing: nodeSpacing },
+            fromKey,
+            toKey,
+            sizeKey,
+            label: { spacing: labelSpacing, maxWidth: labelMaxWidth, fontSize },
+            node: { width: nodeWidth, spacing: nodeSpacing },
         } = this.properties;
         const centerX = seriesRectWidth / 2;
         const centerY = seriesRectHeight / 2;
-        const canvasFont = `${fontSize}px ${fontFamily}`;
+        const canvasFont = new Text().setProperties(this.properties.label).font;
 
         let labelData: ChordNodeLabelDatum[] = [];
 
+        const defaultLabelFormatter = (v: any) => String(v);
         const { nodeGraph, links } = this.getNodeGraph(
-            (node) => ({
-                ...node,
-                size: 0,
-                centerX,
-                centerY,
-                innerRadius: NaN,
-                outerRadius: NaN,
-                startAngle: NaN,
-                endAngle: NaN,
-            }),
+            (node) => {
+                const label = this.getLabelText(
+                    this.properties.label,
+                    {
+                        datum: node.datum,
+                        value: node.label,
+                        fromKey,
+                        toKey,
+                        sizeKey,
+                    },
+                    defaultLabelFormatter
+                );
+
+                return {
+                    ...node,
+                    label,
+                    size: 0,
+                    centerX,
+                    centerY,
+                    innerRadius: NaN,
+                    outerRadius: NaN,
+                    startAngle: NaN,
+                    endAngle: NaN,
+                };
+            },
             (link) => ({
                 ...link,
                 centerX,
@@ -150,17 +168,17 @@ export class ChordSeries extends FlowProportionSeries<
         }
 
         const nodeCount = nodeGraph.size;
-        let radius = Math.min(seriesRectWidth, seriesRectHeight) / 2 - nodeHeight - labelInset;
+        let radius = Math.min(seriesRectWidth, seriesRectHeight) / 2 - nodeWidth - labelInset;
         let spacingSweep = nodeSpacing / radius;
 
         if (labelInset != null && nodeCount * spacingSweep >= 1.5 * Math.PI) {
             // Spacing taking up more than 3/4 the circle
             labelData = [];
-            radius = Math.min(seriesRectWidth, seriesRectHeight) / 2 - nodeHeight;
+            radius = Math.min(seriesRectWidth, seriesRectHeight) / 2 - nodeWidth;
             spacingSweep = nodeSpacing / radius;
         }
 
-        if (nodeCount * spacingSweep >= 2 * Math.PI) {
+        if (nodeCount * spacingSweep >= 2 * Math.PI || radius <= 0) {
             return {
                 itemId: this.id,
                 nodeData: [],
@@ -169,7 +187,7 @@ export class ChordSeries extends FlowProportionSeries<
         }
 
         const innerRadius = radius;
-        const outerRadius = radius + nodeHeight;
+        const outerRadius = radius + nodeWidth;
 
         let totalSize = 0;
         nodeGraph.forEach(({ datum: node, linksBefore, linksAfter }) => {
@@ -344,7 +362,7 @@ export class ChordSeries extends FlowProportionSeries<
         return opts.datumSelection.update(
             opts.nodeData.filter((node): node is ChordLinkDatum => node.type === FlowProportionDatumType.Link),
             undefined,
-            (datum) => createDatumId([datum.type, datum.fromNode.id, datum.toNode.id])
+            (datum) => createDatumId([datum.type, datum.index, datum.fromNode.id, datum.toNode.id])
         );
     }
 
@@ -358,7 +376,7 @@ export class ChordSeries extends FlowProportionSeries<
             properties,
             ctx: { callbackCache },
         } = this;
-        const { fromKey, toKey, idKey, labelKey, sizeKey, formatter } = properties;
+        const { fromKey, toKey, sizeKey, formatter } = properties;
         const { fill, fillOpacity, stroke, strokeOpacity, lineDash, lineDashOffset } = properties.link;
         const highlightStyle = isHighlight ? properties.highlightStyle.item : undefined;
         const strokeWidth = this.getStrokeWidth(properties.link.strokeWidth);
@@ -372,8 +390,6 @@ export class ChordSeries extends FlowProportionSeries<
                     itemId: datum.itemId,
                     fromKey,
                     toKey,
-                    idKey,
-                    labelKey,
                     sizeKey,
                     fill,
                     fillOpacity,
@@ -418,20 +434,7 @@ export class ChordSeries extends FlowProportionSeries<
             return EMPTY_TOOLTIP_CONTENT;
         }
 
-        const {
-            fromKey,
-            fromIdName,
-            toKey,
-            toIdName,
-            idKey,
-            idName,
-            sizeKey,
-            sizeName,
-            labelKey,
-            labelName,
-            formatter,
-            tooltip,
-        } = properties;
+        const { fromKey, fromIdName, toKey, toIdName, sizeKey, sizeName, formatter, tooltip } = properties;
         const { fillOpacity, strokeOpacity, stroke, strokeWidth, lineDash, lineDashOffset } = properties.link;
         const { datum, itemId } = nodeDatum;
 
@@ -441,12 +444,16 @@ export class ChordSeries extends FlowProportionSeries<
         if (nodeDatum.type === FlowProportionDatumType.Link) {
             const { fromNode, toNode, size } = nodeDatum;
             title = `${fromNode.label ?? fromNode.id} - ${toNode.label ?? toNode.id}`;
-            contentLines.push(sanitizeHtml(`${sizeName ?? sizeKey}: ` + size));
+            if (sizeKey != null) {
+                contentLines.push(sanitizeHtml(`${sizeName ?? sizeKey}: ` + size));
+            }
             fill = properties.link.fill ?? fromNode.fill;
         } else {
             const { id, label, size } = nodeDatum;
             title = label ?? id;
-            contentLines.push(sanitizeHtml(`${sizeName ?? sizeKey}: ` + size));
+            if (sizeKey != null) {
+                contentLines.push(sanitizeHtml(`${sizeName ?? sizeKey}: ` + size));
+            }
             fill = properties.node.fill ?? nodeDatum.fill;
         }
         const content = contentLines.join('<br>');
@@ -460,8 +467,6 @@ export class ChordSeries extends FlowProportionSeries<
                 itemId: datum.itemId,
                 fromKey,
                 toKey,
-                idKey,
-                labelKey,
                 sizeKey,
                 fill,
                 fillOpacity,
@@ -488,12 +493,8 @@ export class ChordSeries extends FlowProportionSeries<
                 fromIdName,
                 toKey,
                 toIdName,
-                idKey,
-                idName,
                 sizeKey,
                 sizeName,
-                labelKey,
-                labelName,
                 ...this.getModuleTooltipParams(),
             }
         );

packages/ag-charts-enterprise/src/series/chord/chordSeriesProperties.ts

@@ -61,7 +61,7 @@ export class ChordSeriesNodeProperties extends BaseProperties<AgChordSeriesOptio
     spacing: number = 1;
 
     @Validate(POSITIVE_NUMBER)
-    height: number = 1;
+    width: number = 1;
 
     @Validate(COLOR_STRING, { optional: true })
     fill: string | undefined = undefined;
@@ -87,13 +87,13 @@ export class ChordSeriesNodeProperties extends BaseProperties<AgChordSeriesOptio
 
 export class ChordSeriesProperties extends SeriesProperties<AgChordSeriesOptions> {
     @Validate(STRING)
-    fromKey: string = '';
+    fromKey!: string;
 
     @Validate(STRING, { optional: true })
     fromIdName: string | undefined = undefined;
 
     @Validate(STRING)
-    toKey: string = '';
+    toKey!: string;
 
     @Validate(STRING, { optional: true })
     toIdName: string | undefined = undefined;

packages/ag-charts-enterprise/src/series/flow-proportion/flowProportionProperties.ts

@@ -1,4 +1,4 @@
-import type { _ModuleSupport } from 'ag-charts-community';
+import type { _ModuleSupport, _Scene } from 'ag-charts-community';
 
 export interface FlowProportionSeriesProperties<SeriesOptions extends {}>
     extends _ModuleSupport.SeriesProperties<SeriesOptions> {