101 lines
2.1 KiB
JavaScript
101 lines
2.1 KiB
JavaScript
import React, { useEffect, useRef, useState } from 'react';
|
|
|
|
export const am5ClassName = 'armu_ai_chatbot-am5';
|
|
|
|
export function useAm5() {
|
|
const [am5, setAm5] = useState(null);
|
|
|
|
useEffect(() => {
|
|
function check() {
|
|
if (window.am5) {
|
|
window.am5.ready(() => setAm5(window.am5));
|
|
} else setTimeout(check, 100);
|
|
}
|
|
check();
|
|
}, []);
|
|
|
|
return am5;
|
|
}
|
|
|
|
let am5Colors = null;
|
|
export function useAm5Colors() {
|
|
const am5 = useAm5();
|
|
|
|
if (!am5Colors && am5) {
|
|
am5Colors = colors.map((color) => am5.color(color));
|
|
}
|
|
|
|
return am5Colors;
|
|
}
|
|
|
|
const roots = {};
|
|
export function getRoot(id) {
|
|
let root = roots[id];
|
|
if (root) root.dispose();
|
|
|
|
root = am5.Root.new(id);
|
|
roots[id] = root;
|
|
|
|
root.setThemes([
|
|
am5themes_Animated.new(root)
|
|
]);
|
|
|
|
root.locale = am5locales_it_IT;
|
|
root.numberFormatter.set("numberFormat", "#,###.00");
|
|
|
|
return root;
|
|
}
|
|
|
|
export const colors = [
|
|
'#4CC9C3',
|
|
'#3D9AA0',
|
|
'#1B3353',
|
|
'#637081',
|
|
'#A790A5',
|
|
'#EBE1E2',
|
|
'#EEE8DC',
|
|
'#D4B483'
|
|
];
|
|
|
|
export function ChartContainer(props) {
|
|
const { id, className } = props;
|
|
|
|
const chartRef = useRef();
|
|
const [style, setStyle] = useState(null);
|
|
useEffect(() => {
|
|
if (chartRef.current) {
|
|
setStyle({
|
|
backgroundColor: findFirstBackgroundColor(chartRef.current),
|
|
...props.style
|
|
});
|
|
}
|
|
}, [chartRef, props.style]);
|
|
|
|
return (
|
|
<div id={id} style={style} className={`${am5ClassName} ${className}`.trimEnd()} ref={chartRef} />
|
|
)
|
|
}
|
|
|
|
ChartContainer.defaultProps = {
|
|
id: '',
|
|
className: '',
|
|
style: {}
|
|
}
|
|
|
|
function findFirstBackgroundColor(element) {
|
|
if (element) {
|
|
const backgroundColor = getComputedStyle(element)?.backgroundColor;
|
|
|
|
if (backgroundColor !== "rgba(0, 0, 0, 0)") {
|
|
return backgroundColor;
|
|
}
|
|
|
|
if (element.parentElement) {
|
|
return findFirstBackgroundColor(element.parentElement);
|
|
}
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|