@fluentui/react-charting 5.11.0 → 5.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (84) hide show
  1. package/CHANGELOG.json +36 -1
  2. package/CHANGELOG.md +13 -2
  3. package/dist/react-charting.js +1 -1
  4. package/dist/react-charting.min.js +1 -1
  5. package/lib/TreeChart.d.ts +1 -0
  6. package/lib/TreeChart.js +2 -0
  7. package/lib/TreeChart.js.map +1 -0
  8. package/lib/Utilities.d.ts +1 -1
  9. package/lib/Utilities.js +4 -2
  10. package/lib/Utilities.js.map +1 -1
  11. package/lib/components/TreeChart/TreeChart.base.d.ts +18 -0
  12. package/lib/components/TreeChart/TreeChart.base.js +239 -0
  13. package/lib/components/TreeChart/TreeChart.base.js.map +1 -0
  14. package/lib/components/TreeChart/TreeChart.d.ts +3 -0
  15. package/lib/components/TreeChart/TreeChart.js +5 -0
  16. package/lib/components/TreeChart/TreeChart.js.map +1 -0
  17. package/lib/components/TreeChart/TreeChart.styles.d.ts +2 -0
  18. package/lib/components/TreeChart/TreeChart.styles.js +20 -0
  19. package/lib/components/TreeChart/TreeChart.styles.js.map +1 -0
  20. package/lib/components/TreeChart/TreeChart.types.d.ts +88 -0
  21. package/lib/components/TreeChart/TreeChart.types.js +11 -0
  22. package/lib/components/TreeChart/TreeChart.types.js.map +1 -0
  23. package/lib/components/TreeChart/index.d.ts +2 -0
  24. package/lib/components/TreeChart/index.js +3 -0
  25. package/lib/components/TreeChart/index.js.map +1 -0
  26. package/lib/index.d.ts +1 -0
  27. package/lib/index.js +1 -0
  28. package/lib/index.js.map +1 -1
  29. package/lib/version.js +1 -1
  30. package/lib/version.js.map +1 -1
  31. package/lib-amd/TreeChart.d.ts +1 -0
  32. package/lib-amd/TreeChart.js +6 -0
  33. package/lib-amd/TreeChart.js.map +1 -0
  34. package/lib-amd/Utilities.d.ts +1 -1
  35. package/lib-amd/Utilities.js +3 -1
  36. package/lib-amd/Utilities.js.map +1 -1
  37. package/lib-amd/components/TreeChart/TreeChart.base.d.ts +18 -0
  38. package/lib-amd/components/TreeChart/TreeChart.base.js +238 -0
  39. package/lib-amd/components/TreeChart/TreeChart.base.js.map +1 -0
  40. package/lib-amd/components/TreeChart/TreeChart.d.ts +3 -0
  41. package/lib-amd/components/TreeChart/TreeChart.js +7 -0
  42. package/lib-amd/components/TreeChart/TreeChart.js.map +1 -0
  43. package/lib-amd/components/TreeChart/TreeChart.styles.d.ts +2 -0
  44. package/lib-amd/components/TreeChart/TreeChart.styles.js +25 -0
  45. package/lib-amd/components/TreeChart/TreeChart.styles.js.map +1 -0
  46. package/lib-amd/components/TreeChart/TreeChart.types.d.ts +88 -0
  47. package/lib-amd/components/TreeChart/TreeChart.types.js +16 -0
  48. package/lib-amd/components/TreeChart/TreeChart.types.js.map +1 -0
  49. package/lib-amd/components/TreeChart/index.d.ts +2 -0
  50. package/lib-amd/components/TreeChart/index.js +7 -0
  51. package/lib-amd/components/TreeChart/index.js.map +1 -0
  52. package/lib-amd/index.d.ts +1 -0
  53. package/lib-amd/index.js +2 -1
  54. package/lib-amd/index.js.map +1 -1
  55. package/lib-amd/version.js +1 -1
  56. package/lib-amd/version.js.map +1 -1
  57. package/lib-commonjs/TreeChart.d.ts +1 -0
  58. package/lib-commonjs/TreeChart.js +5 -0
  59. package/lib-commonjs/TreeChart.js.map +1 -0
  60. package/lib-commonjs/Utilities.d.ts +1 -1
  61. package/lib-commonjs/Utilities.js +6 -4
  62. package/lib-commonjs/Utilities.js.map +1 -1
  63. package/lib-commonjs/components/TreeChart/TreeChart.base.d.ts +18 -0
  64. package/lib-commonjs/components/TreeChart/TreeChart.base.js +242 -0
  65. package/lib-commonjs/components/TreeChart/TreeChart.base.js.map +1 -0
  66. package/lib-commonjs/components/TreeChart/TreeChart.d.ts +3 -0
  67. package/lib-commonjs/components/TreeChart/TreeChart.js +8 -0
  68. package/lib-commonjs/components/TreeChart/TreeChart.js.map +1 -0
  69. package/lib-commonjs/components/TreeChart/TreeChart.styles.d.ts +2 -0
  70. package/lib-commonjs/components/TreeChart/TreeChart.styles.js +24 -0
  71. package/lib-commonjs/components/TreeChart/TreeChart.styles.js.map +1 -0
  72. package/lib-commonjs/components/TreeChart/TreeChart.types.d.ts +88 -0
  73. package/lib-commonjs/components/TreeChart/TreeChart.types.js +14 -0
  74. package/lib-commonjs/components/TreeChart/TreeChart.types.js.map +1 -0
  75. package/lib-commonjs/components/TreeChart/index.d.ts +2 -0
  76. package/lib-commonjs/components/TreeChart/index.js +6 -0
  77. package/lib-commonjs/components/TreeChart/index.js.map +1 -0
  78. package/lib-commonjs/index.d.ts +1 -0
  79. package/lib-commonjs/index.js +1 -0
  80. package/lib-commonjs/index.js.map +1 -1
  81. package/lib-commonjs/version.js +1 -1
  82. package/lib-commonjs/version.js.map +1 -1
  83. package/package.json +6 -4
  84. package/src/components/TreeChart/TreeChart.types.ts +89 -0
