@fluentui/react-charting 5.11.0 → 5.12.2

package/lib-amd/components/Legends/Legends.base.js.map

@@ -1 +1 @@
-{"version":3,"file":"Legends.base.js","sourceRoot":"../src/","sources":["components/Legends/Legends.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport { IContextualMenuItem } from '@fluentui/react/lib/ContextualMenu';\nimport { HoverCard, HoverCardType, IExpandingCardProps } from '@fluentui/react/lib/HoverCard';\nimport { classNamesFunction, find, getNativeProps, buttonProperties } from '@fluentui/react/lib/Utilities';\nimport { ResizeGroup } from '@fluentui/react/lib/ResizeGroup';\nimport { IProcessedStyleSet } from '@fluentui/react/lib/Styling';\nimport { OverflowSet, IOverflowSetItemProps } from '@fluentui/react/lib/OverflowSet';\nimport { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';\nimport {\n  ILegend,\n  ILegendsProps,\n  LegendShape,\n  ILegendsStyles,\n  ILegendStyleProps,\n  ILegendOverflowData,\n} from './Legends.types';\nimport { Shape } from './shape';\n\nimport { silceOrAppendToArray } from '../../utilities/utilities';\n\nconst getClassNames = classNamesFunction<ILegendStyleProps, ILegendsStyles>();\n\n// This is an internal interface used for rendering the legends with unique key\ninterface ILegendItem extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  name?: string;\n  title: string;\n  action: VoidFunction;\n  hoverAction: VoidFunction;\n  onMouseOutAction: VoidFunction;\n  color: string;\n  shape?: LegendShape;\n  key: number;\n  opacity?: number;\n  stripePattern?: boolean;\n  isLineLegendInBarChart?: boolean;\n}\n\nexport interface ILegendState {\n  selectedLegend: string;\n  selecetedLegendInHoverCard: string;\n  selectedState: boolean;\n  hoverState: boolean;\n  isHoverCardVisible: boolean;\n  selectedLegends: string[];\n}\nexport class LegendsBase extends React.Component<ILegendsProps, ILegendState> {\n  private _hoverCardRef: HTMLDivElement;\n  private _classNames: IProcessedStyleSet<ILegendsStyles>;\n\n  public constructor(props: ILegendsProps) {\n    super(props);\n    this.state = {\n      selectedLegend: 'none',\n      selectedState: false,\n      hoverState: false,\n      isHoverCardVisible: false,\n      selecetedLegendInHoverCard: 'none',\n      selectedLegends: [],\n    };\n  }\n\n  public componentDidUpdate(prevProps: ILegendsProps) {\n    if (prevProps.selectedLegend !== this.props.selectedLegend) {\n      this.setState({ selectedLegend: this.props.selectedLegend! });\n    }\n  }\n\n  public render(): JSX.Element {\n    const { theme, className, styles } = this.props;\n    this._classNames = getClassNames(styles!, {\n      theme: theme!,\n      className,\n    });\n    const dataToRender = this._generateData();\n    return (\n      <div className={this._classNames.root}>\n        {this.props.enabledWrapLines ? (\n          this._onRenderData(dataToRender)\n        ) : (\n          <ResizeGroup\n            data={dataToRender}\n            onReduceData={this._onReduceData}\n            onRenderData={this._onRenderData}\n            onGrowData={this._onGrowData}\n          />\n        )}\n      </div>\n    );\n  }\n\n  private _generateData(): ILegendOverflowData {\n    const { allowFocusOnLegends = true } = this.props;\n    const dataItems: ILegendItem[] = this.props.legends.map((legend: ILegend, index: number) => {\n      return {\n        ...(allowFocusOnLegends && {\n          nativeButtonProps: getNativeProps<React.HTMLAttributes<HTMLButtonElement>>(legend, buttonProperties, [\n            'title',\n          ]),\n          'aria-setsize': this.props.legends.length,\n          'aria-posinset': index + 1,\n        }),\n        title: legend.title,\n        action: legend.action!,\n        hoverAction: legend.hoverAction!,\n        onMouseOutAction: legend.onMouseOutAction!,\n        color: legend.color,\n        shape: legend.shape,\n        stripePattern: legend.stripePattern,\n        isLineLegendInBarChart: legend.isLineLegendInBarChart,\n        opacity: legend.opacity,\n        key: index,\n      };\n    });\n    const result: ILegendOverflowData = {\n      primary: dataItems,\n      overflow: [],\n    };\n    return result;\n  }\n\n  private _onRenderData = (data: IOverflowSetItemProps | ILegendOverflowData): JSX.Element => {\n    const { overflowProps, allowFocusOnLegends = true } = this.props;\n    const rootStyles = {\n      root: {\n        justifyContent: this.props.centerLegends ? 'center' : 'unset',\n        flexWrap: 'wrap',\n      },\n    };\n    return (\n      <OverflowSet\n        {...(allowFocusOnLegends && { role: 'listbox', 'aria-label': 'Legends' })}\n        items={data.primary}\n        overflowItems={data.overflow}\n        onRenderItem={this._renderButton}\n        onRenderOverflowButton={this._renderOverflowItems}\n        {...overflowProps}\n        styles={{ ...rootStyles, ...overflowProps?.styles }}\n      />\n    );\n  };\n\n  private _onReduceData = (currentdata: IOverflowSetItemProps): {} | void => {\n    if (currentdata.primary.length === 0) {\n      return;\n    }\n    const overflow = [...currentdata.primary.slice(-1), ...currentdata.overflow];\n    const primary = currentdata.primary.slice(0, -1);\n    return { primary, overflow };\n  };\n\n  private _onGrowData = (currentdata: IOverflowSetItemProps): {} | void => {\n    if (currentdata.overflow.length === 0) {\n      return;\n    }\n    const overflow = currentdata.overflow.slice(1);\n    const primary = [...currentdata.primary, ...currentdata.overflow.slice(0, 1)];\n    return { primary, overflow };\n  };\n\n  /**\n   * This function will get called when there is an ability to\n   * select  multiple legends\n   * @param legend ILegend\n   */\n  private _canSelectMultipleLegends = (legend: ILegend): void => {\n    const selectedLegends = silceOrAppendToArray(this.state.selectedLegends, legend.title);\n    this.setState({\n      //check if user selected all legends then empty it get the default behaviour\n      selectedLegends: selectedLegends.length === this.props.legends.length ? [] : selectedLegends,\n      // make selectedState to false if none or all the legends selected\n      selectedState:\n        selectedLegends.length === 0 || selectedLegends.length === this.props.legends.length ? false : true,\n      selecetedLegendInHoverCard: this.state.isHoverCardVisible ? legend.title : 'none',\n      selectedLegend: 'none',\n      hoverState: false,\n    });\n  };\n\n  /**\n   * This function will get called when there is\n   * ability to select only single legend\n   * @param legend ILegend\n   */\n\n  private _canSelectOnlySingleLegend = (legend: ILegend): void => {\n    if (this.state.selectedState === true && this.state.selectedLegend === legend.title) {\n      this.setState({\n        selectedLegend: 'none',\n        selectedState: false,\n        selecetedLegendInHoverCard: this.state.isHoverCardVisible ? legend.title : 'none',\n      });\n    } else {\n      this.setState({\n        hoverState: true,\n        selectedState: true,\n        selectedLegend: legend.title,\n        selecetedLegendInHoverCard: this.state.isHoverCardVisible ? legend.title : 'none',\n      });\n    }\n  };\n\n  private _onClick = (legend: ILegend): void => {\n    if (legend.action) {\n      const { canSelectMultipleLegends = false } = this.props;\n      if (canSelectMultipleLegends) {\n        this._canSelectMultipleLegends(legend);\n      } else {\n        this._canSelectOnlySingleLegend(legend);\n      }\n      legend.action();\n    }\n  };\n\n  private _onRenderCompactCard = (expandingCard: IExpandingCardProps): JSX.Element => {\n    const { allowFocusOnLegends = true, className, styles, theme } = this.props;\n    const overflowHoverCardLegends: JSX.Element[] = [];\n    const classNames = getClassNames(styles!, {\n      theme: theme!,\n      className,\n    });\n    expandingCard.renderData.forEach((legend: IOverflowSetItemProps, index: number) => {\n      const hoverCardElement = this._renderButton(legend, index, true);\n      overflowHoverCardLegends.push(hoverCardElement);\n    });\n    const hoverCardData = (\n      <FocusZone\n        {...(allowFocusOnLegends && { role: 'listbox' })}\n        direction={FocusZoneDirection.vertical}\n        {...this.props.focusZonePropsInHoverCard}\n        className={classNames.hoverCardRoot}\n      >\n        {overflowHoverCardLegends}\n      </FocusZone>\n    );\n    return hoverCardData;\n  };\n\n  private _renderOverflowItems = (legends: ILegend[]) => {\n    const { allowFocusOnLegends = true } = this.props;\n    const items: IContextualMenuItem[] = [];\n    legends.forEach((legend: ILegend, i: number) => {\n      items.push({ key: i.toString(), name: legend.title, onClick: legend.action });\n    });\n    const renderOverflowData: IExpandingCardProps = { renderData: legends };\n    const { theme, className, styles, overflowText } = this.props;\n    const classNames = getClassNames(styles!, {\n      theme: theme!,\n      className,\n    });\n    const plainCardProps = {\n      onRenderPlainCard: this._onRenderCompactCard,\n      renderData: renderOverflowData,\n    };\n\n    const overflowString = overflowText ? overflowText : 'more';\n    // execute similar to \"_onClick\" and \"_onLeave\" logic at HoverCard onCardHide event\n    const onHoverCardHideHandler = () => {\n      const { canSelectMultipleLegends = false } = this.props;\n      const selectedOverflowItem = find(\n        legends,\n        (legend: ILegend) =>\n          legend.title === this.state.selecetedLegendInHoverCard || legend.title === this.state.selectedLegend,\n      );\n      this.setState(\n        {\n          isHoverCardVisible: false,\n          selecetedLegendInHoverCard: 'none',\n          selectedLegends: [],\n        },\n        () => {\n          if (selectedOverflowItem) {\n            this.setState({ selectedLegend: 'none', selectedState: false }, () => {\n              if (selectedOverflowItem.action && !canSelectMultipleLegends) {\n                selectedOverflowItem.action();\n              }\n              if (this.props.onLegendHoverCardLeave && canSelectMultipleLegends) {\n                this.props.onLegendHoverCardLeave();\n              }\n              this.setState({ hoverState: false }, () => {\n                if (selectedOverflowItem.onMouseOutAction) {\n                  selectedOverflowItem.onMouseOutAction(true);\n                }\n              });\n            });\n          }\n        },\n      );\n    };\n    return (\n      <HoverCard\n        type={HoverCardType.plain}\n        plainCardProps={plainCardProps}\n        instantOpenOnClick={true}\n        // eslint-disable-next-line react/jsx-no-bind\n        onCardHide={onHoverCardHideHandler}\n        setInitialFocus={true}\n        trapFocus={true}\n        onCardVisible={this._hoverCardVisible}\n        styles={classNames.subComponentStyles.hoverCardStyles}\n        cardDismissDelay={300}\n        target={this._hoverCardRef}\n      >\n        <div\n          className={classNames.overflowIndicationTextStyle}\n          ref={(rootElem: HTMLDivElement) => (this._hoverCardRef = rootElem)}\n          {...(allowFocusOnLegends && {\n            role: 'link',\n            'aria-expanded': this.state.isHoverCardVisible,\n            'aria-label': `${items.length} ${overflowString}`,\n          })}\n          data-is-focusable={allowFocusOnLegends}\n        >\n          {items.length} {overflowString}\n        </div>\n      </HoverCard>\n    );\n  };\n\n  private _hoverCardVisible = () => {\n    this.setState({ isHoverCardVisible: true });\n  };\n\n  private _onHoverOverLegend = (legend: ILegend) => {\n    if (!this.state.selectedState) {\n      if (legend.hoverAction) {\n        this.setState({ hoverState: true, selectedLegend: legend.title });\n        legend.hoverAction();\n      }\n    }\n  };\n\n  private _onLeave = (legend: ILegend) => {\n    if (!this.state.selectedState) {\n      if (legend.onMouseOutAction) {\n        this.setState({ hoverState: false, selectedLegend: 'none' });\n        legend.onMouseOutAction();\n      }\n    }\n  };\n\n  private _renderButton = (data: IOverflowSetItemProps, index?: number, overflow?: boolean) => {\n    const { allowFocusOnLegends = true } = this.props;\n    const legend: ILegend = {\n      title: data.title,\n      color: data.color,\n      shape: data.shape,\n      action: data.action,\n      hoverAction: data.hoverAction,\n      onMouseOutAction: data.onMouseOutAction,\n      stripePattern: data.stripePattern,\n      isLineLegendInBarChart: data.isLineLegendInBarChart,\n      opacity: data.opacity,\n    };\n    const color = this._getColor(legend.title, legend.color);\n    const { theme, className, styles } = this.props;\n    const classNames = getClassNames(styles!, {\n      theme: theme!,\n      className,\n      colorOnSelectedState: color,\n      borderColor: legend.color,\n      overflow: overflow,\n      stripePattern: legend.stripePattern,\n      isLineLegendInBarChart: legend.isLineLegendInBarChart,\n      opacity: legend.opacity,\n    });\n    const onClickHandler = () => {\n      this._onClick(legend);\n    };\n    const onHoverHandler = () => {\n      this._onHoverOverLegend(legend);\n    };\n    const onMouseOut = () => {\n      this._onLeave(legend);\n    };\n    const shape = this._getShape(classNames, legend, color);\n    return (\n      <button\n        {...(allowFocusOnLegends && {\n          'aria-selected': this.state.selectedLegend === legend.title,\n          role: 'option',\n          'aria-label': `${legend.title} selected`,\n          'aria-setsize': data['aria-setsize'],\n          'aria-posinset': data['aria-posinset'],\n        })}\n        {...(data.nativeButtonProps && { ...data.nativeButtonProps })}\n        key={index}\n        className={classNames.legend}\n        onClick={onClickHandler}\n        onMouseOver={onHoverHandler}\n        onMouseOut={onMouseOut}\n        onFocus={onHoverHandler}\n        onBlur={onMouseOut}\n        data-is-focusable={allowFocusOnLegends}\n        /* eslint-enable react/jsx-no-bind */\n      >\n        {shape}\n        <div className={classNames.text}>{legend.title}</div>\n      </button>\n    );\n  };\n\n  private _getShape(\n    classNames: IProcessedStyleSet<ILegendsStyles>,\n    legend: ILegend,\n    color: string,\n  ): React.ReactNode | string {\n    const svgParentProps: React.SVGAttributes<SVGElement> = {\n      className: classNames.shape,\n    };\n    const svgChildProps: React.SVGAttributes<SVGElement> = {\n      fill: color,\n      strokeWidth: 2,\n      stroke: legend.color,\n    };\n    return (\n      <Shape\n        svgProps={svgParentProps}\n        pathProps={svgChildProps}\n        shape={legend.shape as LegendShape}\n        classNameForNonSvg={classNames.rect}\n      />\n    );\n  }\n\n  private _getColor(title: string, color: string): string {\n    const { theme, canSelectMultipleLegends = false } = this.props;\n    const { palette } = theme!;\n    let legendColor = color;\n    // below if statement  will get executed for the hovered legend.\n    // (which is also the slected legend see fucntion:-_onHoverOverLegend)\n    if (this.state.hoverState && this.state.selectedLegend === title) {\n      legendColor = color;\n    } // below esle if statement will get executed for  the  unselected-legend which is  hovered\n    else if (this.state.hoverState && this.state.selectedLegend !== 'none' && this.state.selectedLegend !== title) {\n      legendColor = palette.white;\n    } // below else if statement will get executed if the legends are in the selected state\n    // this is will only get executed  when we have ability to select multiple legends\n    else if (!!canSelectMultipleLegends && this.state.selectedState && this.state.selectedLegends.indexOf(title) > -1) {\n      legendColor = color;\n    } // below else if statement will get executed when no legend is selected and hovered\n    //(for example:- initial render of legends)\n    else if (\n      (!this.state.selectedState && this.state.selectedLegend === 'none') ||\n      this.state.selectedLegend === title ||\n      this.state.selectedLegends.length <= 0\n    ) {\n      legendColor = color;\n    } else {\n      legendColor = palette.white;\n    }\n    return legendColor;\n  }\n}\n"]}
+{"version":3,"file":"Legends.base.js","sourceRoot":"../src/","sources":["components/Legends/Legends.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport { IContextualMenuItem } from '@fluentui/react/lib/ContextualMenu';\nimport { HoverCard, HoverCardType, IExpandingCardProps } from '@fluentui/react/lib/HoverCard';\nimport { classNamesFunction, find, getNativeProps, buttonProperties } from '@fluentui/react/lib/Utilities';\nimport { ResizeGroup } from '@fluentui/react/lib/ResizeGroup';\nimport { IProcessedStyleSet } from '@fluentui/react/lib/Styling';\nimport { OverflowSet, IOverflowSetItemProps } from '@fluentui/react/lib/OverflowSet';\nimport { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';\nimport {\n  ILegend,\n  ILegendsProps,\n  LegendShape,\n  ILegendsStyles,\n  ILegendStyleProps,\n  ILegendOverflowData,\n} from './Legends.types';\nimport { Shape } from './shape';\n\nimport { silceOrAppendToArray } from '../../utilities/utilities';\n\nconst getClassNames = classNamesFunction<ILegendStyleProps, ILegendsStyles>();\n\n// This is an internal interface used for rendering the legends with unique key\ninterface ILegendItem extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  name?: string;\n  title: string;\n  action: VoidFunction;\n  hoverAction: VoidFunction;\n  onMouseOutAction: VoidFunction;\n  color: string;\n  shape?: LegendShape;\n  key: number;\n  opacity?: number;\n  stripePattern?: boolean;\n  isLineLegendInBarChart?: boolean;\n}\n\nexport interface ILegendState {\n  selectedLegend: string;\n  selecetedLegendInHoverCard: string;\n  selectedState: boolean;\n  hoverState: boolean;\n  isHoverCardVisible: boolean;\n  selectedLegends: string[];\n}\nexport class LegendsBase extends React.Component<ILegendsProps, ILegendState> {\n  private _hoverCardRef: HTMLDivElement;\n  private _classNames: IProcessedStyleSet<ILegendsStyles>;\n\n  public constructor(props: ILegendsProps) {\n    super(props);\n    this.state = {\n      selectedLegend: 'none',\n      selectedState: false,\n      hoverState: false,\n      isHoverCardVisible: false,\n      selecetedLegendInHoverCard: 'none',\n      selectedLegends: [],\n    };\n  }\n\n  public componentDidUpdate(prevProps: ILegendsProps) {\n    if (prevProps.selectedLegend !== this.props.selectedLegend) {\n      this.setState({ selectedLegend: this.props.selectedLegend! });\n    }\n  }\n\n  public render(): JSX.Element {\n    const { theme, className, styles } = this.props;\n    this._classNames = getClassNames(styles!, {\n      theme: theme!,\n      className,\n    });\n    const dataToRender = this._generateData();\n    return (\n      <div className={this._classNames.root}>\n        {this.props.enabledWrapLines ? (\n          this._onRenderData(dataToRender)\n        ) : (\n          <ResizeGroup\n            data={dataToRender}\n            onReduceData={this._onReduceData}\n            onRenderData={this._onRenderData}\n            onGrowData={this._onGrowData}\n          />\n        )}\n      </div>\n    );\n  }\n\n  private _generateData(): ILegendOverflowData {\n    const { allowFocusOnLegends = true } = this.props;\n    const dataItems: ILegendItem[] = this.props.legends.map((legend: ILegend, index: number) => {\n      return {\n        ...(allowFocusOnLegends && {\n          nativeButtonProps: getNativeProps<React.HTMLAttributes<HTMLButtonElement>>(legend, buttonProperties, [\n            'title',\n          ]),\n          'aria-setsize': this.props.legends.length,\n          'aria-posinset': index + 1,\n        }),\n        title: legend.title,\n        action: legend.action!,\n        hoverAction: legend.hoverAction!,\n        onMouseOutAction: legend.onMouseOutAction!,\n        color: legend.color,\n        shape: legend.shape,\n        stripePattern: legend.stripePattern,\n        isLineLegendInBarChart: legend.isLineLegendInBarChart,\n        opacity: legend.opacity,\n        key: index,\n      };\n    });\n    const result: ILegendOverflowData = {\n      primary: dataItems,\n      overflow: [],\n    };\n    return result;\n  }\n\n  private _onRenderData = (data: IOverflowSetItemProps | ILegendOverflowData): JSX.Element => {\n    const { overflowProps, allowFocusOnLegends = true } = this.props;\n    const rootStyles = {\n      root: {\n        justifyContent: this.props.centerLegends ? 'center' : 'unset',\n        flexWrap: 'wrap',\n      },\n    };\n    return (\n      <FocusZone {...(allowFocusOnLegends && { role: 'listbox', 'aria-label': 'Legends' })}>\n        <OverflowSet\n          items={data.primary}\n          overflowItems={data.overflow}\n          onRenderItem={this._renderButton}\n          onRenderOverflowButton={this._renderOverflowItems}\n          {...overflowProps}\n          styles={{ ...rootStyles, ...overflowProps?.styles }}\n        />\n      </FocusZone>\n    );\n  };\n\n  private _onReduceData = (currentdata: IOverflowSetItemProps): {} | void => {\n    if (currentdata.primary.length === 0) {\n      return;\n    }\n    const overflow = [...currentdata.primary.slice(-1), ...currentdata.overflow];\n    const primary = currentdata.primary.slice(0, -1);\n    return { primary, overflow };\n  };\n\n  private _onGrowData = (currentdata: IOverflowSetItemProps): {} | void => {\n    if (currentdata.overflow.length === 0) {\n      return;\n    }\n    const overflow = currentdata.overflow.slice(1);\n    const primary = [...currentdata.primary, ...currentdata.overflow.slice(0, 1)];\n    return { primary, overflow };\n  };\n\n  /**\n   * This function will get called when there is an ability to\n   * select  multiple legends\n   * @param legend ILegend\n   */\n  private _canSelectMultipleLegends = (legend: ILegend): void => {\n    const selectedLegends = silceOrAppendToArray(this.state.selectedLegends, legend.title);\n    this.setState({\n      //check if user selected all legends then empty it get the default behaviour\n      selectedLegends: selectedLegends.length === this.props.legends.length ? [] : selectedLegends,\n      // make selectedState to false if none or all the legends selected\n      selectedState:\n        selectedLegends.length === 0 || selectedLegends.length === this.props.legends.length ? false : true,\n      selecetedLegendInHoverCard: this.state.isHoverCardVisible ? legend.title : 'none',\n      selectedLegend: 'none',\n      hoverState: false,\n    });\n  };\n\n  /**\n   * This function will get called when there is\n   * ability to select only single legend\n   * @param legend ILegend\n   */\n\n  private _canSelectOnlySingleLegend = (legend: ILegend): void => {\n    if (this.state.selectedState === true && this.state.selectedLegend === legend.title) {\n      this.setState({\n        selectedLegend: 'none',\n        selectedState: false,\n        selecetedLegendInHoverCard: this.state.isHoverCardVisible ? legend.title : 'none',\n      });\n    } else {\n      this.setState({\n        hoverState: true,\n        selectedState: true,\n        selectedLegend: legend.title,\n        selecetedLegendInHoverCard: this.state.isHoverCardVisible ? legend.title : 'none',\n      });\n    }\n  };\n\n  private _onClick = (legend: ILegend): void => {\n    if (legend.action) {\n      const { canSelectMultipleLegends = false } = this.props;\n      if (canSelectMultipleLegends) {\n        this._canSelectMultipleLegends(legend);\n      } else {\n        this._canSelectOnlySingleLegend(legend);\n      }\n      legend.action();\n    }\n  };\n\n  private _onRenderCompactCard = (expandingCard: IExpandingCardProps): JSX.Element => {\n    const { allowFocusOnLegends = true, className, styles, theme } = this.props;\n    const overflowHoverCardLegends: JSX.Element[] = [];\n    const classNames = getClassNames(styles!, {\n      theme: theme!,\n      className,\n    });\n    expandingCard.renderData.forEach((legend: IOverflowSetItemProps, index: number) => {\n      const hoverCardElement = this._renderButton(legend, index, true);\n      overflowHoverCardLegends.push(hoverCardElement);\n    });\n    const hoverCardData = (\n      <FocusZone\n        {...(allowFocusOnLegends && { role: 'listbox' })}\n        direction={FocusZoneDirection.vertical}\n        {...this.props.focusZonePropsInHoverCard}\n        className={classNames.hoverCardRoot}\n      >\n        {overflowHoverCardLegends}\n      </FocusZone>\n    );\n    return hoverCardData;\n  };\n\n  private _renderOverflowItems = (legends: ILegend[]) => {\n    const { allowFocusOnLegends = true } = this.props;\n    const items: IContextualMenuItem[] = [];\n    legends.forEach((legend: ILegend, i: number) => {\n      items.push({ key: i.toString(), name: legend.title, onClick: legend.action });\n    });\n    const renderOverflowData: IExpandingCardProps = { renderData: legends };\n    const { theme, className, styles, overflowText } = this.props;\n    const classNames = getClassNames(styles!, {\n      theme: theme!,\n      className,\n    });\n    const plainCardProps = {\n      onRenderPlainCard: this._onRenderCompactCard,\n      renderData: renderOverflowData,\n    };\n\n    const overflowString = overflowText ? overflowText : 'more';\n    // execute similar to \"_onClick\" and \"_onLeave\" logic at HoverCard onCardHide event\n    const onHoverCardHideHandler = () => {\n      const { canSelectMultipleLegends = false } = this.props;\n      const selectedOverflowItem = find(\n        legends,\n        (legend: ILegend) =>\n          legend.title === this.state.selecetedLegendInHoverCard || legend.title === this.state.selectedLegend,\n      );\n      this.setState(\n        {\n          isHoverCardVisible: false,\n          selecetedLegendInHoverCard: 'none',\n          selectedLegends: [],\n        },\n        () => {\n          if (selectedOverflowItem) {\n            this.setState({ selectedLegend: 'none', selectedState: false }, () => {\n              if (selectedOverflowItem.action && !canSelectMultipleLegends) {\n                selectedOverflowItem.action();\n              }\n              if (this.props.onLegendHoverCardLeave && canSelectMultipleLegends) {\n                this.props.onLegendHoverCardLeave();\n              }\n              this.setState({ hoverState: false }, () => {\n                if (selectedOverflowItem.onMouseOutAction) {\n                  selectedOverflowItem.onMouseOutAction(true);\n                }\n              });\n            });\n          }\n        },\n      );\n    };\n    return (\n      <HoverCard\n        type={HoverCardType.plain}\n        plainCardProps={plainCardProps}\n        instantOpenOnClick={true}\n        // eslint-disable-next-line react/jsx-no-bind\n        onCardHide={onHoverCardHideHandler}\n        setInitialFocus={true}\n        trapFocus={true}\n        onCardVisible={this._hoverCardVisible}\n        styles={classNames.subComponentStyles.hoverCardStyles}\n        cardDismissDelay={300}\n        target={this._hoverCardRef}\n      >\n        <div\n          className={classNames.overflowIndicationTextStyle}\n          ref={(rootElem: HTMLDivElement) => (this._hoverCardRef = rootElem)}\n          {...(allowFocusOnLegends && {\n            role: 'link',\n            'aria-expanded': this.state.isHoverCardVisible,\n            'aria-label': `${items.length} ${overflowString}`,\n          })}\n          data-is-focusable={allowFocusOnLegends}\n        >\n          {items.length} {overflowString}\n        </div>\n      </HoverCard>\n    );\n  };\n\n  private _hoverCardVisible = () => {\n    this.setState({ isHoverCardVisible: true });\n  };\n\n  private _onHoverOverLegend = (legend: ILegend) => {\n    if (!this.state.selectedState) {\n      if (legend.hoverAction) {\n        this.setState({ hoverState: true, selectedLegend: legend.title });\n        legend.hoverAction();\n      }\n    }\n  };\n\n  private _onLeave = (legend: ILegend) => {\n    if (!this.state.selectedState) {\n      if (legend.onMouseOutAction) {\n        this.setState({ hoverState: false, selectedLegend: 'none' });\n        legend.onMouseOutAction();\n      }\n    }\n  };\n\n  private _renderButton = (data: IOverflowSetItemProps, index?: number, overflow?: boolean) => {\n    const { allowFocusOnLegends = true } = this.props;\n    const legend: ILegend = {\n      title: data.title,\n      color: data.color,\n      shape: data.shape,\n      action: data.action,\n      hoverAction: data.hoverAction,\n      onMouseOutAction: data.onMouseOutAction,\n      stripePattern: data.stripePattern,\n      isLineLegendInBarChart: data.isLineLegendInBarChart,\n      opacity: data.opacity,\n    };\n    const color = this._getColor(legend.title, legend.color);\n    const { theme, className, styles } = this.props;\n    const classNames = getClassNames(styles!, {\n      theme: theme!,\n      className,\n      colorOnSelectedState: color,\n      borderColor: legend.color,\n      overflow: overflow,\n      stripePattern: legend.stripePattern,\n      isLineLegendInBarChart: legend.isLineLegendInBarChart,\n      opacity: legend.opacity,\n    });\n    const onClickHandler = () => {\n      this._onClick(legend);\n    };\n    const onHoverHandler = () => {\n      this._onHoverOverLegend(legend);\n    };\n    const onMouseOut = () => {\n      this._onLeave(legend);\n    };\n    const shape = this._getShape(classNames, legend, color);\n    return (\n      <button\n        {...(allowFocusOnLegends && {\n          'aria-selected': this.state.selectedLegend === legend.title,\n          role: 'option',\n          'aria-label': `${legend.title} selected`,\n          'aria-setsize': data['aria-setsize'],\n          'aria-posinset': data['aria-posinset'],\n        })}\n        {...(data.nativeButtonProps && { ...data.nativeButtonProps })}\n        key={index}\n        className={classNames.legend}\n        onClick={onClickHandler}\n        onMouseOver={onHoverHandler}\n        onMouseOut={onMouseOut}\n        onFocus={onHoverHandler}\n        onBlur={onMouseOut}\n        data-is-focusable={allowFocusOnLegends}\n        /* eslint-enable react/jsx-no-bind */\n      >\n        {shape}\n        <div className={classNames.text}>{legend.title}</div>\n      </button>\n    );\n  };\n\n  private _getShape(\n    classNames: IProcessedStyleSet<ILegendsStyles>,\n    legend: ILegend,\n    color: string,\n  ): React.ReactNode | string {\n    const svgParentProps: React.SVGAttributes<SVGElement> = {\n      className: classNames.shape,\n    };\n    const svgChildProps: React.SVGAttributes<SVGElement> = {\n      fill: color,\n      strokeWidth: 2,\n      stroke: legend.color,\n    };\n    return (\n      <Shape\n        svgProps={svgParentProps}\n        pathProps={svgChildProps}\n        shape={legend.shape as LegendShape}\n        classNameForNonSvg={classNames.rect}\n      />\n    );\n  }\n\n  private _getColor(title: string, color: string): string {\n    const { theme, canSelectMultipleLegends = false } = this.props;\n    const { palette } = theme!;\n    let legendColor = color;\n    // below if statement  will get executed for the hovered legend.\n    // (which is also the slected legend see fucntion:-_onHoverOverLegend)\n    if (this.state.hoverState && this.state.selectedLegend === title) {\n      legendColor = color;\n    } // below esle if statement will get executed for  the  unselected-legend which is  hovered\n    else if (this.state.hoverState && this.state.selectedLegend !== 'none' && this.state.selectedLegend !== title) {\n      legendColor = palette.white;\n    } // below else if statement will get executed if the legends are in the selected state\n    // this is will only get executed  when we have ability to select multiple legends\n    else if (!!canSelectMultipleLegends && this.state.selectedState && this.state.selectedLegends.indexOf(title) > -1) {\n      legendColor = color;\n    } // below else if statement will get executed when no legend is selected and hovered\n    //(for example:- initial render of legends)\n    else if (\n      (!this.state.selectedState && this.state.selectedLegend === 'none') ||\n      this.state.selectedLegend === title ||\n      this.state.selectedLegends.length <= 0\n    ) {\n      legendColor = color;\n    } else {\n      legendColor = palette.white;\n    }\n    return legendColor;\n  }\n}\n"]}

