sidebargeovista
v1.4.26
Published
Antes de qualquer coisa, no terminal rode os códigos `npm i sidebargeovista [email protected] [email protected]` e `npm i [email protected]`. Após isso insira no local de preferência do código estas funções: ```javascript import { Bar, Do
Downloads
57
Readme
Código Molde
Antes de qualquer coisa, no terminal rode os códigos npm i sidebargeovista [email protected] [email protected]
e npm i [email protected]
.
Após isso insira no local de preferência do código estas funções:
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 = (
<Pie
data={data} options={options} height={props.height}
/>
)
} else if (props.mode.toLowerCase() === "bar") {
html = (
<Bar
data={data} options={options} height={props.height}
/>
)
} else if (props.mode.toLowerCase() === "doughnut") {
html = (
<Doughnut
data={data} options={options} height={props.height}
/>
)
}
return (
<div >
{html}
</div>
);
}
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!
<SidebarGeovista
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']
}}
>
<div>
<div className="SidebarContentModel" checkboxcolor="blue" model="true/enable" value="Demandas" click={[() => console.log(teste()), () => console.log(teste())]}>
<div className="SidebarContentModel" model="true/enable" value={'classe1'} key={'classe1'}
>
<ChartModel
mode="bar"
labels={['texto1', 'texto2', 'texto3']}
datas={[10, 30, 20]}
colors={['rgba(255, 0, 0)', 'rgba(0, 255, 0)', 'rgba(0, 0, 255)']}
responsive={false}
legend={true}
counter="km"
/>
</div>
<div className="SidebarContentModel" model="true/enable" value={'classe2'} key={'classe2'}
>
<ChartModel
mode="doughnut"
labels={['texto1', 'texto2', 'texto3']}
datas={[10, 30, 20]}
colors={['rgba(255, 0, 0)', 'rgba(0, 255, 0)', 'rgba(0, 0, 255)']}
responsive={false}
legend={true}
counter="km"
/>
</div>
<div className="SidebarContentModel" model="true/enable" value={'classe3'} key={'classe3'}
>
<ChartModel
mode="pie"
labels={['texto1', 'texto2', 'texto3']}
datas={[10, 30, 20]}
colors={['rgba(255, 0, 0)', 'rgba(0, 255, 0)', 'rgba(0, 0, 255)']}
responsive={false}
legend={true}
counter="km"
/>
</div>
</div>
<div className="SidebarContentModel" checkboxcolor="yellow" model="true/enable" value="Empreendimentos" click={[() => console.log(teste()), () => console.log(teste())]}>
</div>
<div className="SidebarContentModel" checkboxcolor="pinkShock" model="true/enable" value="Contrato" click={[() => console.log(teste()), () => console.log(teste())]}>
</div>
</div>
</SidebarGeovista>
O componente SidebarGeovista
aceita alguns parâmetros, que no caso são:
PREENCHA TODOS OS CAMPOS NO FORMATO: parâmetro = "valor desejado"
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:
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:
<div value="noModel">
DIV SEM MOLDE
</div>
<div value="Com Molde">
DIV COM MOLDE
</div>