@@ -0,0 +1 @@
1
+ export * from './components/TreeChart/index';
@@ -0,0 +1,2 @@
1
+ export * from './components/TreeChart/index';
2
+ //# sourceMappingURL=TreeChart.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TreeChart.js","sourceRoot":"../src/","sources":["TreeChart.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC","sourcesContent":["export * from './components/TreeChart/index';\n"]}
@@ -1,2 +1,2 @@
1
- export { Async, AutoScroll, BaseComponent, Customizations, Customizer, CustomizerContext, DATA_IS_SCROLLABLE_ATTRIBUTE, DATA_PORTAL_ATTRIBUTE, DelayedRender, EventGroup, FabricPerformance, FocusRects, GlobalSettings, IsFocusVisibleClassName, KeyCodes, Rectangle, SELECTION_CHANGE, Selection, SelectionDirection, SelectionMode, addDirectionalKeyCode, addElementAtIndex, allowOverscrollOnElement, allowScrollOnElement, anchorProperties, appendFunction, arraysEqual, asAsync, assertNever, assign, audioProperties, baseElementEvents, baseElementProperties, buttonProperties, calculatePrecision, classNamesFunction, colGroupProperties, colProperties, composeComponentAs, composeRenderFunction, createArray, createMemoizer, createMergedRef, css, customizable, disableBodyScroll, divProperties, doesElementContainFocus, elementContains, elementContainsAttribute, enableBodyScroll, extendComponent, filteredAssign, find, findElementRecursive, findIndex, findScrollableParent, fitContentToBounds, flatten, focusAsync, focusFirstChild, formProperties, format, getChildren, getDistanceBetweenPoints, getDocument, getElementIndexPath, getFirstFocusable, getFirstTabbable, getFirstVisibleElementFromSelector, getFocusableByIndexPath, getId, getInitials, getLanguage, getLastFocusable, getLastTabbable, getNativeElementProps, getNativeProps, getNextElement, getParent, getPreviousElement, getPropsWithDefaults, getRTL, getRTLSafeKeyCode, getRect, getResourceUrl, getScrollbarWidth, getVirtualParent, getWindow, hasHorizontalOverflow, hasOverflow, hasVerticalOverflow, hoistMethods, hoistStatics, htmlElementProperties, iframeProperties, imageProperties, imgProperties, initializeComponentRef, initializeFocusRects, inputProperties, isControlled, isDirectionalKeyCode, isElementFocusSubZone, isElementFocusZone, isElementTabbable, isElementVisible, isElementVisibleAndNotHidden, isIE11, isIOS, isMac, isVirtualElement, labelProperties, liProperties, mapEnumByName, memoize, memoizeFunction, merge, mergeAriaAttributeValues, mergeCustomizations, mergeScopedSettings, mergeSettings, modalize, nullRender, olProperties, omit, on, optionProperties, portalContainsElement, precisionRound, raiseClick, removeIndex, replaceElement, resetControlledWarnings, resetIds, resetMemoizations, safeRequestAnimationFrame, safeSetTimeout, selectProperties, setBaseUrl, setFocusVisibility, setLanguage, setMemoizeWeakMap, setPortalAttribute, setRTL, setSSR, setVirtualParent, setWarningCallback, shallowCompare, shouldWrapFocus, styled, tableProperties, tdProperties, textAreaProperties, thProperties, toMatrix, trProperties, unhoistMethods, useCustomizationSettings, useFocusRects, values, videoProperties, warn, warnConditionallyRequiredProps, warnControlledUsage, warnDeprecations, warnMutuallyExclusive, } from '@fluentui/react/lib/Utilities';
1
+ export { Async, AutoScroll, BaseComponent, Customizations, Customizer, CustomizerContext, DATA_IS_SCROLLABLE_ATTRIBUTE, DATA_PORTAL_ATTRIBUTE, DelayedRender, EventGroup, FabricPerformance, FocusRects, GlobalSettings, IsFocusVisibleClassName, KeyCodes, Rectangle, SELECTION_CHANGE, Selection, SelectionDirection, SelectionMode, addDirectionalKeyCode, addElementAtIndex, allowOverscrollOnElement, allowScrollOnElement, anchorProperties, appendFunction, arraysEqual, asAsync, assertNever, assign, audioProperties, baseElementEvents, baseElementProperties, buttonProperties, calculatePrecision, canUseDOM, classNamesFunction, colGroupProperties, colProperties, composeComponentAs, composeRenderFunction, createArray, createMemoizer, createMergedRef, css, customizable, disableBodyScroll, divProperties, doesElementContainFocus, elementContains, elementContainsAttribute, enableBodyScroll, extendComponent, filteredAssign, find, findElementRecursive, findIndex, findScrollableParent, fitContentToBounds, flatten, focusAsync, focusFirstChild, formProperties, format, getChildren, getDistanceBetweenPoints, getDocument, getElementIndexPath, getFirstFocusable, getFirstTabbable, getFirstVisibleElementFromSelector, getFocusableByIndexPath, getId, getInitials, getLanguage, getLastFocusable, getLastTabbable, getNativeElementProps, getNativeProps, getNextElement, getParent, getPreviousElement, getPropsWithDefaults, getRTL, getRTLSafeKeyCode, getRect, getResourceUrl, getScrollbarWidth, getVirtualParent, getWindow, hasHorizontalOverflow, hasOverflow, hasVerticalOverflow, hoistMethods, hoistStatics, htmlElementProperties, iframeProperties, imageProperties, imgProperties, initializeComponentRef, initializeFocusRects, inputProperties, isControlled, isDirectionalKeyCode, isElementFocusSubZone, isElementFocusZone, isElementTabbable, isElementVisible, isElementVisibleAndNotHidden, isIE11, isIOS, isMac, isVirtualElement, labelProperties, liProperties, mapEnumByName, memoize, memoizeFunction, merge, mergeAriaAttributeValues, mergeCustomizations, mergeScopedSettings, mergeSettings, modalize, nullRender, olProperties, omit, on, optionProperties, portalContainsElement, precisionRound, raiseClick, removeIndex, replaceElement, resetControlledWarnings, resetIds, resetMemoizations, safeRequestAnimationFrame, safeSetTimeout, selectProperties, setBaseUrl, setFocusVisibility, setLanguage, setMemoizeWeakMap, setPortalAttribute, setRTL, setSSR, setVirtualParent, setWarningCallback, shallowCompare, shouldWrapFocus, styled, tableProperties, tdProperties, textAreaProperties, thProperties, toMatrix, trProperties, unhoistMethods, useCustomizationSettings, useFocusRects, values, videoProperties, warn, warnConditionallyRequiredProps, warnControlledUsage, warnDeprecations, warnMutuallyExclusive, } from '@fluentui/react/lib/Utilities';
2
2
  export type { FitMode, IAsAsyncOptions, IBaseProps, ICancelable, IChangeDescription, IChangeEventCallback, IClassNames, IClassNamesFunctionOptions, IComponentAs, IComponentAsProps, ICssInput, ICustomizableProps, ICustomizations, ICustomizerContext, ICustomizerProps, IDeclaredEventsByName, IDelayedRenderProps, IDelayedRenderState, IDictionary, IDisposable, IEventRecord, IEventRecordList, IEventRecordsByName, IFitContentToBoundsOptions, IObjectWithKey, IPerfData, IPerfMeasurement, IPerfSummary, IPoint, IPropsWithStyles, IRectangle, IRefObject, IRenderComponent, IRenderFunction, ISelection, ISelectionOptions, ISelectionOptionsWithRequiredGetKey, ISerializableObject, ISettings, ISettingsFunction, ISettingsMap, ISize, IStyleFunction, IStyleFunctionOrObject, IVirtualElement, IWarnControlledUsageParams, Omit, Point, RefObject, Settings, SettingsFunction, StyleFunction, } from '@fluentui/react/lib/Utilities';