package/lib-amd/components/TreeChart/TreeChart.base.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { ITreeProps, ITreeState } from '../../index';
+export declare class TreeChartBase extends React.Component<ITreeProps, ITreeState> {
+    private _treeData;
+    private _width;
+    private _height;
+    private _composition;
+    private _classNames;
+    private _margin;
+    private _nodeElements;
+    private _linkElements;
+    private _treeTraversal;
+    constructor(props: ITreeProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: ITreeProps): void;
+    createTreeChart(): void;
+    render(): JSX.Element;
+}

package/lib-amd/components/TreeChart/TreeChart.base.js

@@ -0,0 +1,296 @@
+define(["require", "exports", "tslib", "react", "d3-hierarchy", "@fluentui/react/lib/Utilities", "d3-selection", "@fluentui/react-focus"], function (require, exports, tslib_1, React, d3_hierarchy_1, Utilities_1, d3_selection_1, react_focus_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.TreeChartBase = void 0;
+    var getClassNames = Utilities_1.classNamesFunction();
+    // Create a parent class for common tree components
+    var StandardTree = /** @class */ (function () {
+        function StandardTree(treeData, styleClassNames, _nodeElements, _linkElements) {
+            if (_nodeElements === void 0) { _nodeElements = []; }
+            if (_linkElements === void 0) { _linkElements = []; }
+            this._nodeElements = [];
+            this._linkElements = [];
+            this.treeData = treeData;
+            this.styleClassNames = styleClassNames;
+            this._nodeElements = _nodeElements;
+            this._linkElements = _linkElements;
+        }
+        StandardTree.prototype.truncateText = function (text, rectangleWidth, padding, styleClass) {
+            var truncatedText = '';
+            var words = text.split(/\s+/).reverse();
+            var word = '';
+            var tspan = d3_selection_1.select('.svgTree').append('text').attr('class', 'tempText').append('tspan').text(null);
+            if (styleClass !== undefined) {
+                tspan.attr('class', styleClass);
+            }
+            var line = [];
+            while ((word = words.pop())) {
+                line.push(word);
+                tspan.text(line.join(' ') + ' ');
+                if (tspan.node() !== null) {
+                    var w = tspan.node().getComputedTextLength();
+                    if (w > rectangleWidth - padding) {
+                        line.pop();
+                        line.push('...');
+                        break;
+                    }
+                }
+            }
+            truncatedText = line.join(' ') + ' ';
+            tspan.text(null);
+            d3_selection_1.selectAll('.tempText').remove();
+            return truncatedText;
+        };
+        // Append node elements
+        // nodeId to create unique key
+        StandardTree.prototype.addNodeShapetoSVG = function (name, subname, metricName, xCoordinate, yCoordinate, fillColor, rectangleWidth, rectangleHeight, nodeId, parentInfo) {
+            var ariaLabel = "nodeId: " + nodeId + " \nnodeMainText: " + name + "\nsubText " + subname + " " + parentInfo;
+            this._nodeElements.push(React.createElement("rect", { width: rectangleWidth, height: rectangleHeight, x: xCoordinate, y: yCoordinate, tabIndex: 0, role: 'text', "data-is-focusable": true, "aria-label": ariaLabel, className: this.styleClassNames.rectNode, stroke: fillColor, key: "" + nodeId + this.styleClassNames.rectNode }));
+            if (subname !== undefined) {
+                subname = this.truncateText(subname, rectangleWidth, rectangleWidth / 4, this.styleClassNames.rectSubText);
+            }
+            if (metricName !== undefined) {
+                metricName = this.truncateText(metricName, rectangleWidth, rectangleWidth / 4, this.styleClassNames.rectmetricText);
+            }
+            name = this.truncateText(name, rectangleWidth, rectangleWidth / 4, this.styleClassNames.rectText);
+            // Text position y = y + rectHeight/2, 2 is ratio for depth
+            // Text position x = x + rectWidth/2, 2 is ratio for length
+            // Sub-text position x = x + rectWidth/2, 2 is ratio for length
+            var subValue = metricName !== undefined ? (React.createElement("tspan", { className: this.styleClassNames.rectmetricText, dy: "1.4em", x: xCoordinate + rectangleWidth / 2 }, metricName)) : (React.createElement("tspan", { className: this.styleClassNames.rectSubText, dy: "1.4em", x: xCoordinate + rectangleWidth / 2 }, subname));
+            if (subname === undefined && metricName === undefined) {
+                this._nodeElements.push(React.createElement("text", { textAnchor: "middle", className: this.styleClassNames.rectmetricText, dy: yCoordinate + rectangleHeight / 1.6, x: xCoordinate + rectangleWidth / 2, key: "" + nodeId + this.styleClassNames.rectText }, name));
+            }
+            else {
+                this._nodeElements.push(React.createElement("text", { textAnchor: "middle", className: metricName !== undefined ? this.styleClassNames.rectSubText : this.styleClassNames.rectText, dy: metricName !== undefined ? yCoordinate + rectangleHeight / 2.5 : yCoordinate + rectangleHeight / 2, x: xCoordinate + rectangleWidth / 2, key: "" + nodeId + this.styleClassNames.rectText },
+                    name,
+                    subValue));
+            }
+        };
+        // Create a rectangular path from parent to the child nodes
+        StandardTree.prototype.createPathLink = function (parentX, parentY, childX, childY, leaf, rectWidth, rectHeight, gap) {
+            // gap adds ratio for parent.y to child.y
+            var path = "M" + (childX + rectWidth / 2) + "," + (childY - gap) + " H" + (parentX + rectWidth / 2) + " V" + (parentY + rectHeight + gap / 2);
+            var leafpath = "M" + (parentX + rectWidth / 2) + "," + (parentY + rectHeight + gap / 2) + " V" + (parentY + gap * 5) + " H" + parentX + " H" + (parentX + rectWidth);
+            // based on the type of node return leafpath or path element
+            return leaf ? leafpath : path;
+        };
+        // Append path link element
+        StandardTree.prototype.addLinktoSVG = function (nodeId, parentX, parentY, childX, childY, leaf, rectWidth, rectHeight, gap) {
+            this._linkElements.push(React.createElement("path", { className: this.styleClassNames.link, d: this.createPathLink(parentX, parentY, childX, childY, leaf, rectWidth, rectHeight, gap), key: "" + nodeId + this.styleClassNames.link }));
+        };
+        return StandardTree;
+    }());
+    // Create child class to Add Tree component based on treeHeight
+    var LayeredTree = /** @class */ (function (_super) {
+        tslib_1.__extends(LayeredTree, _super);
+        function LayeredTree(treeData, composition, styleClassNames, _nodeElements, _linkElements, _treeTraversal) {
+            if (_nodeElements === void 0) { _nodeElements = []; }
+            if (_linkElements === void 0) { _linkElements = []; }
+            var _this = _super.call(this, treeData, styleClassNames, _nodeElements, _linkElements) || this;
+            _this.composition = composition;
+            _this._treeTraversal = _treeTraversal;
+            return _this;
+        }
+        LayeredTree.prototype.createTree = function (givenLayoutWidth, screenWidth) {
+            var _a, _b, _c, _d;
+            if (givenLayoutWidth !== undefined) {
+                if (givenLayoutWidth < 65) {
+                    givenLayoutWidth = 65;
+                }
+                if (givenLayoutWidth > 90) {
+                    givenLayoutWidth = 90;
+                }
+            }
+            var layoutWidth = givenLayoutWidth || 75;
+            var root = d3_hierarchy_1.hierarchy(this.treeData, function (d) {
+                return d.children;
+            });
+            // Find tree Height
+            var treeHeight = (root === null || root === void 0 ? void 0 : root.height) + 1;
+            // Create tree layout, width: layoutWidth, height: layoutWidth/1.5 and add node separation
+            var treemap = d3_hierarchy_1.tree()
+                .nodeSize([layoutWidth, layoutWidth / 1.5])
+                .separation(function (a, b) {
+                return a.parent === root && b.parent === root ? 3.5 : 1;
+            });
+            // Assigns the x and y position for the nodes
+            var treeData = treemap(root);
+            // Compute the new tree layout.
+            var nodes = treeData.descendants();
+            // Normalize for fixed-depth and width
+            // Normalise y coordinate by depth of each node by a factor of 130
+            // Normalise x coordinate by start coordinate 0 with screenSize/3
+            nodes.forEach(function (d) {
+                d.y = d.depth === 0 ? 10 : d.depth * 130;
+                d.x += screenWidth / 3;
+            });
+            // <------------------ Traversal section ------------------>
+            // Create tree data structure
+            var treeDataStructure = [];
+            var TreeID = 0;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            var createTreeDataStructure = function (d) {
+                var _a, _b;
+                d.id = TreeID;
+                treeDataStructure.push({
+                    id: TreeID,
+                    children: d.children,
+                    dataName: d.data.name,
+                    subName: d.data.subname,
+                    metricName: (_a = d.data) === null || _a === void 0 ? void 0 : _a.metric,
+                    fill: d.data.fill,
+                    x: d.x,
+                    y: d.y,
+                    parentID: (_b = d.parent) === null || _b === void 0 ? void 0 : _b.id,
+                });
+                TreeID++;
+            };
+            this._treeTraversal === 0
+                ? root.each(function (d) {
+                    createTreeDataStructure(d);
+                })
+                : root.eachBefore(function (d) {
+                    createTreeDataStructure(d);
+                });
+            var rectWidth = layoutWidth * 3;
+            var rectHeight = rectWidth / 3.45;
+            var gap = 20;
+            var parentSet = new Set();
+            for (var _i = 0, treeDataStructure_1 = treeDataStructure; _i < treeDataStructure_1.length; _i++) {
+                var d = treeDataStructure_1[_i];
+                var parentInfo = d.id === 0
+                    ? 'Root Node'
+                    : "Parent info parentId: " + d.parentID + "\n      " + treeDataStructure[d.parentID].dataName + "\n      " + treeDataStructure[d.parentID].subName;
+                // check for leaf nodes
+                if (!d.children && !parentSet.has(d.parentID) && treeHeight === 3) {
+                    var newWidth = (rectWidth - gap) / 2;
+                    var newHeight = rectHeight;
+                    parentSet.add(d.parentID);
+                    // <------------------ Links section ------------------>
+                    this.addLinktoSVG(d.id, treeDataStructure[d.parentID].x, treeDataStructure[d.parentID].y, treeDataStructure[d.id].x, treeDataStructure[d.id].y, true, rectWidth, rectHeight, gap);
+                    // <------------------ Nodes section ------------------>
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    var children = (_a = treeDataStructure[d.parentID]) === null || _a === void 0 ? void 0 : _a.children;
+                    var dx1 = (_b = treeDataStructure[d.parentID]) === null || _b === void 0 ? void 0 : _b.x;
+                    var dx2 = ((_c = treeDataStructure[d.parentID]) === null || _c === void 0 ? void 0 : _c.x) + newWidth + gap;
+                    var dy = (_d = children[0]) === null || _d === void 0 ? void 0 : _d.y;
+                    for (var itr = 0; itr < children.length; ++itr) {
+                        var child = children[itr];
+                        // Given Composition
+                        if (this.composition !== undefined) {
+                            // For compact compostion
+                            if (this.composition === 0) {
+                                this.addNodeShapetoSVG(child.data.name, child.data.subname, child.data.metricName, itr % 2 === 0 ? dx1 : dx2, dy, child.data.fill, children.length === 1 ? rectWidth : newWidth, rectHeight, child.id, parentInfo);
+                                if (itr % 2 === 1) {
+                                    dy += newHeight + gap;
+                                }
+                            }
+                            // For long compostion
+                            else {
+                                this.addNodeShapetoSVG(child.data.name, child.data.subname, child.data.metricName, dx1, dy, child.data.fill, rectWidth, rectHeight, child.id, parentInfo);
+                                dy += newHeight + gap;
+                            }
+                        }
+                        // Automatic Node Composition
+                        else {
+                            if (children.length > 2) {
+                                this.addNodeShapetoSVG(child.data.name, child.data.subname, child.data.metricName, itr % 2 === 0 ? dx1 : dx2, dy, child.data.fill, children.length === 1 ? rectWidth : newWidth, rectHeight, child.id, parentInfo);
+                                if (itr % 2 === 1) {
+                                    dy += newHeight + gap;
+                                }
+                            }
+                            else {
+                                this.addNodeShapetoSVG(child.data.name, child.data.subname, child.data.metricName, dx1, dy, child.data.fill, rectWidth, rectHeight, child.id, parentInfo);
+                                dy += newHeight + gap;
+                            }
+                        }
+                    }
+                }
+                if (d.children || treeHeight <= 2) {
+                    // <------------------ Nodes section ------------------>
+                    this.addNodeShapetoSVG(d.dataName, d.subName, d.metricName, d.x, d.y, d.fill, rectWidth, rectHeight, d.id, parentInfo);
+                    // <------------------ Links section ------------------>
+                    if (d.id !== 0) {
+                        this.addLinktoSVG(d.id, treeDataStructure[d.parentID].x, treeDataStructure[d.parentID].y, treeDataStructure[d.id].x, treeDataStructure[d.id].y, false, rectWidth, rectHeight, gap);
+                    }
+                }
+            }
+        };
+        return LayeredTree;
+    }(StandardTree));
+    var TreeChartBase = /** @class */ (function (_super) {
+        tslib_1.__extends(TreeChartBase, _super);
+        function TreeChartBase(props) {
+            var _a;
+            var _this = _super.call(this, props) || this;
+            _this._nodeElements = [];
+            _this._linkElements = [];
+            _this._margin = { top: 30, right: 20, bottom: 30, left: 50 };
+            _this._width = _this.props.width || 1500;
+            _this._height = _this.props.height || 700;
+            _this._treeData = _this.props.treeData;
+            _this._composition = (_a = _this.props) === null || _a === void 0 ? void 0 : _a.composition;
+            _this._treeTraversal = _this.props.treeTraversal;
+            _this.state = {
+                _width: _this._width,
+                _height: _this._height,
+            };
+            return _this;
+        }
+        TreeChartBase.prototype.componentDidMount = function () {
+            var _a = this.props, theme = _a.theme, className = _a.className, styles = _a.styles;
+            // Get classNames to create component styling
+            this._classNames = getClassNames(styles, {
+                theme: theme,
+                className: className,
+            });
+            // Call createTreeChart function in componentDidMount
+            this.createTreeChart();
+            this.setState({
+                _width: this.props.width || 1500,
+                _height: this.props.height || 700,
+            });
+        };
+        TreeChartBase.prototype.componentDidUpdate = function (prevProps) {
+            if (prevProps.layoutWidth !== this.props.layoutWidth) {
+                var svgText = d3_selection_1.selectAll('text');
+                var svgRect = d3_selection_1.selectAll('rect');
+                var svgLink = d3_selection_1.selectAll('path');
+                if (this._nodeElements.length === 0 && this._linkElements.length === 0) {
+                    svgText.remove();
+                    svgRect.remove();
+                    svgLink.remove();
+                }
+                this.createTreeChart();
+            }
+        };
+        TreeChartBase.prototype.createTreeChart = function () {
+            var nodeElements = [];
+            var linkElements = [];
+            // Create styleClass object to access it in parent class
+            var styleClassNames = {
+                link: this._classNames.link,
+                rectNode: this._classNames.rectNode,
+                rectText: this._classNames.rectText,
+                rectSubText: this._classNames.rectSubText,
+                rectmetricText: this._classNames.rectMetricText,
+            };
+            // Instantiate inherited class and call createTree function for the object
+            var treeObject = new LayeredTree(this._treeData, this._composition, styleClassNames, nodeElements, linkElements, this._treeTraversal);
+            treeObject.createTree(this.props.layoutWidth, this._width);
+            this._nodeElements = nodeElements;
+            this._linkElements = linkElements;
+        };
+        TreeChartBase.prototype.render = function () {
+            var _a;
+            return (React.createElement(react_focus_1.FocusZone, null,
+                React.createElement("div", { className: (_a = this._classNames) === null || _a === void 0 ? void 0 : _a.root },
+                    React.createElement("svg", { className: "svgTree", width: this.state._width - this._margin.left - this._margin.right, height: this.state._height - this._margin.top - this._margin.bottom },
+                        React.createElement("g", { className: "svgNode" }, this._nodeElements.map(function (element) { return element; })),
+                        React.createElement("g", { className: "svgLink" }, this._linkElements.map(function (element) { return element; }))))));
+        };
+        return TreeChartBase;
+    }(React.Component));
+    exports.TreeChartBase = TreeChartBase;
+});
+//# sourceMappingURL=TreeChart.base.js.map

