using multiple data provider
import { AreaChartOutlined } from "@ant-design/icons";
import { Card } from "antd";
import React, { useMemo } from "react";
import { Text } from "../Props/Text";
import { Area, AreaConfig, Line } from "@ant-design/plots";
import { useList } from "@refinedev/core";
import { DASHBOARD_DEALS_CHART_QUERY } from "@/graphql/queries";
import { mapDealsData } from "@/utils/mapDeals";
import { GetFieldsFromList } from "@refinedev/nestjs-query";
export const DashboardCharts = () => {
const { data } = useList({
resource: "dealStages",
filters: [{ field: "title", operator: "in", value: ["WON", "LOST"] }],
meta: {
gqlQuery: DASHBOARD_DEALS_CHART_QUERY,
},
});
const dealData = useMemo(() => {
return mapDealsData(data?.data);
}, [data?.data]);
const config: AreaConfig = {
data: dealData,
xField: "timeText",
yField: "value",
seriesField: "state",
isStack: false,
startOnZero: false,
animation: true,
smooth: true,
legend: {
offsetY: -6,
},
yAxis: {
tickCount: 4,
label: {
formatter: (y: string) => {
return
},
},
},
tooltip: {
formatter: (data) => {
return {
name: data.state,
value:
};
},
},
};
return (
<Card
style={{ height: "100%" }}
styles={{
header: {
padding: "8px 16px",
},
body: {
padding: "1.5rem 1rem",
},
}}
title={
<div
style={{
display: "flex",
alignItems: "center",
gap: "8px",
}}
>
<AreaChartOutlined />
<Text size="sm" style={{ marginLeft: "0.7rem" }} />
Plods & Leaves
</div>
}
>
<Area {...config} height={300} />
</Card>
);
};
how can i use different data provider in this case ?
import { Card } from "antd";
import React, { useMemo } from "react";
import { Text } from "../Props/Text";
import { Area, AreaConfig, Line } from "@ant-design/plots";
import { useList } from "@refinedev/core";
import { DASHBOARD_DEALS_CHART_QUERY } from "@/graphql/queries";
import { mapDealsData } from "@/utils/mapDeals";
import { GetFieldsFromList } from "@refinedev/nestjs-query";
export const DashboardCharts = () => {
const { data } = useList({
resource: "dealStages",
filters: [{ field: "title", operator: "in", value: ["WON", "LOST"] }],
meta: {
gqlQuery: DASHBOARD_DEALS_CHART_QUERY,
},
});
const dealData = useMemo(() => {
return mapDealsData(data?.data);
}, [data?.data]);
const config: AreaConfig = {
data: dealData,
xField: "timeText",
yField: "value",
seriesField: "state",
isStack: false,
startOnZero: false,
animation: true,
smooth: true,
legend: {
offsetY: -6,
},
yAxis: {
tickCount: 4,
label: {
formatter: (y: string) => {
return
$${Number(y) / 1000}k;},
},
},
tooltip: {
formatter: (data) => {
return {
name: data.state,
value:
$${Number(data.value) / 1000}k,};
},
},
};
return (
<Card
style={{ height: "100%" }}
styles={{
header: {
padding: "8px 16px",
},
body: {
padding: "1.5rem 1rem",
},
}}
title={
<div
style={{
display: "flex",
alignItems: "center",
gap: "8px",
}}
>
<AreaChartOutlined />
<Text size="sm" style={{ marginLeft: "0.7rem" }} />
Plods & Leaves
</div>
}
>
<Area {...config} height={300} />
</Card>
);
};
how can i use different data provider in this case ?
