npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

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>