bananas-commerce-admin
Version:
What's this, an admin for apes?
61 lines • 2.15 kB
JavaScript
import React from "react";
import { styled, useTheme } from "@mui/material/styles";
import { LineChart as MuiLineChart } from "@mui/x-charts/LineChart";
import { getDateValueFormatter } from "../../util/timeline";
const StyledLineChart = styled(MuiLineChart, {
name: "BananasChart",
slot: "Chart",
})(({ theme }) => theme.unstable_sx({
".MuiChartsAxis-line, .MuiChartsAxis-tick": {
opacity: 0,
stroke: theme.palette.divider,
},
}));
export const LineChart = ({ dataset, series, dataKeyX, dataKeyY, height = 300, area, granularity = "day", yAxisOptions, legendProps, }) => {
const theme = useTheme();
return (React.createElement(StyledLineChart, { dataset: dataset, grid: { horizontal: true }, height: height, series: series ?? [
{
dataKey: dataKeyY,
showMark: false,
curve: "monotoneX",
color: theme.palette.graphColorPrimary?.main ?? theme.palette.primary.main,
area,
},
], slotProps: {
legend: {
direction: "row",
position: { vertical: "top", horizontal: "middle" },
padding: 0,
itemMarkWidth: 10,
itemMarkHeight: 10,
itemGap: 15,
labelStyle: {
fontSize: "0.8rem",
},
...legendProps,
},
// TODO: Make line dashed between point and "today"-point, i.e. "forcast"
// line: {
// limit: 5,
// sxAfter: {
// strokeDasharray: "10 5",
// },
// } as any,
}, xAxis: [
{
dataKey: dataKeyX,
tickNumber: 1,
scaleType: "point",
valueFormatter: getDateValueFormatter(granularity),
},
], yAxis: [
{
min: 0,
tickNumber: 4,
tickMinStep: 1,
...yAxisOptions,
},
] }));
};
export default LineChart;
//# sourceMappingURL=LineChart.js.map