Add Legends controlled selection example

packages/react-examples/src/react-charting/Legends/Legends.Controlled.Example.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { Legends, ILegend, DataVizPalette, getColorFromToken } from '@fluentui/react-charting';
+import { Button, Stack } from '@fluentui/react';
+
+const legends: ILegend[] = [
+  {
+    title: 'Legend 1',
+    color: getColorFromToken(DataVizPalette.color1),
+  },
+  {
+    title: 'Legend 2',
+    color: getColorFromToken(DataVizPalette.color2),
+  },
+  {
+    title: 'Legend 3',
+    color: getColorFromToken(DataVizPalette.color3),
+    shape: 'diamond',
+  },
+  {
+    title: 'Legend 4',
+    color: getColorFromToken(DataVizPalette.color4),
+    shape: 'triangle',
+  },
+];
+
+export const LegendsControlledExample: React.FunctionComponent = () => {
+  const [selectedLegends, setSelectedLegends] = React.useState<string[]>([]);
+
+  const onChange = (keys: string[]) => {
+    setSelectedLegends(keys);
+  };
+
+  return (
+    <div>
+      <Stack horizontal tokens={{ childrenGap: 10 }}>
+        <Button onClick={() => setSelectedLegends([])}>Select none</Button>
+        <Button onClick={() => setSelectedLegends(legends.map(legend => legend.title))}>Select all</Button>
+      </Stack>
+      <Legends
+        legends={legends}
+        canSelectMultipleLegends
+        selectedLegends={selectedLegends}
+        // eslint-disable-next-line react/jsx-no-bind
+        onChange={onChange}
+      />
+      Selected legends: {selectedLegends.join(', ')}
+    </div>
+  );
+};

packages/react-examples/src/react-charting/Legends/Legends.doc.tsx

@@ -6,6 +6,7 @@ import { LegendOverflowExample } from './Legends.Overflow.Example';
 import { LegendBasicExample } from './Legends.Basic.Example';
 import { LegendWrapLinesExample } from './Legends.WrapLines.Example';
 import { LegendStyledExample } from './Legends.Styled.Example';
+import { LegendsControlledExample } from './Legends.Controlled.Example';
 
 const LegendsOverflowExampleCode =
   require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/Legends/Legends.Overflow.Example.tsx') as string;
@@ -15,6 +16,8 @@ const LegendsBasicExampleCode =
   require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/Legends/Legends.Basic.Example.tsx') as string;
 const LegendsStyledExampleCode =
   require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/Legends/Legends.Styled.Example.tsx') as string;
+const LegendsControlledExampleCode =
+  require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/Legends/Legends.Controlled.Example.tsx') as string;
 
 export const LegendsPageProps: IDocPageProps = {
   title: 'Legends',
@@ -41,6 +44,11 @@ export const LegendsPageProps: IDocPageProps = {
       code: LegendsStyledExampleCode,
       view: <LegendStyledExample />,
     },
+    {
+      title: 'Legend controlled selection',
+      code: LegendsControlledExampleCode,
+      view: <LegendsControlledExample />,
+    },
   ],
   overview: require<string>('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/Legends/docs/LegendsOverview.md'),
   bestPractices: require<string>('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/Legends/docs/LegendsBestPractices.md'),

packages/react-examples/src/react-charting/Legends/LegendsPage.tsx

@@ -13,6 +13,7 @@ import { LegendBasicExample } from './Legends.Basic.Example';
 import { LegendWrapLinesExample } from './Legends.WrapLines.Example';
 import { LegendStyledExample } from './Legends.Styled.Example';
 import { LegendsOnChangeExample } from './Legends.OnChange.Example';
+import { LegendsControlledExample } from './Legends.Controlled.Example';
 
 const LegendsOverflowExampleCode =
   require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/Legends/Legends.Overflow.Example.tsx') as string;
@@ -24,6 +25,8 @@ const LegendsStyledExampleCode =
   require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/Legends/Legends.Styled.Example.tsx') as string;
 const LegendsOnChangeExampleCode =
   require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/Legends/Legends.OnChange.Example.tsx') as string;
+const LegendsControlledExampleCode =
+  require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/Legends/Legends.Controlled.Example.tsx') as string;
 
 export class LegendsPage extends React.Component<IComponentDemoPageProps, {}> {
   public render(): JSX.Element {
@@ -52,6 +55,10 @@ export class LegendsPage extends React.Component<IComponentDemoPageProps, {}> {
             <ExampleCard title="Legends onChange" code={LegendsOnChangeExampleCode}>
               <LegendsOnChangeExample />
             </ExampleCard>
+
+            <ExampleCard title="Legends controlled selection" code={LegendsControlledExampleCode}>
+              <LegendsControlledExample />
+            </ExampleCard>
           </div>
         }
         propertiesTables={

packages/react-examples/src/react-charting/Legends/index.stories.tsx

@@ -5,6 +5,7 @@ import { LegendsOnChangeExample } from './Legends.OnChange.Example';
 import { LegendOverflowExample } from './Legends.Overflow.Example';
 import { LegendStyledExample } from './Legends.Styled.Example';
 import { LegendWrapLinesExample } from './Legends.WrapLines.Example';
+import { LegendsControlledExample } from './Legends.Controlled.Example';
 
 export const Basic = () => <LegendBasicExample />;
 
@@ -16,6 +17,8 @@ export const Styled = () => <LegendStyledExample />;
 
 export const WrapLines = () => <LegendWrapLinesExample />;
 
+export const Controlled = () => <LegendsControlledExample />;
+
 export default {
   title: 'Components/Legends',
 };