Sidebargeovista NPM

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:

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: