Chart component

docs/data/toolpad/reference/components/chart.md

@@ -0,0 +1,13 @@
+<!-- This file has been auto-generated using `yarn docs:build:api`. -->
+
+# Chart
+
+<p class="description">API docs for the Toolpad Chart component.</p>
+
+## Properties
+
+| Name | Type | Default | Description |
+| :------------------------------------ | :------------------------------------ | :------------------------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <span class="prop-name">data</span> | <span class="prop-type">array</span> | | The data to be displayed. |
+| <span class="prop-name">height</span> | <span class="prop-type">number</span> | <span class="prop-default">400</span> | |
+| <span class="prop-name">sx</span> | <span class="prop-type">object</span> | | The [`sx` prop](https://mui.com/system/getting-started/the-sx-prop/) is used for defining custom styles that have access to the theme. All MUI System properties are available via the `sx` prop. In addition, the `sx` prop allows you to specify any other CSS rules you may need. |

docs/data/toolpad/reference/components/index.md

@@ -6,6 +6,7 @@
 
 - [Autocomplete](/toolpad/reference/components/autocomplete/)
 - [Button](/toolpad/reference/components/button/)
+- [Chart](/toolpad/reference/components/chart/)
 - [Container](/toolpad/reference/components/container/)
 - [DataGrid](/toolpad/reference/components/data-grid/)
 - [DatePicker](/toolpad/reference/components/date-picker/)

docs/data/toolpad/reference/components/manifest.json

@@ -17,6 +17,10 @@
  "title": "Button",
  "pathname": "/toolpad/reference/components/button"
  },
