1. Add a new chart type
Add a new type inmage_ai/data_preparation/models/widget/constants.py
:
mage_ai/frontend/interfaces/ChartBlockType.ts
:
2. Define the configuration options for the chart
In the filemage_ai/frontend/components/ChartBlock/constants.ts
,
add a list of options for the user to configure their chart with:
mage_ai/frontend/interfaces/ChartBlockType.ts
,:
mage_ai/data_preparation/models/widget/constants.py
:
Add default settings to the configuration
When a user selects a chart type, you can set default values for these options. In the filemage_ai/frontend/interfaces/ChartBlockType.ts
, add the following:
Add helpful information about the variable type that the chart expects
Each chart requires 1 or more input values. The chart knows how to access those input values by referencing a variable name that the user inputs into the configuration options. Each variable can be of a certain type; array/list of strings, integers, etc. To help the user know how to set the variables properly, add the following information into the filemage_ai/frontend/components/ChartBlock/constants.ts
:
3. Define post processing logic for chart data
In the filemage_ai/data_preparation/models/widget/__init__.py
,
add additional logic for parsing the input values from the
variables defined in the chart block’s code.
The output of this method is provided to the front-end React components for rendering.
4. Create React component for rendering chart
In the filemage_ai/frontend/components/ChartBlock/ChartController.tsx
,
import your React component for your new chart and render it.
For example: