Options
All
  • Public
  • Public/Protected
  • All
Menu

Module "wordpress-plugins/real-cookie-banner/src/public/ts/components/config/consent/stats/customBypassPie"

Index

Variables

Const StatsCustomBypassPieChart

StatsCustomBypassPieChart: FC<{}> = observer(() => {if (process.env.PLUGIN_CTX === "pro") {/* onlypro:start */const {statsStore,optionStore: {others: { colorScheme }}} = useStores();const {busyStats,filters: { dates, context },stats: { customBypass }} = statsStore;const ref = useRef<HTMLDivElement>();const [showEmpty, setShowEmpty] = useState(false);useEffect(() => {statsStore.fetchCustomBypass();}, [dates, context]);// Render G2 chartuseEffect(() => {if (ref.current && customBypass) {const total = Object.values(customBypass).reduce((pv, cv) => pv + cv, 0);const data = Object.keys(customBypass).map((customBypassType) => {let item: string;switch (customBypassType) {case "none":item = __("Consent by hand");break;case "dnt":item = __('Consent by "Do Not Track"');break;default:item = __("Bypass by: %s",customBypassType.charAt(0).toUpperCase() + customBypassType.slice(1));break;}const count = customBypass[customBypassType];const percent = total > 0 ? count / total : 0;return { item, count, percent };});const chart = new Chart({container: ref.current,autoFit: true,height: 250});chart.animate(false).data(data).tooltip({showTitle: false,showMarkers: false}).coordinate("theta", {radius: 0.75});chart.interaction("element-active").interval().position("count").color("item", [colorScheme[2],colorScheme[3],`${colorScheme[3]}c7`,`${colorScheme[2]}6e`,`${colorScheme[3]}6e`,`${colorScheme[3]}61`]).label("count", {content: (data) => `${data.item}: ${(data.percent * 100).toFixed(2)}%`}).adjust("stack");// Determine visibilityif (total > 0) {setShowEmpty(false);chart.show();} else {setShowEmpty(true);chart.hide();}chart.render();return () => {chart.destroy();};}return () => {// Silence is golden.};}, [ref, customBypass]);return (<Spin spinning={busyStats.customBypass}><div ref={ref}></div>{showEmpty && !busyStats.customBypass && (<Empty description={__("No data available for this period.")} />)}</Spin>);/* onlypro:end */} else {return <div></div>;}})

Generated using TypeDoc