Enable export to codepen for charting library

change/@fluentui-react-charting-b2276f17-5bf5-4574-8ed6-a32817b67107.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix shape of triangle and pyramid",
+  "packageName": "@fluentui/react-charting",
+  "email": "atishay.jain@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-docsite-components-7f162818-fcb4-4cbe-8dc1-6d855e04b980.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Enable export to codepen for react charting",
+  "packageName": "@fluentui/react-docsite-components",
+  "email": "atishay.jain@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-monaco-editor-eacbbb2f-ad95-4072-81d7-0d97fa23090f.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add react charting to support export to codepen",
+  "packageName": "@fluentui/react-monaco-editor",
+  "email": "atishay.jain@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-charting/src/components/Legends/shape.tsx

@@ -36,7 +36,7 @@ export const Shape: React.FC<IShapeProps> = ({ svgProps, pathProps, shape, class
       height={14}
       viewBox={'-1 -1 14 14'}
       {...svgProps}
-      transform={`rotate(${shape === Points[Points.diamond] ? 45 : shape === Points[Points.triangle] ? 180 : 0}, 0, 0)`}
+      transform={`rotate(${shape === Points[Points.diamond] ? 45 : shape === Points[Points.pyramid] ? 180 : 0}, 0, 0)`}
     >
       <path d={pointPath[shape]} {...pathProps} />
     </svg>

packages/react-charting/src/components/LineChart/LineChart.base.tsx

@@ -100,7 +100,7 @@ const _getPointPath = (x: number, y: number, w: number, index: number): string =
      L${x + 0.6884 * w} ${y - 0.2633 * w}
      L${x + 0.5001 * w} ${y + 0.6884 * w}
      L${x - 0.5001 * w} ${y + 0.6884 * w}
-     L${x - 0.6884 * w} ${y - 0.2633 * w}
+     L${x - 0.6884 * w} ${y - 0.263 * w}
      Z`,
     //octagon
     `M${x - 0.5001 * w} ${y - 1.207 * w}
@@ -547,6 +547,10 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
             cx={this._xAxisScale(x1)}
             cy={this._yAxisScale(y1)}
             fill={activePoint === circleId ? theme!.palette.white : lineColor}
+            data-is-focusable={true}
+            ref={(e: SVGCircleElement | null) => {
+              this._refCallback(e!, circleId);
+            }}
             onMouseOver={this._handleHover.bind(
               this,
               x1,
@@ -565,6 +569,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
               circleId,
               xAxisCalloutAccessibilityData,
             )}
+            onFocus={() => this._handleFocus(circleId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData)}
             onMouseOut={this._handleMouseOut}
             strokeWidth={activePoint === circleId ? DEFAULT_LINE_STROKE_SIZE : 0}
             stroke={activePoint === circleId ? lineColor : ''}

packages/react-docsite-components/src/components/CodepenComponent/CodepenComponent.tsx

@@ -48,6 +48,10 @@ const CodepenComponentBase: React.FunctionComponent<ICodepenProps> = props => {
       jsContentStr.indexOf('window.FluentUIExampleData') !== -1
         ? script('@fluentui/example-data@8/dist/example-data.js')
         : '',
+      // load charting bundle only if used
+      jsContentStr.indexOf('window.FluentUIReactCharting') !== -1
+        ? script('@fluentui/react-charting@5/dist/react-charting.js')
+        : '',
       `<div id="${CONTENT_ID}"></div>`,
     ]
       .filter(line => !!line)

packages/react-monaco-editor/src/utilities/defaultSupportedPackages.ts

@@ -18,6 +18,11 @@ const exampleDataGroup: IPackageGroup = {
   loadGlobal: cb => require.ensure([], require => cb(require('@fluentui/example-data'))),
   packages: [],
 };
+const chartingGroup: IPackageGroup = {
+  globalName: 'FluentUIReactCharting',
+  loadGlobal: cb => require.ensure([], require => cb(require('@fluentui/react-charting'))),
+  packages: [],
+};
 
 let typesContext: __WebpackModuleApi.RequireContext | undefined;
 try {
@@ -32,6 +37,7 @@ try {
 } catch (ex) {
   // We're probably running in jest, which doesn't have webpack's require.context
 }
+const loadTypes = () => '';
 if (typesContext) {
   typesContext.keys().forEach(dtsPath => {
     // The api-extractor .d.ts rollups use the package's unscoped name (such as "utilities")
@@ -57,7 +63,6 @@ if (typesContext) {
   });
 } else {
   // Use some defaults for jest tests (real types won't be loaded)
-  const loadTypes = () => '';
   fabricGroup.packages.push(
     { packageName: '@fluentui/date-time-utilities', loadTypes },
     { packageName: '@fluentui/dom-utilities', loadTypes },
@@ -74,9 +79,12 @@ if (typesContext) {
   hooksGroup.packages.push({ packageName: '@fluentui/react-hooks', loadTypes });
   exampleDataGroup.packages.push({ packageName: '@fluentui/example-data', loadTypes });
 }
+if (typeof window === 'object' && window.location.href.indexOf('react-charting') !== -1) {
+  chartingGroup.packages.push({ packageName: '@fluentui/react-charting', loadTypes });
+}
 
 /**
  * Default supported packages for imports: `@fluentui/react` and everything it exports,
  * plus `@fluentui/example-data`. (React is implicitly supported.)
  */
-export const SUPPORTED_PACKAGES: IPackageGroup[] = [fabricGroup, hooksGroup, exampleDataGroup];
+export const SUPPORTED_PACKAGES: IPackageGroup[] = [fabricGroup, hooksGroup, exampleDataGroup, chartingGroup];