@bento-core/widgets

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:

• DonutChart README.md
• SunburstChart README.md

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
/>