+ {
+ "title": "Chart",
+ "pathname": "/toolpad/reference/components/chart"
+ },
  {
  "title": "Container",
  "pathname": "/toolpad/reference/components/container"

docs/pages/toolpad/reference/components/chart.js

@@ -0,0 +1,9 @@
+/* This file has been auto-generated using `yarn docs:build:api`. */
+
+import * as React from 'react';
+import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs';
+import * as pageProps from '../../../../data/toolpad/reference/components/chart.md?@mui/markdown';
+
+export default function Page() {
+ return <MarkdownDocs {...pageProps} />;
+}

packages/toolpad-app/package.json

@@ -114,6 +114,7 @@
  "react-is": "18.2.0",
  "react-router-dom": "6.3.0",
  "react-split-pane": "0.1.92",
+ "recharts": "2.7.2",
  "semver": "7.5.4",
  "serialize-javascript": "6.0.1",
  "ses": "0.18.4",

packages/toolpad-app/src/constants.ts

@@ -17,6 +17,4 @@ export const SCHEDULE_DEMO_URL = 'https://calendly.com/prakhar-mui/toolpad';
 
 export const TOOLPAD_BRIDGE_GLOBAL = '__TOOLPAD_BRIDGE__';
 
-export const NON_BINDABLE_CONTROL_TYPES = ['GridColumns'];
-
 export const VERSION_CHECK_INTERVAL = 1000 * 60 * 10;

packages/toolpad-app/src/runtime/ToolpadApp.tsx

@@ -77,7 +77,7 @@ import evalJsBindings, {
  EvaluatedBinding,
  ParsedBinding,
 } from './evalJsBindings';
-import { HTML_ID_EDITOR_OVERLAY, NON_BINDABLE_CONTROL_TYPES } from './constants';
+import { HTML_ID_EDITOR_OVERLAY } from './constants';
 import { layoutBoxArgTypes } from './toolpadComponents/layoutBox';
 import { execDataSourceQuery, useDataQuery, UseFetch } from './useDataQuery';
 import { NavigateToPage } from './CanvasHooksContext';
@@ -470,7 +470,7 @@ function parseBindings(
  if (
  componentId !== PAGE_ROW_COMPONENT_ID &&
  !isResizableHeightProp &&
- !NON_BINDABLE_CONTROL_TYPES.includes(argType?.control?.type as string)
+ argType?.control?.bindable !== false
  ) {
  scopePath = `${elm.name}.${propName}`;
  }

packages/toolpad-app/src/runtime/constants.ts

@@ -1,3 +1 @@
 export const HTML_ID_EDITOR_OVERLAY = 'editor-overlay';
-
-export const NON_BINDABLE_CONTROL_TYPES = ['GridColumns'];

packages/toolpad-app/src/runtime/evalJsBindings.ts

@@ -249,12 +249,13 @@ export default function evalJsBindings(
  Array.isArray(value) ? `[${nestedPropName}]` : `.${nestedPropName}`
  }`;
 
- const nestedBindingResultValue = results[nestedBindingId]?.value;
- if (nestedBindingResultValue) {
+ const nestedBindingResult = results[nestedBindingId];
+
+ if (nestedBindingResult) {
  bindingResult = updatePath(
  bindingResult,
  `value.${nestedBindingId.replace(bindingId, '')}`,
- nestedBindingResultValue,
+ nestedBindingResult.value,
  );
  } else {
  mergeNestedBindings(

packages/toolpad-app/src/runtime/toolpadComponents/index.tsx

@@ -39,6 +39,7 @@ export const INTERNAL_COMPONENTS = new Map<string, ToolpadComponentDefinition>([
  ],
  ['Image', { displayName: 'Image', builtIn: 'Image' }],
  ['DataGrid', { displayName: 'Data Grid', builtIn: 'DataGrid' }],
+ ['Chart', { displayName: 'Chart', builtIn: 'Chart' }],
  ['TextField', { displayName: 'Text Field', builtIn: 'TextField' }],
  ['DatePicker', { displayName: 'Date Picker', builtIn: 'DatePicker' }],
  ['FilePicker', { displayName: 'File Picker', builtIn: 'FilePicker' }],

packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx

@@ -52,9 +52,10 @@ import TabPanel from '../../components/TabPanel';
 
 import { useDom } from '../AppState';
 import * as appDom from '../../appDom';
+import { getBindingType, getBindingValue } from '../../bindings';
+
 // eslint-disable-next-line import/no-cycle
 import BindableEditor from './PageEditor/BindableEditor';
-import { getBindingType, getBindingValue } from '../../bindings';
 
 interface BindingEditorContext {
  label: string;

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/BindableEditor.tsx

@@ -9,15 +9,11 @@ import {
  EnvAttrValue,
 } from '@mui/toolpad-core';
 import { WithControlledProp } from '../../../utils/types';
-import { getDefaultControl } from '../../propertyControls';
-// eslint-disable-next-line import/no-cycle
-import { BindingEditor } from '../BindingEditor';
 import { getBindingType } from '../../../bindings';
+import { getDefaultControl, usePropControlsContext } from '../../propertyControls';
 
-function renderDefaultControl(params: RenderControlParams<any>) {
- const Control = getDefaultControl(params.propType);
- return Control ? <Control {...params} /> : null;
-}
+// eslint-disable-next-line import/no-cycle
+import { BindingEditor } from '../BindingEditor';
 
 export interface RenderControlParams<V> extends WithControlledProp<V> {
  label: string;
@@ -44,7 +40,7 @@ export default function BindableEditor<V>({
  bindable = true,
  disabled,
  propType,
- renderControl = renderDefaultControl,
+ renderControl: renderControlProp,
  value,
  jsRuntime,
  onChange,
@@ -54,6 +50,18 @@ export default function BindableEditor<V>({
  envVarNames,
  sx,
 }: BindableEditorProps<V>) {
+ const propTypeControls = usePropControlsContext();
+
+ const renderDefaultControl = React.useCallback(
+ (params: RenderControlParams<any>) => {
+ const Control = getDefaultControl(propTypeControls, params.propType);
+ return Control ? <Control {...params} /> : null;
+ },
+ [propTypeControls],
+ );
+
+ const renderControl = renderControlProp || renderDefaultControl;
+
  const handlePropConstChange = React.useCallback((newValue: V) => onChange(newValue), [onChange]);
 
  const valueBindingType = value && getBindingType(value);

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentEditor.tsx

@@ -28,6 +28,41 @@ import {
 import ElementContext from '../ElementContext';
 import MarkdownTooltip from '../../../components/MarkdownTooltip';
 
+import { PropControlsContextProvider, PropTypeControls } from '../../propertyControls';
+import string from '../../propertyControls/string';
+import boolean from '../../propertyControls/boolean';
+import number from '../../propertyControls/number';
+import select from '../../propertyControls/select';
+import json from '../../propertyControls/json';
+import markdown from '../../propertyControls/Markdown';
+import event from '../../propertyControls/event';
+import GridColumns from '../../propertyControls/GridColumns';
+import SelectOptions from '../../propertyControls/SelectOptions';
+import ChartData from '../../propertyControls/ChartData';
+import RowIdFieldSelect from '../../propertyControls/RowIdFieldSelect';
+import HorizontalAlign from '../../propertyControls/HorizontalAlign';
+import VerticalAlign from '../../propertyControls/VerticalAlign';
+import NumberFormat from '../../propertyControls/NumberFormat';
+import ColorScale from '../../propertyControls/ColorScale';
+
+const propTypeControls: PropTypeControls = {
+ string,
+ boolean,
+ number,
+ select,
+ json,
+ markdown,
+ event,
+ GridColumns,
+ SelectOptions,
+ ChartData,
+ RowIdFieldSelect,
+ HorizontalAlign,
+ VerticalAlign,
+ NumberFormat,
+ ColorScale,
+};
+
 const classes = {
  control: 'Toolpad_Control',
  sectionHeading: 'Toolpad_ControlsSectionHeading',
@@ -197,13 +232,15 @@ export default function ComponentEditor({ className }: ComponentEditorProps) {
  const selectedNode = selectedNodeId ? appDom.getMaybeNode(dom, selectedNodeId) : null;
 
  return (
- <ComponentEditorRoot className={className} data-testid="component-editor">
- {selectedNode && appDom.isElement(selectedNode) ? (
- // Add key to make sure it mounts every time selected node changes
- <SelectedNodeEditor key={selectedNode.id} node={selectedNode} />
- ) : (
- <PageOptionsPanel />
- )}
- </ComponentEditorRoot>
+ <PropControlsContextProvider value={propTypeControls}>
+ <ComponentEditorRoot className={className} data-testid="component-editor">
+ {selectedNode && appDom.isElement(selectedNode) ? (
+ // Add key to make sure it mounts every time selected node changes
+ <SelectedNodeEditor key={selectedNode.id} node={selectedNode} />
+ ) : (
+ <PageOptionsPanel />
+ )}
+ </ComponentEditorRoot>
+ </PropControlsContextProvider>
  );
 }

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/NodeAttributeEditor.tsx

@@ -12,8 +12,7 @@ import * as appDom from '../../../appDom';
 import { useDomApi } from '../../AppState';
 import BindableEditor from './BindableEditor';
 import { usePageEditorState } from './PageEditorProvider';
-import { getDefaultControl } from '../../propertyControls';
-import { NON_BINDABLE_CONTROL_TYPES } from '../../../runtime/constants';
+import { getDefaultControl, usePropControlsContext } from '../../propertyControls';
 
 function buildScopeMeta(vm: ApplicationVm, bindingScope?: RuntimeScope): ScopeMeta {
  if (bindingScope?.parentScope) {
@@ -63,16 +62,14 @@ export default function NodeAttributeEditor<P extends object>({
 
  const scopeMeta = React.useMemo(() => buildScopeMeta(vm, bindingScope), [vm, bindingScope]);
 
- const Control = getDefaultControl(argType, props);
+ const propTypeControls = usePropControlsContext();
+ const Control = getDefaultControl(propTypeControls, argType, props);
 
  // NOTE: Doesn't make much sense to bind controlled props. In the future we might opt
  // to make them bindable to other controlled props only
  const isDisabled = !!argType.onChangeProp;
 
- const isBindable =
- !isDisabled &&
- namespace !== 'layout' &&
- !NON_BINDABLE_CONTROL_TYPES.includes(argType.control?.type as string);
+ const isBindable = !isDisabled && namespace !== 'layout' && argType.control?.bindable !== false;
 
  const jsBrowserRuntime = useBrowserJsRuntime();