bananas-commerce-admin
Version:
What's this, an admin for apes?
63 lines • 2.19 kB
JavaScript
import React from "react";
import { styled, useTheme } from "@mui/material/styles";
import { BarChart as MuiBarChart } from "@mui/x-charts/BarChart";
import { getDateValueFormatter } from "../../util/timeline";
const StyledBarChart = styled(MuiBarChart, {
name: "BananasChart",
slot: "Chart",
})(({ theme }) => theme.unstable_sx({
".MuiChartsAxis-line, .MuiChartsAxis-tick": {
opacity: 0,
stroke: theme.palette.divider,
},
".MuiBarLabel-root": {
fill: theme.palette.primary.contrastText,
},
}));
export const BarChart = ({ dataset, series, dataKeyX, dataKeyY, height = 300, granularity = "day", yAxisOptions, legendProps, highlightedSerie, }) => {
const theme = useTheme();
return (React.createElement(StyledBarChart
// TODO: Show count on bars when bar is "wide" enough ..
// barLabel="value"
, {
// TODO: Show count on bars when bar is "wide" enough ..
// barLabel="value"
dataset: dataset, grid: { horizontal: true }, height: height, highlightedItem: highlightedSerie
? {
seriesId: highlightedSerie,
}
: null, series: series ?? [
{
dataKey: dataKeyY,
color: theme.palette.graphColorPrimary?.main ?? theme.palette.primary.main,
},
], slotProps: {
legend: {
direction: "row",
position: { vertical: "top", horizontal: "middle" },
padding: 0,
itemMarkWidth: 10,
itemMarkHeight: 10,
itemGap: 15,
labelStyle: {
fontSize: "0.8rem",
},
...legendProps,
},
}, xAxis: [
{
dataKey: dataKeyX,
scaleType: "band",
valueFormatter: getDateValueFormatter(granularity),
},
], yAxis: [
{
min: 0,
tickNumber: 4,
tickMinStep: 1,
...yAxisOptions,
},
] }));
};
export default BarChart;
//# sourceMappingURL=BarChart.js.map