g-sos

Biblioteca criada para auxiliar na criação de gráficos.

Para utilizar deve-se importar utilizando esm.sh.

<div id="chart" class="chart"></div>

<script>

import { GHelper } from 'https://esm.sh/g-sos'

GHelper.create('chart', {
    type: 'rating-marker',
    data: data,
    options: {
    width: 800,
    }
})

<script>

Gráficos

rating-marker

O componente espera um objeto data com as seguintes propriedades:

| Chave (key) | Valor (value) | |-------------------------|-----------------------------------------------------------------------------------| | overlap (obrigatório) | String no formato "X/Y", por exemplo "1/1". Representa a medida de sobreposição. Default: 0/0| | overlapSignificance (obrigatório) | String com um dos seguintes valores: "no significant overlap", "some overlap" ou "significant overlap". Define o nível de sobreposição. Default: no significant overlap|

✅ Exemplo:

data = {
  overlap: "1/1",
  overlapSignificance: "significant overlap"
}

range-bar

O componente espera um objeto data com as seguintes propriedades:

| Chave (key) | Valor (value) | |---------------------------------------------|-------------------------------------------------------------------------------------------------------------| | side (obrigatório, exceto com secondValue) | String com um dos seguintes valores: "left", "right" ou "median". Define o ranqueamento. Default: right | | value (obrigatório) | Integer entre 0 e 100. Default: 0 | | secondValue (opcional, exceto para o gráfico de idade) | Integer que define a idade biológica, usado como valor de referência para gráficos de idade. Default: null | | hideSecondValue (opcional) | Boolean: true ou false. Oculta a idade biológica, mantendo-a como referência para gráficos de idade. Default: false|

✅ Exemplo:

data = {
    side: "left",
    value: 65
}

ou 

data = {
    value: 70,
    secondValue: 62,
    hideSecondValue: true
}

trend-line

O componente espera uma lista de objetos data com as seguintes propriedades:

| Chave (key) | Valor (value) | |---------------------------------------------|-------------------------------------------------------------------------------------------------------------| | label (obrigatório) | String de identificação para um conjunto de idade biológica e cronológica. | | cron (obrigatório) | Integer que define a idade cronólogica. | | bio (obrigatório) | Integer que define a idade biológica. |

✅ Exemplo:

data =  [
      { label: "A", cron: 30, bio: 40 },
      { label: "B", cron: 30, bio: 36 },
      { label: "C", cron: 29, bio: 20 },
      { label: "D", cron: 30, bio: 49 },
      { label: "E", cron: 30, bio: 51 },
      { label: "F", cron: 31, bio: 47 },
      { label: "G", cron: 31, bio: 48 },
    ]

scatter-benchmark

O componente espera um objeto data com as seguintes propriedades:

| Chave (key) | Valor (value) | |---------------------------------------------|-------------------------------------------------------------------------------------------------------------| | points (obrigatório) | Lista com Objetos de chaves idade: Integer e valor: Float}. | | resultado (obrigatório) | Objeto com as chaves idade: Integer e valor: Float sendo o resultado do usuário | | color (obrigatório) | String que define a cor do marcador, possíveis cores lightGreen , green , darkGreen , orange ou red . Default: lightGreen

✅ Exemplo:

data = {
    points: [
    { idade: 20, valor: 0.7 },
    { idade: 15, valor: 0.3 },
    { idade: 10, valor: 0.1 },
    { idade: 22, valor: 0.32 },
    { idade: 30, valor: 0.45 },
    { idade: 28, valor: 0.18 },
    { idade: 35, valor: 0.26 },
    { idade: 41, valor: 0.51 },
    { idade: 50, valor: 0.38 },
    { idade: 63, valor: 0.11 },
    { idade: 72, valor: 0.58 },
    { idade: 77, valor: 0.44 },
    { idade: 66, valor: 0.22 },
    { idade: 10, valor: 0.1 },
    { idade: 22, valor: 0.32 },
    { idade: 30, valor: 0.45 },
    { idade: 28, valor: 0.18 },
    { idade: 35, valor: 0.26 },
    { idade: 41, valor: 0.51 },
    { idade: 50, valor: 0.38 },
    { idade: 63, valor: 0.11 },
    { idade: 72, valor: 0.58 },
    { idade: 77, valor: 0.44 },
    { idade: 66, valor: 0.22 },
    ], 
    resultado: { 
        idade: 50, 
        valor: 0.350 
    }
    , color: "lightGreen"
            }

arrow-scale

O componente espera um objeto data com as seguintes propriedades:

| Chave (key) | Valor (value) | |---------------------------------------------|-------------------------------------------------------------------------------------------------------------| | value (obrigatório) | Integer entre 0 e 100}. Default: 0 | | side (obrigatório) | String com os seguintes valores: left ou right definindo o lado da seta. Default: right|

data = {
    side: "left",
    value: 65
}