Fixing review comment

microsoft · Oct 17, 2023 · 4585516 · 4585516
1 parent 3b103af
commit 4585516
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 8 deletions.
diff --git a/packages/react-charting/etc/react-charting.api.md b/packages/react-charting/etc/react-charting.api.md
@@ -207,9 +207,7 @@ export interface IBasestate {
 
 // @public (undocumented)
 export interface ICartesianChartProps {
-    calloutProps?: Partial<ICalloutProps> & {
-        descriptionMessage?: string;
-    };
+    calloutProps?: Partial<ICalloutProps>;
     // @deprecated
     chartLabel?: string;
     className?: string;

diff --git a/packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts b/packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts
@@ -373,9 +373,7 @@ export interface ICartesianChartProps {
   /**
    * Callout customization props
    */
-  calloutProps?: Partial<ICalloutProps> & {
-    descriptionMessage?: string;
-  };
+  calloutProps?: Partial<ICalloutProps>;
 
   /**
    * props for the svg; use this to include aria-* or other attributes on the tag

diff --git a/packages/react-examples/src/react-charting/AreaChart/AreaChart.DataChange.Example.tsx b/packages/react-examples/src/react-charting/AreaChart/AreaChart.DataChange.Example.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AreaChart, IChartProps } from '@fluentui/react-charting';
+import { AreaChart, IChartProps, ICustomizedCalloutData } from '@fluentui/react-charting';
 import * as d3 from 'd3-format';
 import { ILineChartProps } from '@fluentui/react-charting';
 import { DefaultButton } from '@fluentui/react/lib/Button';
@@ -98,7 +98,47 @@ export class AreaChartDataChangeExample extends React.Component<{}, IAreaChartBa
               allowFocusOnLegends: true,
             }}
             enableReflow={true}
-            calloutProps={{ descriptionMessage: 'Shown Y values are cumulative' }}
+            {...{
+              onRenderCalloutPerStack: (props: ICustomizedCalloutData) => {
+                if (!props) {
+                  return null;
+                }
+                const listOfElements: JSX.Element[] = [];
+                props.values.forEach(value => {
+                  const element: JSX.Element = (
+                    <>
+                      <div role="text" data-is-focusable="false">
+                        <div>
+                          <div
+                            style={{ borderLeft: `4px solid ${value.color}`, paddingLeft: '8px', marginTop: '13px' }}
+                          >
+                            <div>
+                              <div>{value.legend}</div>
+                              <div>{value.y}</div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </>
+                  );
+                  listOfElements.push(element);
+                });
+
+                return (
+                  <div style={{ outline: 'none', maxHeight: '100%', padding: '11px 16px 10px 16px' }}>
+                    <div>
+                      <div>
+                        <div role="text" data-is-focusable="false">
+                          {props.x}
+                        </div>
+                      </div>
+                      <div>{listOfElements}</div>
+                      <div style={{ paddingTop: '10px' }}>Shown Y values are cumulative</div>
+                    </div>
+                  </div>
+                );
+              },
+            }}
           />
           <DefaultButton text="Change Ydata" onClick={this._changeData} />
           <DefaultButton text="Change Xdata" onClick={this._changeXData} />