chart-model

1.0.28 • Public • Published

Código Molde

<>
    <SidebarBody
      logoURL="https://dev.drenagem.geovista.com.br/api/static/icones/logo.png"
      titlesBackground="#868686"
      titlesColor="#ffffff"
      titlesBorderColor="#868686"
      NavigationMenuIcon={["fas fa-user", "fas fa-search", "fas fa-marker", "fas fa-map"]}
    >
      <div>
        <div className="SidebarContentModel" value="Titulo 1">
          <ChartModel
            mode="pie"
            title={"Gráfico Pizza"}
            labels={['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange']}
            datas={[12, 19, 3, 5, 2, 3]}
            colors={['#CB4335', '#1F618D', '#F1C40F', '#27AE60', '#884EA0', '#D35400']}
            responsive={false}
            legend={true}
          />
        </div>
        <div className="SidebarContentModel" value="Titulo 2">
          <ChartModel
            mode="bar"
            title={"Gráfico Barra"}
            labels={['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange']}
            datas={[12, 19, 3, 5, 2, 3]}
            colors={['#CB4335', '#1F618D', '#F1C40F', '#27AE60', '#884EA0', '#D35400']}
            responsive={false}
            legend={true}
          />
        </div>
        <div className="SidebarContentModel" value="Titulo 3">
          <ChartModel
            mode="doughnut"
            title={"Gráfico Torta"}
            labels={['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange']}
            datas={[12, 19, 3, 5, 2, 3]}
            colors={['#CB4335', '#1F618D', '#F1C40F', '#27AE60', '#884EA0', '#D35400']}
            responsive={false}
            legend={true}
            height={700}
          />
        </div>
      </div>
      <div value="Teste 1"><div>1234567</div></div>
      <div value="Teste 2">fsaljbfsaoif</div>
      <div value="Teste 3">abcdefghi</div>
    </SidebarBody>
    <ButtonsHUB >
      <SidebarButtons icon="fas fa-exchange" function="toggleSidebar" />
      <SidebarButtons icon="fas fa-print" function="printScreen" />
    </ButtonsHUB>
  </>

Caso não queira espaço de logo somente é necessário não colocar o campo logoURL nos Props.

O Campo NavigationMenuIcon é necessário para inserir via classe os ícones FontAwesome versão 5.15.4, caso contrário aparecerá um ícone de alerta no local.

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
1.0.280latest

Version History

VersionDownloads (Last 7 Days)Published
1.0.280
1.0.270
1.0.260
1.0.250
1.0.240

Package Sidebar

Install

npm i chart-model

Weekly Downloads

0

Version

1.0.28

License

none

Unpacked Size

402 kB

Total Files

9

Last publish

Collaborators

  • brunogeovista