import * as React from 'react' ; import { IAccessibleChartTableState , IAccessibleChartTableProps } from './AccessibleChartTable.types' ; import styles from './ChartControl.module.scss' ; import { ChartDataSets } from 'chart.js' ; import { Guid } from '@microsoft/sp-core-library' ; import { css } from 'office-ui-fabric-react/lib/Utilities' ; import { escape } from '@microsoft/sp-lodash-subset' ; export class AccessibleChartTable extends React . Component < IAccessibleChartTableProps , IAccessibleChartTableState > { public render ( ) { const { onRenderTable , data } = this . props ; if ( data === undefined || data . datasets === undefined || data . datasets . length < 1 ) { return null ; } if ( onRenderTable !== undefined ) { return ( < div className = { styles . accessibleTable } > { onRenderTable ( ) } < /div>); } const tableBody = this . _renderTableBody ( ) ; return ( < div className = { css ( styles . accessibleTable , this . props . className ) } > { tableBody && tableBody . length > 0 ? < table > { this . _renderCaption ( ) } < thead > { this . _renderTableHeader ( ) } < /thead> < tbody > { tableBody } < /tbody> < /table> : undefined } < /div>); } private _renderCaption ( ) { const { summary } = this . props ; const title = this . _getAccessibleTitle ( ) ; const summaryElement = summary && < span > { escape ( summary ) } < /span>; return title || summary ? < caption > { escape ( title ) } { title && summaryElement && < br />} { summaryElement } < /caption> : undefined; } private _renderTableHeader ( ) { const { chartOptions , data } = this . props ; const { datasets } = data ; let hasLabels = true ; datasets . forEach ( ( dataSet ) => { if ( dataSet . label === undefined ) { hasLabels = false ; } } ) ; if ( ! hasLabels ) { return undefined ; } const yAxisLabel = chartOptions && chartOptions . scales && chartOptions . scales . yAxes && chartOptions . scales . yAxes [ 0 ] . scaleLabel && chartOptions . scales . yAxes [ 0 ] . scaleLabel . labelString ; const yHeaderRow = yAxisLabel && < tr key = { `yHeader-${ Guid . newGuid ( ) . toString ( ) }` } > < th > < /th> < th colSpan = { datasets . length } > { escape ( yAxisLabel ) } < /th> < /tr>; const xAxisLabel = chartOptions && chartOptions . scales && chartOptions . scales . xAxes && chartOptions . scales . xAxes [ 0 ] . scaleLabel && chartOptions . scales . xAxes [ 0 ] . scaleLabel . labelString ; const xHeaderCells = datasets . map ( ( dataSet ) => { return < th scope = 'col' key = { `colHeading-${ Guid . newGuid ( ) . toString ( ) }` } > { escape ( dataSet . label ) } < /th>; } ) ; const xHeaderRow = < tr key = { `xHeader-${ Guid . newGuid ( ) . toString ( ) }` } > < th > { escape ( xAxisLabel ) } < /th> { xHeaderCells } < /tr>; return [ yHeaderRow , xHeaderRow ] ; } private _renderTableBody ( ) { const { data } = this . props ; return data . labels && data . labels . map ( ( labelValue , rowIndex ) => { const cells = data . datasets . map ( ( dataSet , dsIndex ) => { return < td key = { `dataCell-${ Guid . newGuid ( ) . toString ( ) }` } > { dataSet . data [ rowIndex ] } < /td>; } ) ; return < tr key = { `dataRow-${ Guid . newGuid ( ) . toString ( ) }` } > < th key = { `dataCellHEader-${ Guid . newGuid ( ) . toString ( ) }` } > { escape ( labelValue ) } < /th> { cells } < /tr>; } ) ; } private _getAccessibleTitle ( ) { const { chartOptions , caption } = this . props ; if ( caption !== undefined ) { return caption ; } if ( chartOptions && chartOptions . title && chartOptions . title . text ) { if ( chartOptions . title . text instanceof Array ) { return chartOptions . title . text . join ( ' ' ) ; } else { return chartOptions . title . text ; } } return undefined ; } }