Const StatsMainBarChart
StatsMainBarChart: FC<{}> = observer(() => {if (process.env.PLUGIN_CTX === "pro") {/* onlypro:start */const { statsStore } = useStores();const {busyStats,filters: { dates, context },stats: { main }} = statsStore;const ref = useRef<HTMLDivElement>();const [showEmpty, setShowEmpty] = useState(false);useEffect(() => {statsStore.fetchMain();}, [dates, context]);// Render G2 chartuseEffect(() => {if (ref.current) {const chart = new Chart({container: ref.current,autoFit: true,height: 300});const data =main?.map(({ term_name, accepted, count }) => ({// eslint-disable-next-line @typescript-eslint/naming-conventionterm_name,accepted:accepted === "0"? __("Rejected"): accepted === "1"? __("Some services"): __("All services"),count})) || [];chart.animate(false).data(data).scale("count", {alias: "Consents"}).axis("term_name", {tickLine: null}).axis("count", {label: {formatter: (text) => {return text.replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");}},title: {offset: 70,style: {fill: "#aaaaaa"}}}).legend({position: "right"}).tooltip({shared: true,showMarkers: false}).interaction("active-region").interval().adjust("stack").position("term_name*count").color("accepted", (accepted) => {const { colorScheme } = getOtherOptionsFromWindow();switch (accepted) {case __("Rejected"):return "#e2e2e2";case __("Some services"):return colorScheme[3];case __("All services"):return colorScheme[2];default:return "#FFFFFF";}});// Determine visibilityif (data.length > 0) {setShowEmpty(false);chart.show();} else {setShowEmpty(true);chart.hide();}chart.render();return () => {chart.destroy();};}return () => {// Silence is golden.};}, [ref, main]);return (<Spin spinning={busyStats.main}><div ref={ref}></div>{showEmpty && !busyStats.main && <Empty description={__("No data available for this period.")} />}</Spin>);/* onlypro:end */} else {return <div></div>;}})