How to use the office-ui-fabric-react/lib/Utilities.classNamesFunction function in office-ui-fabric-react

import * as React from 'react';
import { max as d3Max, min as d3Min } from 'd3-array';
import { axisLeft as d3AxisLeft, axisBottom as d3AxisBottom } from 'd3-axis';
import { scaleLinear as d3ScaleLinear, scaleTime as d3ScaleTime } from 'd3-scale';
import { select as d3Select } from 'd3-selection';
import * as d3TimeFormat from 'd3-time-format';
import { ILegend, Legends } from '../Legends/index';
import { classNamesFunction } from 'office-ui-fabric-react/lib/Utilities';
import { IProcessedStyleSet } from 'office-ui-fabric-react/lib/Styling';
import { ILineChartProps, ILineChartStyleProps, ILineChartStyles, ILineChartDataPoint, ILineChartPoints } from './LineChart.types';
import { Callout, DirectionalHint } from 'office-ui-fabric-react/lib/Callout';

const getClassNames = classNamesFunction();

export class LineChartBase extends React.Component<
  ILineChartProps,
  {
    _width: number;
    _height: number;
    containerWidth: number;
    containerHeight: number;
    isCalloutVisible: boolean;
    hoverYValue: string | number | null;
    hoverXValue: string | number | null;
    activeLegend: string;
    lineColor: string;
    // tslint:disable-next-line:no-any
    refSelected: any;
    hoveredLineColor: string;

export interface IPageHeaderStyles {
  root: IStyle;
}

/**
 * The component props.
 */
export interface IPageHeaderProps extends IBaseProps {
  theme?: ITheme;
  as?: string;
  children?: JSX.Element | string;
  styles?: IStyleFunctionOrObject;
  // getStyles?: IGetStylesFunction;
}

const getClassNames = classNamesFunction();

/** @deprecated Use `MarkdownHeader` */
@customizable('PageHeader', ['theme', 'styles'])
export class PageHeaderBase extends BaseComponent {
  public render(): JSX.Element {
    const { as: RootType = 'h1', theme, children, styles } = this.props;

    const classNames = getClassNames(styles, { theme: theme!, as: RootType });

    return {children};
  }
}

/**
 * A variant of PageHeaderBase with styling.
 */

export const StackedBarChartVisualization: React.FunctionComponent = (
  props: IStackedBarChartVisualizationProps
) => {
  const chartColors = ['#662D91', '#E6E6E6'];
  const { visualizationDatapoints } = props;
  const getClassNames = classNamesFunction<{}, IStackedBarChartVisualizationStyles>();
  const classNames = getClassNames(getStackedBarChartVisualizationStyles);
  const chartData: IChartProps[] = [];

  if (visualizationDatapoints) {
    visualizationDatapoints.forEach((data: IRecommendationBannerChartData) => {
      const maxIndex = Math.min(data.chartData.length, 2);
      const chartDataPoints: IChartDataPoint[] = [];
      for (let i = 0; i < maxIndex; i++) {
        chartDataPoints.push({
          legend: data.chartData[i].datapointText,
          data: data.chartData[i].datapointValue,
          color: chartColors[i]
        });
      }

      const chartProp: IChartProps = {

export const MultiStackedBarChartVisualization: React.FunctionComponent = (
  props: IStackedBarChartVisualizationProps
) => {
  const { visualizationDatapoints } = props;
  const getClassNames = classNamesFunction<{}, IStackedBarChartVisualizationStyles>();
  const classNames = getClassNames(getStackedBarChartVisualizationStyles);

  const legendColors = ['#0078D4', '#0B6A0B', '#662D91', '#038387', '#00AE56'];
  const legendColorLength = legendColors.length;
  let counter = 0;
  const chartData: IChartProps[] = [];
  const hideRatio: boolean[] = [];

  if (visualizationDatapoints) {
    visualizationDatapoints.forEach((data: IRecommendationBannerChartData) => {
      const chartDataPoints: IChartDataPoint[] = data.chartData.map((dataPoint: IRecommendationBannerChartDataPoint) => {
        return {
          legend: dataPoint.datapointText,
          data: dataPoint.datapointValue,
          color: legendColors[counter++ % legendColorLength]
        };

public render(): JSX.Element {
    const dataToRender = this._generateData();
    const getClassNames = classNamesFunction();
    const classNames = getClassNames(getStyles!);
    return (
      <div>
        
      </div>
    );
  }

export const ImageVisualization: React.FunctionComponent = (props: IImageVisualizationProps) => {
  const getClassNames = classNamesFunction<{}, IImageVisualizationStyles>();
  const classNames = getClassNames(getImageVisualizationStyles);
  const { imageSrc, imageAlt } = props;

  if (imageSrc) {
    return (
      <div>
        <img aria-hidden="{true}" alt="{imageAlt}" src="{imageSrc}">
      </div>
    );
  }

  return null;
};

}

export type IMarkdownCodeStyleProps = {};

const getStyles: IStyleFunction = () => {
  return {
    root: {
      ...baseCodeStyle,
      padding: '0 4px',
      border: '1px solid ' + NeutralColors.gray30,
      borderRadius: 3
    }
  };
};

const getClassNames = classNamesFunction();

const MarkdownCodeBase: React.StatelessComponent = props => {
  const { className, styles, ...rest } = props;
  const classNames = getClassNames(styles);

  const language = (className || '').replace('lang-', '');
  if (language || (typeof props.children === 'string' && props.children.indexOf('\n') !== -1)) {
    return ;
  }

  return <code>{props.children}</code>;
};

export const MarkdownCode: React.StatelessComponent = styled&lt;
  IMarkdownCodeProps,
  IMarkdownCodeStyleProps,

public render(): JSX.Element {
    const { color, arc } = this.props;
    const getClassNames = classNamesFunction();
    const classNames = getClassNames(getStyles, { color });
    return

import * as React from 'react';
import { classNamesFunction } from 'office-ui-fabric-react/lib/Utilities';
import { IPieChartProps, IPieChartStyleProps, IPieChartStyles } from './PieChart.types';
import { Pie } from './Pie/Pie';
import { IProcessedStyleSet } from 'office-ui-fabric-react/lib/Styling';
const getClassNames = classNamesFunction();

export class PieChartBase extends React.Component {
  public static defaultProps: Partial = {
    data: [],
    width: 600,
    height: 350
  };
  private _classNames: IProcessedStyleSet;

  public render(): JSX.Element {
    const { data, width, height, colors } = this.props;

    const { theme, className, styles } = this.props;
    this._classNames = getClassNames(styles!, {
      theme: theme!,
      width: width!,

private _onRenderBody = (): JSX.Element => {
    const getClassNames = classNamesFunction<{}, ISetupBannerBasicExampleStyle>();
    const classNames = getClassNames(getStyles!);
    return (
      <div>
        <div>For now, you're using contoso.onmicrosoft.com for your organization.</div>
        <div>
          But you may want to set up a simpler, more professional domain name to use for your organization's website and email address. If
          so, it's best to do that right away. If you wait and set it up later, you'll have to redo a lot of other work.
        </div>
      </div>
    );
  };