Código Molde

Antes de qualquer coisa, no terminal rode os códigos npm i sidebargeovista chart.js@3.9.1 react-chartjs-2@4.3.1 e npm i chartjs-plugin-datalabels@2.2.0.
Após isso insira no local de preferência do código estas funções:
``javascript
import { Bar, Doughnut, Pie } from "react-chartjs-2";
import Chart from 'chart.js/auto'
import "chartjs-plugin-datalabels";

function handleHover(evt, item, legend) {
legend.chart.data.datasets[0].backgroundColor.forEach((color, index, colors) => {
colors[index] = index === item.index || color.length === 9 ? color : color + '4D';
});
legend.chart.update();
}

function handleLeave(evt, item, legend) {
legend.chart.data.datasets[0].backgroundColor.forEach((color, index, colors) => {
colors[index] = color.length === 9 ? color.slice(0, -2) : color;
});
legend.chart.update();
}

export function ChartModel(props) {
let html, data, delayed;

var options = {
plugins: {
datalabels: {
formatter: function (value, context) {
return context.chart.data.labels[context.dataIndex];
}
},
legend: {
display: () => {
if (props.mode.toLowerCase() !== "bar") {
return props.legend
} else {
return false
}
},
onHover: handleHover,
onLeave: handleLeave,
labels: {
usePointStyle: true,
},
},
tooltip: {
callbacks: {
label: function (context) {
if (props.counter !== undefined) {
return context.formattedValue + props.counter;
} else {
return context.formattedValue;
}
}
}
},
title: {
display: () => {
if (props.title !== undefined) {
return true
} else {
return false
}
},
text: props.title,
}
},
responsive: () => {
if (props.responsive === true) { return false }
else { return true }
},
maintainAspectRatio: () => {
if (props.responsive === true) { return false }
else { return true }
},
onClick: (e, element) => {
},
animation: {
onComplete: () => {
delayed = true;
},
delay: (context) => {
let delay = 0;
if (context.type === 'data' && context.mode === 'default' && !delayed) {
delay = context.dataIndex 500 + context.datasetIndex 100;
}
return delay;
}
}
};


data = {
labels: props.labels,
datasets: [
{
backgroundColor: props.colors,
borderWidth: 1,
data: props.datas,
}
]
};

if (props.mode.toLowerCase() === "pie") {
html = (
data={data} options={options} height={props.height}
/>
)
} else if (props.mode.toLowerCase() === "bar") {
html = (
data={data} options={options} height={props.height}
/>
)
} else if (props.mode.toLowerCase() === "doughnut") {
html = (
data={data} options={options} height={props.height}
/>
)
}

return (


Com isso pronto agora está tudo certo para começar a usar a biblioteca, insira no return da sua função que irá para o HTML o código abaixo de exemplo e mude conforme a sua necessidade!

`javascript
logoURL="https://dev.drenagem.geovista.com.br/api/static/icones/logo.png"
titlesBackground="#ebebeb"
titlesColor="#000"
titlesSize="20px"
borderRadius="0px"
borderRadiusSub="20px"
titlesBorderColor="#000"
modelHeight="30px"
zIndex={1000}
classesResponsiveResize={['classDescription']}
NavigationMenuIcon={["fas fa-user", "fas fa-search", "fas fa-marker", "fas fa-map"]}
buttons={{
'icons': ['fas fa-exchange', 'fas fa-print'],
'functions': ['toggleSidebar', 'printScreen']
}}
>


logoURL=('Inserir o link da imagem da logo')
titlesBackground=('Inserir em formato hex ou rgba a cor que deseja que preencha os moldes')
titlesColor=('Inserir em formato hex ou rgba a cor que deseja que os textos dos moldes')
titlesSize=('Inserir a quantidade de pixels que deseja que seja a fonte dos textos')
borderRadius=('Inserir a quantidade de pixels para o arredondamento das bordas dos moldes principais')
borderRadiusSub=('Inserir a quantidade de pixels para o arredondamento das bordas dos moldes secundários')
titlesBorderColor=('Inserir em formato hex ou rgba a cor que deseja que preencha a borda dos moldes')
modelHeight=('Inserir a quantidade de pixels que deseja que ocupe a altura dos moldes')
zIndex=('Em formato: {1000}, insira a numeração do zIndex da aba lateral')
classesResponsiveResize=('Insira dentro de um vetor as classes que você deseja que sejam responsivas manualmente ao tamanho da aba lateral')
NavigationMenuIcon=('Insira dentro de um vetor as classes do FontAwesome que representa os ícones que você deseja para a aba de navegação')
buttons=('Leia os próximos passos para seguir um passo a passo do funcionamento dos botões')
`
Caso não queira espaço de logo somente é necessário não colocar o campo logoURL nos Props.

No parâmetro buttons você criará um objeto na qual o primeiro valor será icons e o segundo functions, no valor icons insira um vetor com os ícones do FontAwesome que representam a sua escolha, no segundo valor insira um vetor com as funções que você deseja que faça ao clicar no ícone que será apresentado na aba lateral, a ordem dos vetores serão apresentadas juntamente, ou seja, vetor de ícone na posição 1 funcionará com vetor de função da posição 1. Exemplo:
`javascript
buttons={{
'icons': ['fas fa-exchange', 'fas fa-print', 'fas fa-exchange'],
'functions': ['toggleSidebar', 'printScreen', função()]
}}
`
as funções toggleSidebar e printScreen são funções da biblioteca na qual os objetivos delas são abrir e fechar a aba lateral e fazer uma captura da tela, caso queira utilizar uma função sua você pode seguir o molde utilizado na terceira posição do vetor, chamando normalmente sua função no molde função()

O Campo NavigationMenuIcon é necessário para inserir via classe os ícones FontAwesome versão 5.15.4, caso contrário não aparecerá a roda de navegação.

Caso não queira o molde de abre e fecha automaticamente gerado pela biblioteca basta colocar no local onde insere value="Nome desejado" o valor noModel, desse jeito:

`javascript