package/lib-amd/components/TreeChart/TreeChart.base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeChart.base.js","sourceRoot":"../src/","sources":["components/TreeChart/TreeChart.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { hierarchy, tree } from 'd3-hierarchy';\nimport { classNamesFunction } from '@fluentui/react/lib/Utilities';\nimport { IProcessedStyleSet } from '@fluentui/react/lib/Styling';\nimport { select, selectAll } from 'd3-selection';\nimport { FocusZone } from '@fluentui/react-focus';\n\nimport {\n  ITreeProps,\n  ITreeState,\n  ITreeDataStructure,\n  ITreeChartDataPoint,\n  ITreeStyleProps,\n  ITreeStyles,\n} from '../../index';\n\nconst getClassNames = classNamesFunction<ITreeStyleProps, ITreeStyles>();\n\n// Create a parent class for common tree components\nclass StandardTree {\n  public treeData: ITreeChartDataPoint;\n  public styleClassNames: {\n    rectmetricText: string | undefined;\n    rectSubText: string | undefined;\n    link: string;\n    rectNode: string;\n    rectText: string;\n  };\n\n  private _nodeElements: Array<React.SVGProps<SVGRectElement> | React.SVGProps<SVGTextElement>> = [];\n  private _linkElements: Array<React.SVGProps<SVGPathElement>> = [];\n  constructor(\n    treeData: ITreeChartDataPoint,\n    styleClassNames: { link: string; rectNode: string; rectText: string; rectSubText: string; rectmetricText: string },\n    _nodeElements: Array<React.SVGProps<SVGRectElement> | React.SVGProps<SVGTextElement>> = [],\n    _linkElements: Array<React.SVGProps<SVGPathElement>> = [],\n  ) {\n    this.treeData = treeData;\n    this.styleClassNames = styleClassNames;\n    this._nodeElements = _nodeElements;\n    this._linkElements = _linkElements;\n  }\n\n  public truncateText(text: string, rectangleWidth: number, padding: number, styleClass: string | undefined) {\n    let truncatedText = '';\n    const words = text.split(/\\s+/).reverse();\n    let word: string = '';\n    const tspan = select('.svgTree').append('text').attr('class', 'tempText').append('tspan').text(null);\n\n    if (styleClass !== undefined) {\n      tspan.attr('class', styleClass);\n    }\n\n    const line: string[] = [];\n    while ((word = words.pop()!)) {\n      line.push(word);\n      tspan.text(line.join(' ') + ' ');\n      if (tspan.node() !== null) {\n        const w = tspan.node()!.getComputedTextLength();\n        if (w > rectangleWidth - padding) {\n          line.pop();\n          line.push('...');\n          break;\n        }\n      }\n    }\n\n    truncatedText = line.join(' ') + ' ';\n    tspan.text(null);\n    selectAll('.tempText').remove();\n    return truncatedText;\n  }\n\n  // Append node elements\n  // nodeId to create unique key\n  public addNodeShapetoSVG(\n    name: string,\n    subname: string | undefined,\n    metricName: string | undefined,\n    xCoordinate: number,\n    yCoordinate: number,\n    fillColor: string,\n    rectangleWidth: number,\n    rectangleHeight: number,\n    nodeId: number,\n    parentInfo: string,\n  ) {\n    const ariaLabel = `nodeId: ${nodeId} \\nnodeMainText: ${name}\\nsubText ${subname} ${parentInfo}`;\n    this._nodeElements.push(\n      <rect\n        width={rectangleWidth}\n        height={rectangleHeight}\n        x={xCoordinate}\n        y={yCoordinate}\n        tabIndex={0}\n        role={'text'}\n        data-is-focusable={true}\n        aria-label={ariaLabel}\n        className={this.styleClassNames.rectNode}\n        stroke={fillColor}\n        key={`${nodeId}${this.styleClassNames.rectNode}`}\n      />,\n    );\n\n    if (subname !== undefined) {\n      subname = this.truncateText(subname, rectangleWidth, rectangleWidth / 4, this.styleClassNames.rectSubText);\n    }\n    if (metricName !== undefined) {\n      metricName = this.truncateText(\n        metricName,\n        rectangleWidth,\n        rectangleWidth / 4,\n        this.styleClassNames.rectmetricText,\n      );\n    }\n    name = this.truncateText(name, rectangleWidth, rectangleWidth / 4, this.styleClassNames.rectText);\n\n    // Text position y = y + rectHeight/2, 2 is ratio for depth\n    // Text position x = x + rectWidth/2, 2 is ratio for length\n    // Sub-text position x = x + rectWidth/2, 2 is ratio for length\n\n    const subValue =\n      metricName !== undefined ? (\n        <tspan className={this.styleClassNames.rectmetricText} dy=\"1.4em\" x={xCoordinate + rectangleWidth / 2}>\n          {metricName}\n        </tspan>\n      ) : (\n        <tspan className={this.styleClassNames.rectSubText} dy=\"1.4em\" x={xCoordinate + rectangleWidth / 2}>\n          {subname}\n        </tspan>\n      );\n\n    if (subname === undefined && metricName === undefined) {\n      this._nodeElements.push(\n        <text\n          textAnchor=\"middle\"\n          className={this.styleClassNames.rectmetricText}\n          dy={yCoordinate + rectangleHeight / 1.6}\n          x={xCoordinate + rectangleWidth / 2}\n          key={`${nodeId}${this.styleClassNames.rectText}`}\n        >\n          {name}\n        </text>,\n      );\n    } else {\n      this._nodeElements.push(\n        <text\n          textAnchor=\"middle\"\n          className={metricName !== undefined ? this.styleClassNames.rectSubText : this.styleClassNames.rectText}\n          dy={metricName !== undefined ? yCoordinate + rectangleHeight / 2.5 : yCoordinate + rectangleHeight / 2}\n          x={xCoordinate + rectangleWidth / 2}\n          key={`${nodeId}${this.styleClassNames.rectText}`}\n        >\n          {name}\n          {subValue}\n        </text>,\n      );\n    }\n  }\n  // Create a rectangular path from parent to the child nodes\n  public createPathLink(\n    parentX: number,\n    parentY: number,\n    childX: number,\n    childY: number,\n    leaf: boolean,\n    rectWidth: number,\n    rectHeight: number,\n    gap: number,\n  ): string {\n    // gap adds ratio for parent.y to child.y\n    const path = `M${childX + rectWidth / 2},${childY - gap} H${parentX + rectWidth / 2} V${\n      parentY + rectHeight + gap / 2\n    }`;\n    const leafpath = `M${parentX + rectWidth / 2},${parentY + rectHeight + gap / 2} V${\n      parentY + gap * 5\n    } H${parentX} H${parentX + rectWidth}`;\n\n    // based on the type of node return leafpath or path element\n    return leaf ? leafpath : path;\n  }\n\n  // Append path link element\n  public addLinktoSVG(\n    nodeId: number,\n    parentX: number,\n    parentY: number,\n    childX: number,\n    childY: number,\n    leaf: boolean,\n    rectWidth: number,\n    rectHeight: number,\n    gap: number,\n  ) {\n    this._linkElements.push(\n      <path\n        className={this.styleClassNames.link}\n        d={this.createPathLink(parentX, parentY, childX, childY, leaf, rectWidth, rectHeight, gap)}\n        key={`${nodeId}${this.styleClassNames.link}`}\n      />,\n    );\n  }\n}\n\n// Create child class to Add Tree component based on treeHeight\nclass LayeredTree extends StandardTree {\n  public composition: number | undefined;\n  private _treeTraversal: number | undefined;\n  constructor(\n    treeData: ITreeChartDataPoint,\n    composition: number | undefined,\n    styleClassNames: { link: string; rectNode: string; rectText: string; rectSubText: string; rectmetricText: string },\n    _nodeElements: Array<React.SVGProps<SVGRectElement> | React.SVGProps<SVGTextElement>> = [],\n    _linkElements: Array<React.SVGProps<SVGPathElement>> = [],\n    _treeTraversal: number | undefined,\n  ) {\n    super(treeData, styleClassNames, _nodeElements, _linkElements);\n    this.composition = composition;\n    this._treeTraversal = _treeTraversal;\n  }\n  public createTree(givenLayoutWidth: number | undefined, screenWidth: number) {\n    if (givenLayoutWidth !== undefined) {\n      if (givenLayoutWidth < 65) {\n        givenLayoutWidth = 65;\n      }\n      if (givenLayoutWidth > 90) {\n        givenLayoutWidth = 90;\n      }\n    }\n    const layoutWidth = givenLayoutWidth || 75;\n    const root = hierarchy(this.treeData, d => {\n      return d.children;\n    });\n\n    // Find tree Height\n    const treeHeight = root?.height + 1;\n\n    // Create tree layout, width: layoutWidth, height: layoutWidth/1.5 and add node separation\n    const treemap = tree()\n      .nodeSize([layoutWidth, layoutWidth / 1.5])\n      .separation((a, b) => {\n        return a.parent === root && b.parent === root ? 3.5 : 1;\n      });\n\n    // Assigns the x and y position for the nodes\n    const treeData = treemap(root);\n\n    // Compute the new tree layout.\n    const nodes = treeData.descendants();\n\n    // Normalize for fixed-depth and width\n    // Normalise y coordinate by depth of each node by a factor of 130\n    // Normalise x coordinate by start coordinate 0 with screenSize/3\n    nodes.forEach(d => {\n      d.y = d.depth === 0 ? 10 : d.depth * 130;\n      d.x += screenWidth / 3;\n    });\n\n    // <------------------ Traversal section ------------------>\n\n    // Create tree data structure\n    const treeDataStructure: Array<ITreeDataStructure> = [];\n    let TreeID: number = 0;\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const createTreeDataStructure = (d: any) => {\n      d.id = TreeID;\n      treeDataStructure.push({\n        id: TreeID,\n        children: d.children,\n        dataName: d.data.name,\n        subName: d.data.subname,\n        metricName: d.data?.metric,\n        fill: d.data.fill,\n        x: d.x,\n        y: d.y,\n        parentID: d.parent?.id,\n      });\n      TreeID++;\n    };\n\n    this._treeTraversal === 0\n      ? root.each(d => {\n          createTreeDataStructure(d);\n        })\n      : root.eachBefore(d => {\n          createTreeDataStructure(d);\n        });\n\n    const rectWidth = layoutWidth * 3;\n    const rectHeight = rectWidth / 3.45;\n    const gap: number = 20;\n    const parentSet = new Set();\n\n    for (const d of treeDataStructure) {\n      const parentInfo =\n        d.id === 0\n          ? 'Root Node'\n          : `Parent info parentId: ${d.parentID}\n      ${treeDataStructure[d.parentID].dataName}\n      ${treeDataStructure[d.parentID].subName}`;\n\n      // check for leaf nodes\n      if (!d.children && !parentSet.has(d.parentID) && treeHeight === 3) {\n        const newWidth = (rectWidth - gap) / 2;\n        const newHeight = rectHeight;\n        parentSet.add(d.parentID);\n\n        // <------------------ Links section ------------------>\n        this.addLinktoSVG(\n          d.id,\n          treeDataStructure[d.parentID].x,\n          treeDataStructure[d.parentID].y,\n          treeDataStructure[d.id].x,\n          treeDataStructure[d.id].y,\n          true,\n          rectWidth,\n          rectHeight,\n          gap,\n        );\n\n        // <------------------ Nodes section ------------------>\n\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        const children: any = treeDataStructure[d.parentID]?.children;\n\n        const dx1: number = treeDataStructure[d.parentID]?.x;\n        const dx2: number = treeDataStructure[d.parentID]?.x + newWidth + gap;\n        let dy: number = children[0]?.y;\n\n        for (let itr = 0; itr < children.length; ++itr) {\n          const child = children[itr];\n\n          // Given Composition\n          if (this.composition !== undefined) {\n            // For compact compostion\n            if (this.composition === 0) {\n              this.addNodeShapetoSVG(\n                child.data.name,\n                child.data.subname,\n                child.data.metricName,\n                itr % 2 === 0 ? dx1 : dx2,\n                dy,\n                child.data.fill,\n                children.length === 1 ? rectWidth : newWidth,\n                rectHeight,\n                child.id,\n                parentInfo,\n              );\n              if (itr % 2 === 1) {\n                dy += newHeight + gap;\n              }\n            }\n            // For long compostion\n            else {\n              this.addNodeShapetoSVG(\n                child.data.name,\n                child.data.subname,\n                child.data.metricName,\n                dx1,\n                dy,\n                child.data.fill,\n                rectWidth,\n                rectHeight,\n                child.id,\n                parentInfo,\n              );\n              dy += newHeight + gap;\n            }\n          }\n\n          // Automatic Node Composition\n          else {\n            if (children.length > 2) {\n              this.addNodeShapetoSVG(\n                child.data.name,\n                child.data.subname,\n                child.data.metricName,\n                itr % 2 === 0 ? dx1 : dx2,\n                dy,\n                child.data.fill,\n                children.length === 1 ? rectWidth : newWidth,\n                rectHeight,\n                child.id,\n                parentInfo,\n              );\n              if (itr % 2 === 1) {\n                dy += newHeight + gap;\n              }\n            } else {\n              this.addNodeShapetoSVG(\n                child.data.name,\n                child.data.subname,\n                child.data.metricName,\n                dx1,\n                dy,\n                child.data.fill,\n                rectWidth,\n                rectHeight,\n                child.id,\n                parentInfo,\n              );\n              dy += newHeight + gap;\n            }\n          }\n        }\n      }\n\n      if (d.children || treeHeight <= 2) {\n        // <------------------ Nodes section ------------------>\n        this.addNodeShapetoSVG(\n          d.dataName,\n          d.subName,\n          d.metricName,\n          d.x,\n          d.y,\n          d.fill,\n          rectWidth,\n          rectHeight,\n          d.id,\n          parentInfo,\n        );\n\n        // <------------------ Links section ------------------>\n        if (d.id !== 0) {\n          this.addLinktoSVG(\n            d.id,\n            treeDataStructure[d.parentID].x,\n            treeDataStructure[d.parentID].y,\n            treeDataStructure[d.id].x,\n            treeDataStructure[d.id].y,\n            false,\n            rectWidth,\n            rectHeight,\n            gap,\n          );\n        }\n      }\n    }\n  }\n}\n\nexport class TreeChartBase extends React.Component<ITreeProps, ITreeState> {\n  private _treeData: ITreeChartDataPoint;\n  private _width: number;\n  private _height: number;\n  private _composition: number | undefined;\n  private _classNames: IProcessedStyleSet<ITreeStyles>;\n  private _margin: { left: number; right: number; top: number; bottom: number };\n  private _nodeElements: Array<React.SVGProps<SVGRectElement> | React.SVGProps<SVGTextElement>> = [];\n  private _linkElements: Array<React.SVGProps<SVGPathElement>> = [];\n  private _treeTraversal: number | undefined;\n\n  constructor(props: ITreeProps) {\n    super(props);\n    this._margin = { top: 30, right: 20, bottom: 30, left: 50 };\n    this._width = this.props.width || 1500;\n    this._height = this.props.height || 700;\n    this._treeData = this.props.treeData;\n    this._composition = this.props?.composition;\n    this._treeTraversal = this.props.treeTraversal;\n\n    this.state = {\n      _width: this._width,\n      _height: this._height,\n    };\n  }\n\n  public componentDidMount() {\n    const { theme, className, styles } = this.props;\n\n    // Get classNames to create component styling\n    this._classNames = getClassNames(styles!, {\n      theme: theme!,\n      className,\n    });\n\n    // Call createTreeChart function in componentDidMount\n    this.createTreeChart();\n\n    this.setState({\n      _width: this.props.width || 1500,\n      _height: this.props.height || 700,\n    });\n  }\n\n  public componentDidUpdate(prevProps: ITreeProps): void {\n    if (prevProps.layoutWidth !== this.props.layoutWidth) {\n      const svgText = selectAll('text');\n      const svgRect = selectAll('rect');\n      const svgLink = selectAll('path');\n\n      if (this._nodeElements.length === 0 && this._linkElements.length === 0) {\n        svgText.remove();\n        svgRect.remove();\n        svgLink.remove();\n      }\n\n      this.createTreeChart();\n    }\n  }\n  public createTreeChart() {\n    const nodeElements: Array<React.SVGProps<SVGRectElement> | React.SVGProps<SVGTextElement>> = [];\n    const linkElements: Array<React.SVGProps<SVGPathElement>> = [];\n\n    // Create styleClass object to access it in parent class\n    const styleClassNames = {\n      link: this._classNames.link,\n      rectNode: this._classNames.rectNode,\n      rectText: this._classNames.rectText,\n      rectSubText: this._classNames.rectSubText,\n      rectmetricText: this._classNames.rectMetricText,\n    };\n    // Instantiate inherited class and call createTree function for the object\n    const treeObject = new LayeredTree(\n      this._treeData,\n      this._composition,\n      styleClassNames,\n      nodeElements,\n      linkElements,\n      this._treeTraversal,\n    );\n    treeObject.createTree(this.props.layoutWidth, this._width);\n    this._nodeElements = nodeElements;\n    this._linkElements = linkElements;\n  }\n\n  public render(): JSX.Element {\n    return (\n      <FocusZone>\n        <div className={this._classNames?.root}>\n          <svg\n            className=\"svgTree\"\n            width={this.state._width - this._margin.left - this._margin.right}\n            height={this.state._height - this._margin.top - this._margin.bottom}\n          >\n            <g className=\"svgNode\">{this._nodeElements.map(element => element)}</g>\n            <g className=\"svgLink\">{this._linkElements.map(element => element)}</g>\n          </svg>\n        </div>\n      </FocusZone>\n    );\n  }\n}\n"]}