package/lib/Utilities.js CHANGED
@@ -2,7 +2,7 @@ export { Async, AutoScroll,
2
2
  // eslint-disable-next-line deprecation/deprecation
3
3
  BaseComponent, Customizations,
4
4
  // eslint-disable-next-line deprecation/deprecation
5
- Customizer, CustomizerContext, DATA_IS_SCROLLABLE_ATTRIBUTE, DATA_PORTAL_ATTRIBUTE, DelayedRender, EventGroup, FabricPerformance, FocusRects, GlobalSettings, IsFocusVisibleClassName, KeyCodes, Rectangle, SELECTION_CHANGE, Selection, SelectionDirection, SelectionMode, addDirectionalKeyCode, addElementAtIndex, allowOverscrollOnElement, allowScrollOnElement, anchorProperties, appendFunction, arraysEqual, asAsync, assertNever, assign, audioProperties, baseElementEvents, baseElementProperties, buttonProperties, calculatePrecision, classNamesFunction, colGroupProperties, colProperties, composeComponentAs, composeRenderFunction, createArray, createMemoizer, createMergedRef, css, customizable, disableBodyScroll, divProperties, doesElementContainFocus, elementContains, elementContainsAttribute, enableBodyScroll, extendComponent, filteredAssign, find, findElementRecursive, findIndex, findScrollableParent, fitContentToBounds, flatten, focusAsync, focusFirstChild, formProperties, format, getChildren, getDistanceBetweenPoints, getDocument, getElementIndexPath, getFirstFocusable, getFirstTabbable, getFirstVisibleElementFromSelector, getFocusableByIndexPath, getId, getInitials, getLanguage, getLastFocusable, getLastTabbable, getNativeElementProps, getNativeProps, getNextElement, getParent, getPreviousElement, getPropsWithDefaults, getRTL, getRTLSafeKeyCode, getRect,
5
+ Customizer, CustomizerContext, DATA_IS_SCROLLABLE_ATTRIBUTE, DATA_PORTAL_ATTRIBUTE, DelayedRender, EventGroup, FabricPerformance, FocusRects, GlobalSettings, IsFocusVisibleClassName, KeyCodes, Rectangle, SELECTION_CHANGE, Selection, SelectionDirection, SelectionMode, addDirectionalKeyCode, addElementAtIndex, allowOverscrollOnElement, allowScrollOnElement, anchorProperties, appendFunction, arraysEqual, asAsync, assertNever, assign, audioProperties, baseElementEvents, baseElementProperties, buttonProperties, calculatePrecision, canUseDOM, classNamesFunction, colGroupProperties, colProperties, composeComponentAs, composeRenderFunction, createArray, createMemoizer, createMergedRef, css, customizable, disableBodyScroll, divProperties, doesElementContainFocus, elementContains, elementContainsAttribute, enableBodyScroll, extendComponent, filteredAssign, find, findElementRecursive, findIndex, findScrollableParent, fitContentToBounds, flatten, focusAsync, focusFirstChild, formProperties, format, getChildren, getDistanceBetweenPoints, getDocument, getElementIndexPath, getFirstFocusable, getFirstTabbable, getFirstVisibleElementFromSelector, getFocusableByIndexPath, getId, getInitials, getLanguage, getLastFocusable, getLastTabbable, getNativeElementProps, getNativeProps, getNextElement, getParent, getPreviousElement, getPropsWithDefaults, getRTL, getRTLSafeKeyCode, getRect,
6
6
  // eslint-disable-next-line deprecation/deprecation
7
7
  getResourceUrl, getScrollbarWidth, getVirtualParent, getWindow, hasHorizontalOverflow, hasOverflow, hasVerticalOverflow, hoistMethods, hoistStatics, htmlElementProperties, iframeProperties,
8
8
  // eslint-disable-next-line deprecation/deprecation
@@ -14,5 +14,7 @@ raiseClick, removeIndex, replaceElement, resetControlledWarnings, resetIds, rese
14
14
  // eslint-disable-next-line deprecation/deprecation
15
15
  setBaseUrl, setFocusVisibility,
16
16
  // eslint-disable-next-line deprecation/deprecation
17
- setLanguage, setMemoizeWeakMap, setPortalAttribute, setRTL, setSSR, setVirtualParent, setWarningCallback, shallowCompare, shouldWrapFocus, styled, tableProperties, tdProperties, textAreaProperties, thProperties, toMatrix, trProperties, unhoistMethods, useCustomizationSettings, useFocusRects, values, videoProperties, warn, warnConditionallyRequiredProps, warnControlledUsage, warnDeprecations, warnMutuallyExclusive, } from '@fluentui/react/lib/Utilities';
17
+ setLanguage, setMemoizeWeakMap, setPortalAttribute, setRTL,
18
+ // eslint-disable-next-line deprecation/deprecation
19
+ setSSR, setVirtualParent, setWarningCallback, shallowCompare, shouldWrapFocus, styled, tableProperties, tdProperties, textAreaProperties, thProperties, toMatrix, trProperties, unhoistMethods, useCustomizationSettings, useFocusRects, values, videoProperties, warn, warnConditionallyRequiredProps, warnControlledUsage, warnDeprecations, warnMutuallyExclusive, } from '@fluentui/react/lib/Utilities';
18
20
  //# sourceMappingURL=Utilities.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Utilities.js","sourceRoot":"../src/","sources":["Utilities.ts"],"names":[],"mappings":"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","sourcesContent":["export {\n Async,\n AutoScroll,\n // eslint-disable-next-line deprecation/deprecation\n BaseComponent,\n Customizations,\n // eslint-disable-next-line deprecation/deprecation\n Customizer,\n CustomizerContext,\n DATA_IS_SCROLLABLE_ATTRIBUTE,\n DATA_PORTAL_ATTRIBUTE,\n DelayedRender,\n EventGroup,\n FabricPerformance,\n FocusRects,\n GlobalSettings,\n IsFocusVisibleClassName,\n KeyCodes,\n Rectangle,\n SELECTION_CHANGE,\n Selection,\n SelectionDirection,\n SelectionMode,\n addDirectionalKeyCode,\n addElementAtIndex,\n allowOverscrollOnElement,\n allowScrollOnElement,\n anchorProperties,\n appendFunction,\n arraysEqual,\n asAsync,\n assertNever,\n assign,\n audioProperties,\n baseElementEvents,\n baseElementProperties,\n buttonProperties,\n calculatePrecision,\n classNamesFunction,\n colGroupProperties,\n colProperties,\n composeComponentAs,\n composeRenderFunction,\n createArray,\n createMemoizer,\n createMergedRef,\n css,\n customizable,\n disableBodyScroll,\n divProperties,\n doesElementContainFocus,\n elementContains,\n elementContainsAttribute,\n enableBodyScroll,\n extendComponent,\n filteredAssign,\n find,\n findElementRecursive,\n findIndex,\n findScrollableParent,\n fitContentToBounds,\n flatten,\n focusAsync,\n focusFirstChild,\n formProperties,\n format,\n getChildren,\n getDistanceBetweenPoints,\n getDocument,\n getElementIndexPath,\n getFirstFocusable,\n getFirstTabbable,\n getFirstVisibleElementFromSelector,\n getFocusableByIndexPath,\n getId,\n getInitials,\n getLanguage,\n getLastFocusable,\n getLastTabbable,\n getNativeElementProps,\n getNativeProps,\n getNextElement,\n getParent,\n getPreviousElement,\n getPropsWithDefaults,\n getRTL,\n getRTLSafeKeyCode,\n getRect,\n // eslint-disable-next-line deprecation/deprecation\n getResourceUrl,\n getScrollbarWidth,\n getVirtualParent,\n getWindow,\n hasHorizontalOverflow,\n hasOverflow,\n hasVerticalOverflow,\n hoistMethods,\n hoistStatics,\n htmlElementProperties,\n iframeProperties,\n // eslint-disable-next-line deprecation/deprecation\n imageProperties,\n imgProperties,\n initializeComponentRef,\n // eslint-disable-next-line deprecation/deprecation\n initializeFocusRects,\n inputProperties,\n isControlled,\n isDirectionalKeyCode,\n isElementFocusSubZone,\n isElementFocusZone,\n isElementTabbable,\n isElementVisible,\n isElementVisibleAndNotHidden,\n isIE11,\n isIOS,\n isMac,\n isVirtualElement,\n labelProperties,\n liProperties,\n mapEnumByName,\n memoize,\n memoizeFunction,\n merge,\n mergeAriaAttributeValues,\n mergeCustomizations,\n mergeScopedSettings,\n mergeSettings,\n modalize,\n nullRender,\n olProperties,\n omit,\n on,\n optionProperties,\n portalContainsElement,\n precisionRound,\n // eslint-disable-next-line deprecation/deprecation\n raiseClick,\n removeIndex,\n replaceElement,\n resetControlledWarnings,\n resetIds,\n resetMemoizations,\n safeRequestAnimationFrame,\n safeSetTimeout,\n selectProperties,\n // eslint-disable-next-line deprecation/deprecation\n setBaseUrl,\n setFocusVisibility,\n // eslint-disable-next-line deprecation/deprecation\n setLanguage,\n setMemoizeWeakMap,\n setPortalAttribute,\n setRTL,\n setSSR,\n setVirtualParent,\n setWarningCallback,\n shallowCompare,\n shouldWrapFocus,\n styled,\n tableProperties,\n tdProperties,\n textAreaProperties,\n thProperties,\n toMatrix,\n trProperties,\n unhoistMethods,\n useCustomizationSettings,\n useFocusRects,\n values,\n videoProperties,\n warn,\n warnConditionallyRequiredProps,\n warnControlledUsage,\n warnDeprecations,\n warnMutuallyExclusive,\n} from '@fluentui/react/lib/Utilities';\nexport type {\n FitMode,\n IAsAsyncOptions,\n IBaseProps,\n ICancelable,\n IChangeDescription,\n IChangeEventCallback,\n // eslint-disable-next-line deprecation/deprecation\n IClassNames,\n IClassNamesFunctionOptions,\n IComponentAs,\n IComponentAsProps,\n ICssInput,\n ICustomizableProps,\n ICustomizations,\n ICustomizerContext,\n ICustomizerProps,\n IDeclaredEventsByName,\n IDelayedRenderProps,\n IDelayedRenderState,\n IDictionary,\n IDisposable,\n IEventRecord,\n IEventRecordList,\n IEventRecordsByName,\n IFitContentToBoundsOptions,\n IObjectWithKey,\n IPerfData,\n IPerfMeasurement,\n IPerfSummary,\n // eslint-disable-next-line deprecation/deprecation\n IPoint,\n IPropsWithStyles,\n IRectangle,\n IRefObject,\n IRenderComponent,\n IRenderFunction,\n ISelection,\n ISelectionOptions,\n ISelectionOptionsWithRequiredGetKey,\n ISerializableObject,\n ISettings,\n ISettingsFunction,\n ISettingsMap,\n ISize,\n IStyleFunction,\n IStyleFunctionOrObject,\n IVirtualElement,\n IWarnControlledUsageParams,\n // eslint-disable-next-line deprecation/deprecation\n Omit,\n Point,\n RefObject,\n // eslint-disable-next-line deprecation/deprecation\n Settings,\n // eslint-disable-next-line deprecation/deprecation\n SettingsFunction,\n StyleFunction,\n} from '@fluentui/react/lib/Utilities';\n"]}
