Fix 660 enable functions in props passed to recharts

[AnnMarieW]

closes #660

Updated chart components to support additional functions as props

Modified AreaChart, BarChart, BubbleChart, CompositeChart, LineChart, and ScatterChart to accept functions for the following props:

• xAxisProps, yAxisProps, gridProps, rightYAxisProps (all charts)
• zAxisProps (BubbleChart only)

Refactor:

• Replaced individual resolveProp() calls with parseFuncProps()
• This makes it easier to add function support to additional props in the future

Note:
parseFuncProps() works only with optional props. Required props (like data and dataKey) must be explicitly destructured and passed to the component to avoid TypeScript build errors.

Example:

// Required props must be explicit when using parseFuncProps
const { data, dataKey, ...others } = props;

<<MantineAreaChart
     {...parseFuncProps('AreaCharts', others)}
    data={data}
    dataKey={dataKey}
   
/>

Sample App

import dash_mantine_components as dmc
from dash import Dash
app=Dash()

data = [
  {"date": "Mar 22", "Apples": 2890, "Oranges": 2338, "Tomatoes": 2452},
  {"date": "Mar 23", "Apples": 2756, "Oranges": 2103, "Tomatoes": 2402},
  {"date": "Mar 24", "Apples": 3322, "Oranges": 986, "Tomatoes": 1821},
  {"date": "Mar 25", "Apples": 3470, "Oranges": 2108, "Tomatoes": 2809},
  {"date": "Mar 26", "Apples": 3129, "Oranges": 1726, "Tomatoes": 2290}
]

component = dmc.AreaChart(
    h=300,
    dataKey="date",
    data=data,
    series = [
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"}
    ],
    curveType="linear",
    tickLine="xy",
    withGradient=False,
    withDots=False,
    xAxisProps={"tickFormatter": {"function": "addYear"}},
    valueFormatter = {"function": "formatNumberIntl"},

)

app.layout = dmc.MantineProvider(
    component
)

if __name__ == "__main__":
    app.run(debug=True)

var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.addYear = function (v) {  
  return v + " 2025"
}


dmcfuncs.formatNumberIntl = (value) => {
  return new Intl.NumberFormat('en-US').format(value);
};

[alexcjohnson]

Why did data and dataKey need to get added explicitly here (and in other components) rather than left in others? Won't they just pass through parseFuncProps unchanged?

[AnnMarieW]

I don't understand why I have to do it this way, but data and dataKey are required props. Maybe it's the order that the type checking is done? Here is the error if I don't add them explicitly:

...is missing the following properties from type 'AreaChartProps': data, dataKey                                                    
ts-loader-default_e3b0c44298fc1c14

The parseFuncProps does spread all props. I verified that data and dataKey are in the others object. I couldn't eliminate the error unless I extracted those props.

Any suggestion on how to fix this?

[alexcjohnson]

Ah ok - I guess TS can't figure out that parseFuncProps contains all the same keys in its output as input, but if you did try to tell it that you'd probably also have to tell it which ones changed type and how... so it'd turn into a mess. This way is easy and clean anyway, even if it's not immediately clear why it's needed, so we can leave it.

[alexcjohnson]

💃 nice addition 😎