bananas-commerce-admin
Version:
What's this, an admin for apes?
49 lines • 2.64 kB
JavaScript
import React, { useCallback, useState } from "react";
import { BarChartRounded, ShowChartRounded, TableRowsRounded } from "@mui/icons-material";
import { ToggleButton, ToggleButtonGroup, Tooltip } from "@mui/material";
import { useDashboardFilter } from "../contexts/DashboardFilterContext";
import { useI18n } from "../contexts/I18nContext";
import BarChart from "./charts/BarChart";
import LineChart from "./charts/LineChart";
import AreaChartIcon from "./Icons/AreaChartIcon";
import StatsDataTable from "./StatsDataTable";
const chartData = {
line: {
Icon: ShowChartRounded,
name: "Line Chart",
},
area: {
Icon: AreaChartIcon,
name: "Area Chart",
},
bar: {
Icon: BarChartRounded,
name: "Bar Chart",
},
table: {
Icon: TableRowsRounded,
name: "Table",
},
};
export default function Chart({ data, charts, dataTable = true, dataKeyX, dataKeyY, csvFileName, }) {
const { t } = useI18n();
const { filter } = useDashboardFilter();
const [selectedChart, setSelectedChart] = useState(charts[0]);
const chartsWithTable = dataTable ? [...charts, "table"] : charts;
const handleSelectedChartChange = useCallback((_, newChart) => {
if (newChart !== null) {
setSelectedChart(newChart);
}
}, []);
return (React.createElement(React.Fragment, null,
chartsWithTable.length > 1 && (React.createElement(ToggleButtonGroup, { exclusive: true, sx: { position: "absolute", right: 16, top: 16 }, unselectable: "off", value: selectedChart, onChange: handleSelectedChartChange }, chartsWithTable.map((chart) => {
const { Icon, name } = chartData[chart];
return (React.createElement(Tooltip, { key: chart, title: t(name) },
React.createElement(ToggleButton, { size: "small", value: chart },
React.createElement(Icon, { fontSize: "small" }))));
}))),
selectedChart === "bar" && (React.createElement(BarChart, { dataKeyX: dataKeyX, dataKeyY: dataKeyY, dataset: data.map(({ date, ...props }) => ({ ...props, date: new Date(date) })), granularity: filter.granularity })),
(selectedChart === "line" || selectedChart === "area") && (React.createElement(LineChart, { area: selectedChart === "area", dataKeyX: dataKeyX, dataKeyY: dataKeyY, dataset: data.map(({ date, ...props }) => ({ ...props, date: new Date(date) })), granularity: filter.granularity })),
selectedChart === "table" && (React.createElement(StatsDataTable, { csvFileName: csvFileName, data: data, dateKey: dataKeyX }))));
}
//# sourceMappingURL=Chart.js.map