Overview
This component provides an easy-to-use implementation of the DonutChart and SunburstChart components, and is ideal for implementation within a grid.
If you're here for Donut/Sunburst chart documentation, please see the following READMEs instead:
NOTE: For compatibility, this component also works with non-chart nested children.
Usage
Quick Start
Basic Usage
This example shows how to use the widget with a custom child element.
// Import the component generator
import { WidgetGenerator } from '...'; // Note: Update ... to the component path
// Initialize the component with default options
// Generator will use DEFAULT_CONFIG_WIDGET by default
const { Widget } = WidgetGenerator();
// Use widget
const widget = (
<Widget
title={"Programs and Arms"}
bodyClass={""}
className={""}
upperTitle
bottomDivider
customBackGround
>
<h1>Hello from widget body</h1>
</Widget>
);
// Then you might nest the widget in a grid item
const widgetGrid = (
<Grid key={0} item lg={4} md={6} sm={12} xs={12}>
<widget />
</Grid>
);
Basic Chart-Children Usage
This example shows how to use the widget with a chart as the child element.
// Import the component generator
import { WidgetGenerator } from '...'; // Note: Update ... to the component path
// Initialize the component with default options
// Generator will use DEFAULT_CONFIG_WIDGET by default
const { Widget } = WidgetGenerator();
// Use widget
const widget = (
<Widget
title={"Programs and Arms"}
bodyClass={""}
className={""}
upperTitle
bottomDivider
customBackGround
data={[ /* ... */ ]} // chart dataset
chartType={"donut"}
sliceTitle={"Cases"}
chartTitleLocation="bottom"
chartTitleAlignment="center"
/>
);
// ... do something with the <widget /> component
Generator Configuration
This is the default widget configuration exported from the index file.
const DEFAULT_CONFIG_WIDGET = {
theme: null, // e.g. theme passed by parent props
classes: null, // completely override widget styling, expecting the result of makeStyles() MUI function
SunburstConfig: null, // Define the default SunburstConfig if you're using chart children...see Sunburst README
DonutConfig: null, // Define the default DonutConfig if you're using chart children...see Donut README
};
Exports
The Widget component exports the following components and objects by default. You may use them as necessary.
-
DEFAULT_CONFIG_WIDGET
- A default configuration object used by the component -
WidgetGenerator(uiConfig = DEFAULT_CONFIG_WIDGET)
- The component generator function
Props
This Widget component, which is generated by the provided generator, accepts the following props directly. The default value is specified, along with the possible values.
For chart-related options, see the chart documentation (e.g. data, chartTitle, ...)
<Widget
title={""} // The title for the widget. i.e. Programs and Arms
header={null} // Instead of the title string, use a custom header component
bodyClass={classes.fullHeightBody} // A string with the classname for the widget body
className={classes.card} // A string with the classname for the widget card
bottomDivider // Whether to put a <hr/> after the widget
customBackGround // Custom background classname
data={null} // The dataset to pass to the chart
chartType={null} // The type of chart to use, donut|sunburst
sliceTitle={null} // The chart slice title
chartTitleLocation={null} // Where to place the chart title
chartTitleAlignment={null} // How to align the chart title
/>