1
+ {"version":3,"file":"Utilities.js","sourceRoot":"../src/","sources":["Utilities.ts"],"names":[],"mappings":"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","sourcesContent":["export {\n Async,\n AutoScroll,\n // eslint-disable-next-line deprecation/deprecation\n BaseComponent,\n Customizations,\n // eslint-disable-next-line deprecation/deprecation\n Customizer,\n CustomizerContext,\n DATA_IS_SCROLLABLE_ATTRIBUTE,\n DATA_PORTAL_ATTRIBUTE,\n DelayedRender,\n EventGroup,\n FabricPerformance,\n FocusRects,\n GlobalSettings,\n IsFocusVisibleClassName,\n KeyCodes,\n Rectangle,\n SELECTION_CHANGE,\n Selection,\n SelectionDirection,\n SelectionMode,\n addDirectionalKeyCode,\n addElementAtIndex,\n allowOverscrollOnElement,\n allowScrollOnElement,\n anchorProperties,\n appendFunction,\n arraysEqual,\n asAsync,\n assertNever,\n assign,\n audioProperties,\n baseElementEvents,\n baseElementProperties,\n buttonProperties,\n calculatePrecision,\n canUseDOM,\n classNamesFunction,\n colGroupProperties,\n colProperties,\n composeComponentAs,\n composeRenderFunction,\n createArray,\n createMemoizer,\n createMergedRef,\n css,\n customizable,\n disableBodyScroll,\n divProperties,\n doesElementContainFocus,\n elementContains,\n elementContainsAttribute,\n enableBodyScroll,\n extendComponent,\n filteredAssign,\n find,\n findElementRecursive,\n findIndex,\n findScrollableParent,\n fitContentToBounds,\n flatten,\n focusAsync,\n focusFirstChild,\n formProperties,\n format,\n getChildren,\n getDistanceBetweenPoints,\n getDocument,\n getElementIndexPath,\n getFirstFocusable,\n getFirstTabbable,\n getFirstVisibleElementFromSelector,\n getFocusableByIndexPath,\n getId,\n getInitials,\n getLanguage,\n getLastFocusable,\n getLastTabbable,\n getNativeElementProps,\n getNativeProps,\n getNextElement,\n getParent,\n getPreviousElement,\n getPropsWithDefaults,\n getRTL,\n getRTLSafeKeyCode,\n getRect,\n // eslint-disable-next-line deprecation/deprecation\n getResourceUrl,\n getScrollbarWidth,\n getVirtualParent,\n getWindow,\n hasHorizontalOverflow,\n hasOverflow,\n hasVerticalOverflow,\n hoistMethods,\n hoistStatics,\n htmlElementProperties,\n iframeProperties,\n // eslint-disable-next-line deprecation/deprecation\n imageProperties,\n imgProperties,\n initializeComponentRef,\n // eslint-disable-next-line deprecation/deprecation\n initializeFocusRects,\n inputProperties,\n isControlled,\n isDirectionalKeyCode,\n isElementFocusSubZone,\n isElementFocusZone,\n isElementTabbable,\n isElementVisible,\n isElementVisibleAndNotHidden,\n isIE11,\n isIOS,\n isMac,\n isVirtualElement,\n labelProperties,\n liProperties,\n mapEnumByName,\n memoize,\n memoizeFunction,\n merge,\n mergeAriaAttributeValues,\n mergeCustomizations,\n mergeScopedSettings,\n mergeSettings,\n modalize,\n nullRender,\n olProperties,\n omit,\n on,\n optionProperties,\n portalContainsElement,\n precisionRound,\n // eslint-disable-next-line deprecation/deprecation\n raiseClick,\n removeIndex,\n replaceElement,\n resetControlledWarnings,\n resetIds,\n resetMemoizations,\n safeRequestAnimationFrame,\n safeSetTimeout,\n selectProperties,\n // eslint-disable-next-line deprecation/deprecation\n setBaseUrl,\n setFocusVisibility,\n // eslint-disable-next-line deprecation/deprecation\n setLanguage,\n setMemoizeWeakMap,\n setPortalAttribute,\n setRTL,\n // eslint-disable-next-line deprecation/deprecation\n setSSR,\n setVirtualParent,\n setWarningCallback,\n shallowCompare,\n shouldWrapFocus,\n styled,\n tableProperties,\n tdProperties,\n textAreaProperties,\n thProperties,\n toMatrix,\n trProperties,\n unhoistMethods,\n useCustomizationSettings,\n useFocusRects,\n values,\n videoProperties,\n warn,\n warnConditionallyRequiredProps,\n warnControlledUsage,\n warnDeprecations,\n warnMutuallyExclusive,\n} from '@fluentui/react/lib/Utilities';\nexport type {\n FitMode,\n IAsAsyncOptions,\n IBaseProps,\n ICancelable,\n IChangeDescription,\n IChangeEventCallback,\n // eslint-disable-next-line deprecation/deprecation\n IClassNames,\n IClassNamesFunctionOptions,\n IComponentAs,\n IComponentAsProps,\n ICssInput,\n ICustomizableProps,\n ICustomizations,\n ICustomizerContext,\n ICustomizerProps,\n IDeclaredEventsByName,\n IDelayedRenderProps,\n IDelayedRenderState,\n IDictionary,\n IDisposable,\n IEventRecord,\n IEventRecordList,\n IEventRecordsByName,\n IFitContentToBoundsOptions,\n IObjectWithKey,\n IPerfData,\n IPerfMeasurement,\n IPerfSummary,\n // eslint-disable-next-line deprecation/deprecation\n IPoint,\n IPropsWithStyles,\n IRectangle,\n IRefObject,\n IRenderComponent,\n IRenderFunction,\n ISelection,\n ISelectionOptions,\n ISelectionOptionsWithRequiredGetKey,\n ISerializableObject,\n ISettings,\n ISettingsFunction,\n ISettingsMap,\n ISize,\n IStyleFunction,\n IStyleFunctionOrObject,\n IVirtualElement,\n IWarnControlledUsageParams,\n // eslint-disable-next-line deprecation/deprecation\n Omit,\n Point,\n RefObject,\n // eslint-disable-next-line deprecation/deprecation\n Settings,\n // eslint-disable-next-line deprecation/deprecation\n SettingsFunction,\n StyleFunction,\n} from '@fluentui/react/lib/Utilities';\n"]}
@@ -0,0 +1,18 @@
1
+ import * as React from 'react';
2
+ import { ITreeProps, ITreeState } from '../../index';
3
+ export declare class TreeChartBase extends React.Component<ITreeProps, ITreeState> {
4
+ private _treeData;
5
+ private _width;
6
+ private _height;
7
+ private _composition;
8
+ private _classNames;
9
+ private _rootElem;
10
+ private _margin;
11
+ private _nodeElements;
12
+ private _linkElements;
13
+ private _treeTraversal;
14
+ constructor(props: ITreeProps);
15
+ componentDidMount(): void;
16
+ createTreeChart(): void;
17
+ render(): JSX.Element;
18
+ }
@@ -0,0 +1,239 @@
1
+ import { __extends } from "tslib";
2
+ import * as React from 'react';
3
+ import { select } from 'd3-selection';
4
+ import { hierarchy, tree } from 'd3-hierarchy';
5
+ import { classNamesFunction } from '@fluentui/react/lib/Utilities';
6
+ import { FocusZone } from '@fluentui/react-focus';
7
+ var getClassNames = classNamesFunction();
8
+ // Create a parent class for common tree components
9
+ var StandardTree = /** @class */ (function () {
10
+ function StandardTree(treeData, styleClassNames, _nodeElements, _linkElements) {
11
+ if (_nodeElements === void 0) { _nodeElements = []; }
12
+ if (_linkElements === void 0) { _linkElements = []; }
13
+ this._nodeElements = [];
14
+ this._linkElements = [];
15
+ this.treeData = treeData;
16
+ this.styleClassNames = styleClassNames;
17
+ this._nodeElements = _nodeElements;
18
+ this._linkElements = _linkElements;
19
+ }
20
+ // Append node elements
21
+ // nodeId to create unique key
22
+ StandardTree.prototype.addNodeShapetoSVG = function (name, subname, metricName, xCoordinate, yCoordinate, fillColor, rectangleWidth, rectangleHeight, nodeId, parentInfo) {
23
+ var ariaLabel = "nodeId: " + nodeId + " \nnodeMainText: " + name + "\nsubText " + subname + " " + parentInfo;
24
+ 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 }));
25
+ // Text position y = y + rectHeight/2, 2 is ratio for depth
26
+ // Text position x = x + rectWidth/2, 2 is ratio for length
27
+ // Sub-text position x = x + rectWidth/2, 2 is ratio for length
28
+ 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));
29
+ 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 },
30
+ name,
31
+ subValue));
32
+ };
33
+ // Create a rectangular path from parent to the child nodes
34
+ StandardTree.prototype.createPathLink = function (parentX, parentY, childX, childY, leaf, rectWidth, rectHeight, gap) {
35
+ // gap adds ratio for parent.y to child.y
36
+ var path = "M" + (childX + rectWidth / 2) + "," + (childY - gap) + " H" + (parentX + rectWidth / 2) + " V" + (parentY + rectHeight + gap / 2);
37
+ var leafpath = "M" + (parentX + rectWidth / 2) + "," + (parentY + rectHeight + gap / 2) + " V" + (parentY + gap * 5) + " H" + parentX + " H" + (parentX + rectWidth);
38
+ // based on the type of node return leafpath or path element
39
+ return leaf ? leafpath : path;
40
+ };
41
+ // Append path link element
42
+ StandardTree.prototype.addLinktoSVG = function (nodeId, parentX, parentY, childX, childY, leaf, rectWidth, rectHeight, gap) {
43
+ 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 }));
44
+ };
45
+ return StandardTree;
46
+ }());
47
+ // Create child class to Add Tree component based on treeHeight
48
+ var LayeredTree = /** @class */ (function (_super) {
49
+ __extends(LayeredTree, _super);
50
+ function LayeredTree(treeData, composition, styleClassNames, _nodeElements, _linkElements, _treeTraversal) {
51
+ if (_nodeElements === void 0) { _nodeElements = []; }
52
+ if (_linkElements === void 0) { _linkElements = []; }
53
+ var _this = _super.call(this, treeData, styleClassNames, _nodeElements, _linkElements) || this;
54
+ _this.composition = composition;
55
+ _this._treeTraversal = _treeTraversal;
56
+ return _this;
57
+ }
58
+ LayeredTree.prototype.createTree = function () {
59
+ var _a, _b, _c, _d;
60
+ var root = hierarchy(this.treeData, function (d) {
61
+ return d.children;
62
+ });
63
+ // Find tree Height
64
+ var treeHeight = (root === null || root === void 0 ? void 0 : root.height) + 1;
65
+ // Create tree layout, width: 70, height: 90 and add node separation
66
+ var treemap = tree()
67
+ .nodeSize([75, 50])
68
+ .separation(function (a, b) {
69
+ return a.parent === root && b.parent === root ? 3.5 : 1;
70
+ });
71
+ // Assigns the x and y position for the nodes
72
+ var treeData = treemap(root);
73
+ // Compute the new tree layout.
74
+ var nodes = treeData.descendants();
75
+ // Normalize for fixed-depth and width
76
+ // Normalise y coordinate by depth of each node by a factor of 130
77
+ // Normalise x coordinate by start coordinate 0 with 450
78
+ nodes.forEach(function (d) {
79
+ d.y = d.depth === 0 ? 10 : d.depth * 130;
80
+ d.x += 400;
81
+ });
82
+ // <------------------ Traversal section ------------------>
83
+ // Create tree data structure
84
+ var treeDataStructure = [];
85
+ var TreeID = 0;
86
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
87
+ var createTreeDataStructure = function (d) {
88
+ var _a, _b;
89
+ d.id = TreeID;
90
+ treeDataStructure.push({
91
+ id: TreeID,
92
+ children: d.children,
93
+ dataName: d.data.name,
94
+ subName: d.data.subname,
95
+ metricName: (_a = d.data) === null || _a === void 0 ? void 0 : _a.metric,
96
+ fill: d.data.fill,
97
+ x: d.x,
98
+ y: d.y,
99
+ parentID: (_b = d.parent) === null || _b === void 0 ? void 0 : _b.id,
100
+ });
101
+ TreeID++;
102
+ };
103
+ this._treeTraversal === 0
104
+ ? root.each(function (d) {
105
+ createTreeDataStructure(d);
106
+ })
107
+ : root.eachBefore(function (d) {
108
+ createTreeDataStructure(d);
109
+ });
110
+ var rectHeight = 70;
111
+ var rectWidth = 220;
112
+ var gap = 20;
113
+ var parentSet = new Set();
114
+ for (var _i = 0, treeDataStructure_1 = treeDataStructure; _i < treeDataStructure_1.length; _i++) {
115
+ var d = treeDataStructure_1[_i];
116
+ var parentInfo = d.id === 0
117
+ ? 'Root Node'
118
+ : "Parent info parentId: " + d.parentID + "\n " + treeDataStructure[d.parentID].dataName + "\n " + treeDataStructure[d.parentID].subName;
119
+ // check for leaf nodes
120
+ if (!d.children && !parentSet.has(d.parentID) && treeHeight === 3) {
121
+ var newWidth = (rectWidth - gap) / 2;
122
+ var newHeight = 70;
123
+ parentSet.add(d.parentID);
124
+ // <------------------ Links section ------------------>
125
+ this.addLinktoSVG(d.id, treeDataStructure[d.parentID].x, treeDataStructure[d.parentID].y, treeDataStructure[d.id].x, treeDataStructure[d.id].y, true, rectWidth, rectHeight, gap);
126
+ // <------------------ Nodes section ------------------>
127
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
128
+ var children = (_a = treeDataStructure[d.parentID]) === null || _a === void 0 ? void 0 : _a.children;
129
+ var dx1 = (_b = treeDataStructure[d.parentID]) === null || _b === void 0 ? void 0 : _b.x;
130
+ var dx2 = ((_c = treeDataStructure[d.parentID]) === null || _c === void 0 ? void 0 : _c.x) + newWidth + gap;
131
+ var dy = (_d = children[0]) === null || _d === void 0 ? void 0 : _d.y;
132
+ for (var itr = 0; itr < children.length; ++itr) {
133
+ var child = children[itr];
134
+ // Given Composition
135
+ if (this.composition !== undefined) {
136
+ // For compact compostion
137
+ if (this.composition === 0) {
138
+ 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);
139
+ if (itr % 2 === 1) {
140
+ dy += newHeight + gap;
141
+ }
142
+ }
143
+ // For long compostion
144
+ else {
145
+ this.addNodeShapetoSVG(child.data.name, child.data.subname, child.data.metricName, dx1, dy, child.data.fill, rectWidth, rectHeight, child.id, parentInfo);
146
+ dy += newHeight + gap;
147
+ }
148
+ }
149
+ // Automatic Node Composition
150
+ else {
151
+ if (children.length > 2) {
152
+ 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);
153
+ if (itr % 2 === 1) {
154
+ dy += newHeight + gap;
155
+ }
156
+ }
157
+ else {
158
+ this.addNodeShapetoSVG(child.data.name, child.data.subname, child.data.metricName, dx1, dy, child.data.fill, rectWidth, rectHeight, child.id, parentInfo);
159
+ dy += newHeight + gap;
160
+ }
161
+ }
162
+ }
163
+ }
164
+ if (d.children || treeHeight <= 2) {
165
+ // <------------------ Nodes section ------------------>
166
+ this.addNodeShapetoSVG(d.dataName, d.subName, d.metricName, d.x, d.y, d.fill, rectWidth, rectHeight, d.id, parentInfo);
167
+ // <------------------ Links section ------------------>
168
+ if (d.id !== 0) {
169
+ this.addLinktoSVG(d.id, treeDataStructure[d.parentID].x, treeDataStructure[d.parentID].y, treeDataStructure[d.id].x, treeDataStructure[d.id].y, false, rectWidth, rectHeight, gap);
170
+ }
171
+ }
172
+ }
173
+ };
174
+ return LayeredTree;
175
+ }(StandardTree));
176
+ var TreeChartBase = /** @class */ (function (_super) {
177
+ __extends(TreeChartBase, _super);
178
+ function TreeChartBase(props) {
179
+ var _a;
180
+ var _this = _super.call(this, props) || this;
181
+ _this._nodeElements = [];
182
+ _this._linkElements = [];
183
+ _this._margin = { top: 30, right: 20, bottom: 30, left: 50 };
184
+ _this._width = _this.props.width || 1200;
185
+ _this._height = _this.props.height || 700;
186
+ _this._treeData = _this.props.treeData;
187
+ _this._composition = (_a = _this.props) === null || _a === void 0 ? void 0 : _a.composition;
188
+ _this._treeTraversal = _this.props.treeTraversal;
189
+ _this.state = {
190
+ _width: _this._width || 1000,
191
+ _height: _this._height || 700,
192
+ };
193
+ return _this;
194
+ }
195
+ TreeChartBase.prototype.componentDidMount = function () {
196
+ var _a = this.props, theme = _a.theme, className = _a.className, styles = _a.styles;
197
+ // Get classNames to create component styling
198
+ this._classNames = getClassNames(styles, {
199
+ theme: theme,
200
+ className: className,
201
+ });
202
+ // Call createTreeChart function in componentDidMount
203
+ this.createTreeChart();
204
+ var reducedHeight = this._rootElem && this._rootElem.offsetHeight / 5;
205
+ this.setState({
206
+ _width: (this._rootElem && this._rootElem.offsetWidth),
207
+ _height: (this._rootElem && this._rootElem.offsetHeight - reducedHeight),
208
+ });
209
+ };
210
+ TreeChartBase.prototype.createTreeChart = function () {
211
+ var svg = select('.svgTree');
212
+ // Set SVG width and height
213
+ svg
214
+ .attr('width', this.state._width - this._margin.left - this._margin.right)
215
+ .attr('height', this.state._height - this._margin.top - this._margin.bottom);
216
+ // Create styleClass object to access it in parent class
217
+ var styleClassNames = {
218
+ link: this._classNames.link,
219
+ rectNode: this._classNames.rectNode,
220
+ rectText: this._classNames.rectText,
221
+ rectSubText: this._classNames.rectSubText,
222
+ rectmetricText: this._classNames.rectMetricText,
223
+ };
224
+ // Instantiate inherited class and call createTree function for the object
225
+ var treeObject = new LayeredTree(this._treeData, this._composition, styleClassNames, this._nodeElements, this._linkElements, this._treeTraversal);
226
+ treeObject.createTree();
227
+ };
228
+ TreeChartBase.prototype.render = function () {
229
+ var _this = this;
230
+ return (React.createElement(FocusZone, null,
231
+ React.createElement("div", { className: "svgTreeDiv", ref: function (rootElem) { return (_this._rootElem = rootElem); } },
232
+ React.createElement("svg", { className: "svgTree" },
233
+ React.createElement("g", { className: "svgNode" }, this._nodeElements.map(function (element) { return element; })),
234
+ React.createElement("g", { className: "svgLink" }, this._linkElements.map(function (element) { return element; }))))));
235
+ };
236
+ return TreeChartBase;
237
+ }(React.Component));
238
+ export { TreeChartBase };
239
+ //# sourceMappingURL=TreeChart.base.js.map
@@ -0,0 +1 @@
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 { select } from 'd3-selection';\nimport { hierarchy, tree } from 'd3-hierarchy';\nimport { classNamesFunction } from '@fluentui/react/lib/Utilities';\nimport { IProcessedStyleSet } from '@fluentui/react/lib/Styling';\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\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 // Append node elements\n // nodeId to create unique key\n public addNodeShapetoSVG(\n name: string,\n subname: string,\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 // 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 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() {\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: 70, height: 90 and add node separation\n const treemap = tree()\n .nodeSize([75, 50])\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 450\n nodes.forEach(d => {\n d.y = d.depth === 0 ? 10 : d.depth * 130;\n d.x += 400;\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 rectHeight = 70;\n const rectWidth = 220;\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 = 70;\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 | undefined;\n private _height: number | undefined;\n private _composition: number | undefined;\n private _classNames: IProcessedStyleSet<ITreeStyles>;\n private _rootElem: HTMLElement | null;\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 || 1200;\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 || 1000,\n _height: this._height || 700,\n };\n }\n\n public componentDidMount() {\n const { theme, className, styles } = this.props;\n // Get classNames to create component styling\n this._classNames = getClassNames(styles!, {\n theme: theme!,\n className,\n });\n // Call createTreeChart function in componentDidMount\n this.createTreeChart();\n const reducedHeight = this._rootElem && this._rootElem.offsetHeight / 5;\n this.setState({\n _width: (this._rootElem && this._rootElem!.offsetWidth)!,\n _height: (this._rootElem && this._rootElem!.offsetHeight - reducedHeight!)!,\n });\n }\n\n public createTreeChart() {\n const svg = select('.svgTree');\n\n // Set SVG width and height\n svg\n .attr('width', this.state._width - this._margin.left - this._margin.right)\n .attr('height', this.state._height - this._margin.top - this._margin.bottom);\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\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 this._nodeElements,\n this._linkElements,\n this._treeTraversal,\n );\n treeObject.createTree();\n }\n\n public render(): JSX.Element {\n return (\n <FocusZone>\n <div className=\"svgTreeDiv\" ref={(rootElem: HTMLElement | null) => (this._rootElem = rootElem)}>\n <svg className=\"svgTree\">\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"]}
@@ -0,0 +1,3 @@
1
+ import * as React from 'react';
2
+ import { ITreeProps } from './TreeChart.types';
3
+ export declare const TreeChart: React.FunctionComponent<ITreeProps>;
@@ -0,0 +1,5 @@
1
+ import { styled } from '@fluentui/react/lib/Utilities';
2
+ import { TreeChartBase } from './TreeChart.base';
3
+ import { getStyles } from './TreeChart.styles';
4
+ export var TreeChart = styled(TreeChartBase, getStyles);
5
+ //# sourceMappingURL=TreeChart.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TreeChart.js","sourceRoot":"../src/","sources":["components/TreeChart/TreeChart.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAEvD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,MAAM,CAAC,IAAM,SAAS,GAAwC,MAAM,CAClE,aAAa,EACb,SAAS,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"]}
@@ -0,0 +1,2 @@
1
+ import { ITreeStyleProps, ITreeStyles } from './TreeChart.types';
2
+ export declare const getStyles: (props: ITreeStyleProps) => ITreeStyles;
@@ -0,0 +1,20 @@
1
+ import { __assign } from "tslib";
2
+ export var getStyles = function (props) {
3
+ return {
4
+ link: {
5
+ fill: 'none',
6
+ stroke: '#A1A1A1',
7
+ strokeWidth: '2px',
8
+ },
9
+ rectNode: {
10
+ strokeWidth: '2px',
11
+ fill: 'white',
12
+ padding: '10px',
13
+ rx: '2px',
14
+ },
15
+ rectText: __assign({ fill: 'black' }, props.theme.fonts.large),
16
+ rectSubText: __assign({ fill: '#484644' }, props.theme.fonts.medium),
17
+ rectMetricText: __assign({ fill: '#000000' }, props.theme.fonts.xLarge),
18
+ };
19
+ };
20
+ //# sourceMappingURL=TreeChart.styles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TreeChart.styles.js","sourceRoot":"../src/","sources":["components/TreeChart/TreeChart.styles.ts"],"names":[],"mappings":";AAEA,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,KAAsB;IAC9C,OAAO;QACL,IAAI,EAAE;YACJ,IAAI,EAAE,MAAM;YACZ,MAAM,EAAE,SAAS;YACjB,WAAW,EAAE,KAAK;SACnB;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,KAAK;YAClB,IAAI,EAAE,OAAO;YACb,OAAO,EAAE,MAAM;YACf,EAAE,EAAE,KAAK;SACV;QACD,QAAQ,aACN,IAAI,EAAE,OAAO,IACV,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,KAAK,CAC5B;QACD,WAAW,aACT,IAAI,EAAE,SAAS,IACZ,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,MAAM,CAC7B;QACD,cAAc,aACZ,IAAI,EAAE,SAAS,IACZ,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,MAAM,CAC7B;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { ITreeStyleProps, ITreeStyles } from './TreeChart.types';\n\nexport const getStyles = (props: ITreeStyleProps): ITreeStyles => {\n return {\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"]}
@@ -0,0 +1,88 @@
1
+ import { IStyle, ITheme } from '@fluentui/react/lib/Styling';
2
+ import { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
3
+ export interface ITreeChartDataPoint {
4
+ name: string;
5
+ subname: string;
6
+ metric?: string | undefined;
7
+ fill: string;
8
+ children?: Array<ITreeChartDataPoint>;
9
+ }
10
+ export declare enum NodesComposition {
11
+ long = 1,
12
+ compact = 0
13
+ }
14
+ export declare enum TreeTraverse {
15
+ preOrder = 1,
16
+ levelOrder = 0
17
+ }
18
+ export interface ITreeProps {
19
+ /**
20
+ * An object of chart data points for the Tree chart
21
+ */
22
+ treeData: ITreeChartDataPoint;
23
+ /**
24
+ * compostion for three layer chart, long: composition = 1; compact: composition = 0
25
+ */
26
+ composition?: NodesComposition.long | NodesComposition.compact | undefined;
27
+ /**
28
+ * traversal order for tree chart, preOrder = 1, levelOrder = 0
29
+ */
30
+ treeTraversal?: TreeTraverse.preOrder | TreeTraverse.levelOrder;
31
+ /**
32
+ * Width of SVG tree chart
33
+ * * @default 1200
34
+ */
35
+ width?: number;
36
+ /**
37
+ * Height of SVG tree chart
38
+ * * @default 700
39
+ */
40
+ height?: number;
41
+ /**
42
+ * Margin for the SVG tree chart
43
+ */
44
+ marign?: {
45
+ left: number;
46
+ right: number;
47
+ top: number;
48
+ bottom: number;
49
+ };
50
+ /**
51
+ * Call to provide customized styling that will layer on top of the variant rules.
52
+ */
53
+ styles?: IStyleFunctionOrObject<ITreeStyleProps, ITreeStyles>;
54
+ /**
55
+ * Additional CSS class(es) to apply to the TreeChart.
56
+ */
57
+ className?: string;
58
+ /**
59
+ * Theme (provided through customization.)
60
+ */
61
+ theme?: ITheme;
62
+ }
63
+ export interface ITreeState {
64
+ _width: number;
65
+ _height: number;
66
+ }
67
+ export interface ITreeDataStructure {
68
+ id: number;
69
+ children: unknown;
70
+ dataName: string;
71
+ subName: string;
72
+ metricName?: string | undefined;
73
+ fill: string;
74
+ x: number;
75
+ y: number;
76
+ parentID: number;
77
+ }
78
+ export interface ITreeStyleProps {
79
+ theme: ITheme;
80
+ className?: string;
81
+ }
82
+ export interface ITreeStyles {
83
+ link: IStyle;
84
+ rectNode: IStyle;
85
+ rectText: IStyle;
86
+ rectSubText: IStyle;
87
+ rectMetricText: IStyle;
88
+ }
@@ -0,0 +1,11 @@
1
+ export var NodesComposition;
2
+ (function (NodesComposition) {
3
+ NodesComposition[NodesComposition["long"] = 1] = "long";
4
+ NodesComposition[NodesComposition["compact"] = 0] = "compact";
5
+ })(NodesComposition || (NodesComposition = {}));
6
+ export var TreeTraverse;
7
+ (function (TreeTraverse) {
8
+ TreeTraverse[TreeTraverse["preOrder"] = 1] = "preOrder";
9
+ TreeTraverse[TreeTraverse["levelOrder"] = 0] = "levelOrder";
10
+ })(TreeTraverse || (TreeTraverse = {}));
11
+ //# sourceMappingURL=TreeChart.types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TreeChart.types.js","sourceRoot":"../src/","sources":["components/TreeChart/TreeChart.types.ts"],"names":[],"mappings":"AAWA,MAAM,CAAN,IAAY,gBAGX;AAHD,WAAY,gBAAgB;IAC1B,uDAAQ,CAAA;IACR,6DAAW,CAAA;AACb,CAAC,EAHW,gBAAgB,KAAhB,gBAAgB,QAG3B;AAED,MAAM,CAAN,IAAY,YAGX;AAHD,WAAY,YAAY;IACtB,uDAAY,CAAA;IACZ,2DAAc,CAAA;AAChB,CAAC,EAHW,YAAY,KAAZ,YAAY,QAGvB","sourcesContent":["import { IStyle, ITheme } from '@fluentui/react/lib/Styling';\nimport { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\n\nexport interface ITreeChartDataPoint {\n name: string;\n subname: string;\n metric?: string | undefined;\n fill: string;\n children?: Array<ITreeChartDataPoint>;\n}\n\nexport enum NodesComposition {\n long = 1,\n compact = 0,\n}\n\nexport enum TreeTraverse {\n preOrder = 1,\n levelOrder = 0,\n}\n\nexport interface ITreeProps {\n /**\n * An object of chart data points for the Tree chart\n */\n treeData: ITreeChartDataPoint;\n /**\n * compostion for three layer chart, long: composition = 1; compact: composition = 0\n */\n composition?: NodesComposition.long | NodesComposition.compact | undefined;\n /**\n * traversal order for tree chart, preOrder = 1, levelOrder = 0\n */\n treeTraversal?: TreeTraverse.preOrder | TreeTraverse.levelOrder;\n /**\n * Width of SVG tree chart\n * * @default 1200\n */\n width?: number;\n /**\n * Height of SVG tree chart\n * * @default 700\n */\n height?: number;\n /**\n * Margin for the SVG tree chart\n */\n marign?: { left: number; right: number; top: number; bottom: number };\n /**\n * Call to provide customized styling that will layer on top of the variant rules.\n */\n styles?: IStyleFunctionOrObject<ITreeStyleProps, ITreeStyles>;\n /**\n * Additional CSS class(es) to apply to the TreeChart.\n */\n className?: string;\n /**\n * Theme (provided through customization.)\n */\n theme?: ITheme;\n}\nexport interface ITreeState {\n _width: number;\n _height: number;\n}\n\nexport interface ITreeDataStructure {\n id: number;\n children: unknown;\n dataName: string;\n subName: string;\n metricName?: string | undefined;\n fill: string;\n x: number;\n y: number;\n parentID: number;\n}\n\nexport interface ITreeStyleProps {\n theme: ITheme;\n className?: string;\n}\nexport interface ITreeStyles {\n link: IStyle;\n rectNode: IStyle;\n rectText: IStyle;\n rectSubText: IStyle;\n rectMetricText: IStyle;\n}\n"]}
@@ -0,0 +1,2 @@
1
+ export * from './TreeChart';
2
+ export * from './TreeChart.types';
@@ -0,0 +1,3 @@
1
+ export * from './TreeChart';
2
+ export * from './TreeChart.types';
3
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/TreeChart/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC","sourcesContent":["export * from './TreeChart';\nexport * from './TreeChart.types';\n"]}
package/lib/index.d.ts CHANGED
@@ -13,5 +13,6 @@ export * from './types/index';
13
13
  export * from './utilities/ChartHoverCard/index';
14
14
  export * from './HeatMapChart';
15
15
  export * from './SankeyChart';
16
+ export * from './TreeChart';
16
17
  export * from './Sparkline';
17
18
  import './version';
package/lib/index.js CHANGED
@@ -13,6 +13,7 @@ export * from './types/index';
13
13
  export * from './utilities/ChartHoverCard/index';
14
14
  export * from './HeatMapChart';
15
15
  export * from './SankeyChart';
16
+ export * from './TreeChart';
16
17
  export * from './Sparkline';
17
18
  import './version';
18
19
  //# sourceMappingURL=index.js.map
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,kCAAkC,CAAC;AACjD,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAE5B,OAAO,WAAW,CAAC","sourcesContent":["export * from './HorizontalBarChart';\nexport * from './DonutChart';\nexport * from './Legends';\nexport * from './LineChart';\nexport * from './AreaChart';\nexport * from './PieChart';\nexport * from './StackedBarChart';\nexport * from './VerticalBarChart';\nexport * from './VerticalStackedBarChart';\nexport * from './GroupedVerticalBarChart';\nexport * from './CartesianChart';\nexport * from './types/index';\nexport * from './utilities/ChartHoverCard/index';\nexport * from './HeatMapChart';\nexport * from './SankeyChart';\nexport * from './Sparkline';\n\nimport './version';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,kCAAkC,CAAC;AACjD,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAE5B,OAAO,WAAW,CAAC","sourcesContent":["export * from './HorizontalBarChart';\nexport * from './DonutChart';\nexport * from './Legends';\nexport * from './LineChart';\nexport * from './AreaChart';\nexport * from './PieChart';\nexport * from './StackedBarChart';\nexport * from './VerticalBarChart';\nexport * from './VerticalStackedBarChart';\nexport * from './GroupedVerticalBarChart';\nexport * from './CartesianChart';\nexport * from './types/index';\nexport * from './utilities/ChartHoverCard/index';\nexport * from './HeatMapChart';\nexport * from './SankeyChart';\nexport * from './TreeChart';\nexport * from './Sparkline';\n\nimport './version';\n"]}
package/lib/version.js CHANGED
@@ -1,5 +1,5 @@
1
1
  // Do not modify this file; it is generated as part of publish.
2
2
  // The checked in version is a placeholder only and will not be updated.
3
3
  import { setVersion } from '@fluentui/set-version';
4
- setVersion('@fluentui/react-charting', '5.11.0');
4
+ setVersion('@fluentui/react-charting', '5.12.0');
5
5
  //# sourceMappingURL=version.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"version.js","sourceRoot":"../src/","sources":["version.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,wEAAwE;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,UAAU,CAAC,0BAA0B,EAAE,QAAQ,CAAC,CAAC","sourcesContent":["// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nimport { setVersion } from '@fluentui/set-version';\nsetVersion('@fluentui/react-charting', '5.11.0');"]}
1
+ {"version":3,"file":"version.js","sourceRoot":"../src/","sources":["version.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,wEAAwE;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,UAAU,CAAC,0BAA0B,EAAE,QAAQ,CAAC,CAAC","sourcesContent":["// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nimport { setVersion } from '@fluentui/set-version';\nsetVersion('@fluentui/react-charting', '5.12.0');"]}