Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 | 25x 25x 25x | import { IChartProps, IChartDataPoint } from './index';
import { IStyle, ITheme } from '@fluentui/react/lib/Styling';
import { ICalloutProps } from '@fluentui/react/lib/Callout';
import { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
/**
* Horizontal Bar Chart properties
* {@docCategory HorizontalBarChart}
*/
export interface IHorizontalBarChartProps {
/**
* An array of chart data points for the Horizontal bar chart
*/
data?: IChartProps[];
/**
* Width of bar chart
*/
width?: number;
/**
* Height of bar chart
* @default 15
*/
barHeight?: number;
/**
* Additional CSS class(es) to apply to the StackedBarChart.
*/
className?: string;
/**
* Theme (provided through customization.)
*/
theme?: ITheme;
/**
* This property tells whether to show ratio on top of stacked bar chart or not.
*/
hideRatio?: boolean[];
/**
* Do not show tooltips in chart
*
* @default false
*/
hideTooltip?: boolean;
/**
* This property tells how to show data text on top right of bar chart.
* If barChartCustomData props added, then this props will be overrided.
* @default 'default'
*/
chartDataMode?: ChartDataMode;
/**
* Call to provide customized styling that will layer on top of the variant rules.
*/
styles?: IStyleFunctionOrObject<IHorizontalBarChartStyleProps, IHorizontalBarChartStyles>;
/**
* Define a custom callout renderer for a horizontal bar
*/
onRenderCalloutPerHorizontalBar?: IRenderFunction<IChartDataPoint>;
/**
* props for the callout in the chart
*/
calloutProps?: Partial<ICalloutProps>;
/**
* Custom text to the chart (right side of the chart)
* IChartProps will be available as props to the method prop.
* If this method not given, default values (IHorizontalDataPoint \{x,y\})
* will be used to display the data/text based on given chartModeData prop.
*/
barChartCustomData?: IRenderFunction<IChartProps>;
/**
* The prop used to define the culture to localized the numbers
*/
culture?: string;
/**
* Prop to define the variant of HorizontalBarChart to render
* @default HorizontalBarChartVariant.PartToWhole
*/
variant?: HorizontalBarChartVariant;
/**
* Prop to hide the bar labels
* @default false
*/
hideLabels?: boolean;
}
/**
* Horizontal Bar Chart style properties
* {@docCategory HorizontalBarChart}
*/
export interface IHorizontalBarChartStyleProps {
/**
* Theme (provided through customization.)
*/
theme: ITheme;
/**
* Additional CSS class(es) to apply to the StackedBarChart.
*/
className?: string;
/**
* Width of the chart.
*/
width: number | undefined;
/**
* line color for callout
*/
color?: string;
/**
* Height of bar chart
* @default 15
*/
barHeight?: number;
/**
* prop to check if benchmark data is provided
*/
showTriangle?: boolean;
/**
* Prop to define the variant of HorizontalBarChart to render
*/
variant?: HorizontalBarChartVariant;
/**
* Prop to hide the bar labels
*/
hideLabels?: boolean;
}
/**
* Horizontal Bar Chart styles
* {@docCategory HorizontalBarChart}
*/
export interface IHorizontalBarChartStyles {
/**
* Styling for the root container
*/
root: IStyle;
/**
* Styling for each item in the container
*/
items: IStyle;
/**
* Style for the chart.
*/
chart: IStyle;
/**
* Style for the chart Title.
*/
chartTitle: IStyle;
/**
* Style for the bars.
*/
barWrapper: IStyle;
/**
* Style for left side text of the chart title
*/
chartTitleLeft: IStyle;
/**
* Style for right side text of the chart title
*/
chartTitleRight: IStyle;
/**
* Style for the chart data text denominator.
*/
chartDataTextDenominator: IStyle;
/**
* Style for the benchmark container
*/
benchmarkContainer: IStyle;
/**
* Style for the benchmark triangle
*/
triangle: IStyle;
/**
* Style for the bar labels
*/
barLabel: IStyle;
/**
* Style for the div containing the chart
*/
chartWrapper: IStyle;
}
/**
* Chart data mode for chart data text
* default: show the datapoint.x value
* fraction: show the fraction of datapoint.x/datapoint.y
* percentage: show the percentage of (datapoint.x/datapoint.y)%
* {@docCategory HorizontalBarChart}
*/
export type ChartDataMode = 'default' | 'fraction' | 'percentage';
/**
* {@docCategory HorizontalBarChart}
*/
export enum HorizontalBarChartVariant {
PartToWhole = 'part-to-whole',
AbsoluteScale = 'absolute-scale',
}
|