package/lib-amd/components/TreeChart/TreeChart.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { ITreeProps } from './TreeChart.types';
+export declare const TreeChart: React.FunctionComponent<ITreeProps>;

package/lib-amd/components/TreeChart/TreeChart.js

@@ -0,0 +1,7 @@
+define(["require", "exports", "@fluentui/react/lib/Utilities", "./TreeChart.base", "./TreeChart.styles"], function (require, exports, Utilities_1, TreeChart_base_1, TreeChart_styles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.TreeChart = void 0;
+    exports.TreeChart = Utilities_1.styled(TreeChart_base_1.TreeChartBase, TreeChart_styles_1.getStyles);
+});
+//# sourceMappingURL=TreeChart.js.map

package/lib-amd/components/TreeChart/TreeChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeChart.js","sourceRoot":"../src/","sources":["components/TreeChart/TreeChart.tsx"],"names":[],"mappings":";;;;IAMa,QAAA,SAAS,GAAwC,kBAAM,CAClE,8BAAa,EACb,4BAAS,CACV,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '@fluentui/react/lib/Utilities';\nimport { ITreeStyles, ITreeProps, ITreeStyleProps } from './TreeChart.types';\nimport { TreeChartBase } from './TreeChart.base';\nimport { getStyles } from './TreeChart.styles';\n\nexport const TreeChart: React.FunctionComponent<ITreeProps> = styled<ITreeProps, ITreeStyleProps, ITreeStyles>(\n  TreeChartBase,\n  getStyles,\n);\n"]}

