feat: add dataKeyNames prop and initialLoadEndEvent across chart comp…

…onents in lib

Co-authored-by: Stephanie Modica <93152010+steph-modica@users.noreply.github.com>

packages/alluvial-diagram/docs/alluvial-diagram.stories.js

@@ -88,6 +88,11 @@ const Template = args => {
       args.onInitialLoad(e);
     }
   };
+  const initialLoadEnd = e => {
+    if (args.initialLoadEndEvent) {
+      args.onInitialLoadEnd(e);
+    }
+  };
   const transitionEnd = e => {
     if (args.transitionEndEvent) {
       args.onTransitionEnd(e);
@@ -105,6 +110,7 @@ const Template = args => {
       onDrawStartEvent={drawStart}
       onDrawEndEvent={drawEnd}
       onInitialLoadEvent={initialLoad}
+      onInitialLoadEndEvent={initialLoadEnd}
       onTransitionEndEvent={transitionEnd}
       {...args}
     />

packages/alluvial-diagram/src/components/alluvial-diagram/alluvial-diagram-default-values.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2021 Visa, Inc.
+ * Copyright (c) 2021, 2022 Visa, Inc.
  *
  * This source code is licensed under the MIT license
  * https://github.com/visa/visa-chart-components/blob/master/LICENSE
@@ -51,6 +51,7 @@ export class AlluvialDiagramDefaultValues {
   static readonly animationConfig = propDefaultValues.animationConfig;
   static readonly colorPalette = propDefaultValues.colorPaletteCategorical;
   static readonly dataLabel = propDefaultValues.dataLabel;
+  static readonly dataKeyNames;
   static readonly annotations = propDefaultValues.annotations;
 
   static readonly hoverStyle = propDefaultValues.hoverStyle;

packages/alluvial-diagram/src/components/alluvial-diagram/alluvial-diagram-props.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2020, 2021 Visa, Inc.
+ * Copyright (c) 2020, 2021, 2022 Visa, Inc.
  *
  * This source code is licensed under the MIT license
  * https://github.com/visa/visa-chart-components/blob/master/LICENSE
@@ -168,6 +168,12 @@ export interface IAlluvialDiagramProps {
    * @groupName Labels */
   dataLabel: IDataLabelType;
 
+  /**
+   * @shortDescription Enables custom, user friendly names for data keys
+   * @controlName TextArea
+   * @groupName Labels */
+  dataKeyNames: object;
+
   /**
    * @shortDescription When selected, allows tooltips to be displayed
    * @controlName Toggle
@@ -216,6 +222,12 @@ export interface IAlluvialDiagramProps {
    * @groupName Events */
   initialLoadEvent: any;
 
+  /**
+   * @shortDescription Set a callback to execute when chart's initial load ends.
+   * @controlName Toggle
+   * @groupName Events */
+  initialLoadEndEvent: any;
+
   /**
    * @shortDescription Set a callback to execute when chart drawing starts.
    * @controlName Toggle

packages/alluvial-diagram/src/components/alluvial-diagram/alluvial-diagram.tsx

@@ -89,6 +89,7 @@ export class AlluvialDiagram {
   @Event() hoverEvent: EventEmitter;
   @Event() mouseOutEvent: EventEmitter;
   @Event() initialLoadEvent: EventEmitter;
+  @Event() initialLoadEndEvent: EventEmitter;
   @Event() drawStartEvent: EventEmitter;
   @Event() drawEndEvent: EventEmitter;
   @Event() transitionEndEvent: EventEmitter;
@@ -125,6 +126,7 @@ export class AlluvialDiagram {
 
   // Data label (5/7)
   @Prop({ mutable: true }) dataLabel: IDataLabelType = AlluvialDiagramDefaultValues.dataLabel;
+  @Prop({ mutable: true }) dataKeyNames: object;
   @Prop({ mutable: true }) showTooltip: boolean = AlluvialDiagramDefaultValues.showTooltip;
   @Prop({ mutable: true }) tooltipLabel: ITooltipLabelType = AlluvialDiagramDefaultValues.tooltipLabel;
   @Prop({ mutable: true }) accessibility: IAccessibilityType = AlluvialDiagramDefaultValues.accessibility;
@@ -191,7 +193,6 @@ export class AlluvialDiagram {
   innerNodeInteractionKeys: any;
   innerLinkInteractionKeys: any;
   innerInteractionKeys: any = [];
-  interactionKeysWithObjs: any;
   colorArr: any;
   noLinksLeftPadding: any;
   widthAllNodesNoLinks: any;
@@ -598,6 +599,8 @@ export class AlluvialDiagram {
   @Watch('tooltipLabel')
   tooltipLabelWatcher(_newVal, _oldVal) {
     this.shouldUpdateTableData = true;
+    this.shouldSetParentSVGAccessibility = true;
+    this.shouldSetGeometryAriaLabels = true;
   }
 
   @Watch('showTooltip')
@@ -743,6 +746,13 @@ export class AlluvialDiagram {
     this.shouldUpdateCursor = true;
   }
 
+  @Watch('dataKeyNames')
+  dataKeyNamesWatcher(_newVal, _oldVal) {
+    this.shouldSetParentSVGAccessibility = true;
+    this.shouldSetGroupAccessibilityLabel = true;
+    this.shouldSetGeometryAriaLabels = true;
+  }
+
   @Watch('suppressEvents')
   suppressWatcher(_newVal, _oldVal) {
     this.shouldBindInteractivity = true;
@@ -851,7 +861,7 @@ export class AlluvialDiagram {
       this.defaults = false;
       hideNonessentialGroups(this.root.node(), null);
       resolve('component did load');
-    });
+    }).then(() => this.initialLoadEndEvent.emit({ chartID: this.chartID }));
   }
 
   componentDidUpdate() {
@@ -1077,7 +1087,6 @@ export class AlluvialDiagram {
   }
 
   validateInteractionKeys() {
-    this.interactionKeysWithObjs = [];
     this.innerInteractionKeys = [];
 
     this.innerInteractionKeys =
@@ -1778,7 +1787,6 @@ export class AlluvialDiagram {
     //         this.hoverHighlight,
     //         this.clickHighlight,
     //         this.innerInteractionKeys,
-    //         this.interactionKeysWithObjs,
     //         this.nodeIDAccessor
     //       ) >= 1
     //   );
@@ -1793,7 +1801,6 @@ export class AlluvialDiagram {
     //         this.hoverHighlight,
     //         this.clickHighlight,
     //         this.innerInteractionKeys,
-    //         this.interactionKeysWithObjs,
     //         this.nodeIDAccessor
     //       ) >= 1
     //   );
@@ -2552,6 +2559,7 @@ export class AlluvialDiagram {
       geomType: 'link',
       includeKeyNames: this.accessibility.includeDataKeyNames,
       dataKeys: keys,
+      dataKeyNames: this.dataKeyNames,
       groupAccessor: this.innerIDAccessor,
       groupKeys: ['value'],
       groupName: 'node',
@@ -2579,6 +2587,7 @@ export class AlluvialDiagram {
         geomType: 'link',
         includeKeyNames: this.accessibility.includeDataKeyNames,
         dataKeys: keys,
+        dataKeyNames: this.dataKeyNames,
         groupName: 'node',
         uniqueID: this.chartID,
         disableKeyNav:
@@ -2714,6 +2723,7 @@ export class AlluvialDiagram {
       event: evt,
       isToShow,
       tooltipLabel: this.tooltipLabel,
+      dataKeyNames: this.dataKeyNames,
       groupAccessor: this.groupAccessor,
       xAccessor: this.sourceAccessor, // map source to x for default tooltip logic
       yAccessor: this.targetAccessor, // map source to y for default tooltip logic
@@ -2821,6 +2831,7 @@ export class AlluvialDiagram {
               uniqueID={this.chartID}
               isCompact
               tableColumns={this.tableColumns}
+              dataKeyNames={this.dataKeyNames}
               data={this.tableData}
               secondaryData={this.secondaryTableData}
               secondaryTableColumns={this.secondaryTableColumns}

packages/alluvial-diagram/src/components/app-alluvial-diagram/app-alluvial-diagram.tsx

@@ -112,6 +112,7 @@ export class AppAlluvialDiagram {
     contextExplanation: 'This chart is standalone, and can be manipulated by the preceding buttons.',
     executiveSummary: 'Medium is now the largest category in 2019.',
     purpose: 'Examines the flow of groups, between cateogries, over years.',
+    includeDataKeyNames: true,
     structureNotes:
       'The categories are sorted from high to low, with new at the bottom. Links are used to visualize the population of the group moving between categories year over year.',
     statisticalNotes: 'Count of group members.',
@@ -736,6 +737,11 @@ export class AppAlluvialDiagram {
     ],
     this.nodeStartData
   ];
+  dataKeyNames: any = {
+    id: 'Test ID',
+    Freq: 'Frequency Value',
+    newHair: 'Hair Color'
+  };
 
   @Element()
   appEl: HTMLElement;
@@ -1225,11 +1231,12 @@ export class AppAlluvialDiagram {
             mainTitle={''}
             subTitle={''}
             dataLabel={this.dataLabel}
+            dataKeyNames={this.dataKeyNames}
             // interactionKeys={this.interactionKeys}
             hoverOpacity={0.2}
             showTooltip={true}
             colorPalette={'categorical'}
-            tooltipLabel={this.tooltipLabel}
+            // tooltipLabel={this.tooltipLabel}
             hoverHighlight={this.hoverElement}
             clickHighlight={this.clickElement}
             onClickEvent={d => this.onClickFunc(d)}

packages/alluvial-diagram/src/index.html

@@ -1,5 +1,5 @@
 <!--
- * Copyright (c) 2020, 2021 Visa, Inc.
+ * Copyright (c) 2020, 2021, 2022 Visa, Inc.
  *
  * This source code is licensed under the MIT license
  * https://github.com/visa/visa-chart-components/blob/master/LICENSE