package/lib-amd/components/TreeChart/TreeChart.styles.d.ts

@@ -0,0 +1,2 @@
+import { ITreeStyleProps, ITreeStyles } from './TreeChart.types';
+export declare const getStyles: (props: ITreeStyleProps) => ITreeStyles;

package/lib-amd/components/TreeChart/TreeChart.styles.js

@@ -0,0 +1,33 @@
+define(["require", "exports", "tslib"], function (require, exports, tslib_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.getStyles = void 0;
+    var getStyles = function (props) {
+        return {
+            root: [
+                props.theme.spacing,
+                'ms-TreeChart',
+                props.className,
+                {
+                    overflow: 'scroll',
+                },
+            ],
+            link: {
+                fill: 'none',
+                stroke: '#A1A1A1',
+                strokeWidth: '2px',
+            },
+            rectNode: {
+                strokeWidth: '2px',
+                fill: 'white',
+                padding: '10px',
+                rx: '2px',
+            },
+            rectText: tslib_1.__assign({ fill: 'black' }, props.theme.fonts.large),
+            rectSubText: tslib_1.__assign({ fill: '#484644' }, props.theme.fonts.medium),
+            rectMetricText: tslib_1.__assign({ fill: '#000000' }, props.theme.fonts.xLarge),
+        };
+    };
+    exports.getStyles = getStyles;
+});
+//# sourceMappingURL=TreeChart.styles.js.map

package/lib-amd/components/TreeChart/TreeChart.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeChart.styles.js","sourceRoot":"../src/","sources":["components/TreeChart/TreeChart.styles.ts"],"names":[],"mappings":";;;;IAEO,IAAM,SAAS,GAAG,UAAC,KAAsB;QAC9C,OAAO;YACL,IAAI,EAAE;gBACJ,KAAK,CAAC,KAAK,CAAC,OAAO;gBACnB,cAAc;gBACd,KAAK,CAAC,SAAS;gBACf;oBACE,QAAQ,EAAE,QAAQ;iBACnB;aACF;YACD,IAAI,EAAE;gBACJ,IAAI,EAAE,MAAM;gBACZ,MAAM,EAAE,SAAS;gBACjB,WAAW,EAAE,KAAK;aACnB;YACD,QAAQ,EAAE;gBACR,WAAW,EAAE,KAAK;gBAClB,IAAI,EAAE,OAAO;gBACb,OAAO,EAAE,MAAM;gBACf,EAAE,EAAE,KAAK;aACV;YACD,QAAQ,qBACN,IAAI,EAAE,OAAO,IACV,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,KAAK,CAC5B;YACD,WAAW,qBACT,IAAI,EAAE,SAAS,IACZ,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,MAAM,CAC7B;YACD,cAAc,qBACZ,IAAI,EAAE,SAAS,IACZ,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,MAAM,CAC7B;SACF,CAAC;IACJ,CAAC,CAAC;IAlCW,QAAA,SAAS,aAkCpB","sourcesContent":["import { ITreeStyleProps, ITreeStyles } from './TreeChart.types';\n\nexport const getStyles = (props: ITreeStyleProps): ITreeStyles => {\n  return {\n    root: [\n      props.theme.spacing,\n      'ms-TreeChart',\n      props.className,\n      {\n        overflow: 'scroll',\n      },\n    ],\n    link: {\n      fill: 'none',\n      stroke: '#A1A1A1',\n      strokeWidth: '2px',\n    },\n    rectNode: {\n      strokeWidth: '2px',\n      fill: 'white',\n      padding: '10px',\n      rx: '2px',\n    },\n    rectText: {\n      fill: 'black',\n      ...props.theme!.fonts.large,\n    },\n    rectSubText: {\n      fill: '#484644',\n      ...props.theme!.fonts.medium,\n    },\n    rectMetricText: {\n      fill: '#000000',\n      ...props.theme!.fonts.xLarge,\n    },\n  };\n};\n"]}