El proyecto sisdai-graficas es una biblioteca de visualización de datos que forma parte del Sistema de Diseño y Accesibilidad para la Investigación (Sisdai).
Cualquier persona puede hacer uso de esta biblioteca al clonarla e instalarla en su equipo a través del protocolo HTTPS.
- Homologa los estilos utilizando el sistema de diseño Sisdai.
- Mejora la accesibilidad mediante el uso de html semántico y aplicando las reglas establecidas en Sisdai.
- Facilita la actualización de elementos institucionales requeridos.
- Facilita y reduce el código de elementos para la visualización de datos.
En la carpeta principal de tu proyecto Vue, instala la biblioteca en las dependencias de tu proyecto con:
npm install git+https://codigo.conahcyt.mx/sisdai/sisdai-graficasDependiendo de la versión de la biblioteca a instalar, la instrucción anterior puede cambiar a:
npm install git+https://codigo.conahcyt.mx/sisdai/sisdai-graficas#vN.N.Ndonde N.N.N indica el número de versión, por ejemplo v1.0.0
Para poder utilizar un componente de visualización de esta biblioteca, es necesario importar y registrarlo en el
archivo src/main.js del proyecto (de Vue) a trabajar, por ejemplo en el siguiente script se está registrando e
importando el componente de SisdaiBarras de esta biblioteca (que construye una gráfica de barras).
import Vue from 'Vue'
import App from './App.Vue'
import { SisdaiBarras } from 'sisdai-graficas'
import 'sisdai-graficas/dist/sisdai-graficas.css'
Vue.use(SisdaiBarras)En cualquier vista en la sección <template> de tu proyecto puedes utilizar los componentes de la biblioteca
sin necesidad de volver a importarlo en el script. Por ejemplo:
<template>
<SisdaiBarras
barras_id="..."
:datos="[{...}]"
:variables="[{...}]"
nombre_color="..."
nombre_barra="..."
titulo_eje_x="..."
titulo_eje_y="..."
/>
</template>Para un uso avanzado revisa la documentación.
Si actualmente utilizas la biblioteca y necesitas utilizar otra versión de las gráficas, en la carpeta del proyecto instala la versión que requieres nuevamente
npm install git+https://codigo.conahcyt.mx/sisdai/sisdai-graficas#vN.N.Ndonde N.N.N indica el número de versión, por ejemplo v1.0.0
| Gráfica | Descripcion | Propiedades requeridas |
|---|---|---|
| SisdaiAlluvial | Componente para construir un gráfico de tipo alluvial | :datos="{objeto}" :variales="[{arreglo de objetos}]" |
| SisdaiAreasApiladas | Componente para construir una gráfica de áreas apiladas en el tiempo | :datos="[{arreglo de objetos}]" :variales="[{arreglo de objetos}]" nombre_indice="texto" formato_temporal="texto" |
| SisdaiAreasApiladasOrdenadas | Componente para construir una gráfica de áreas apiladas en el tiempo cuyas categorías se reordenan en cada fecha de forma ascendente | :datos="[{arreglo de objetos}]" :variales="[{arreglo de objetos}]" nombre_indice="texto" formato_temporal="texto" |
| SisdaiBarras | Componente para crear gráficas de barras simples o apiladas | :datos="[{arreglo de objetos}]" :variables="[{arreglo de objetos}]" nombre_indice="texto" |
| SisdaiCajasBigotes | Componente para construir un gráfico de cajas y bigotes, útil para visualizar distribuciones | :datos="[{arreglo de objetos}]" :variables="{objeto}" nombre_indice="texto" |
| SisdaiDona | Componente para construir un gráfico de donas | :datos="[{arreglo de objetos}]" :variables="{objeto}" nombre_indice="texto" clave_cantidad="texto" |
| SisdaiSeriesTiempo | Componente para construir un gráfico de series de tiempo | :datos="[{arreglo de objetos}]" :variables="{objeto}" nombre_indice="texto" formato_temporal="texto" |
| SisdaiViolines | Componente para construir un diagrama de violines, útil para visualizar distribuciones | :datos="[{arreglo de objetos}]" :variables="{objeto}" nombre_indice="texto" |
Para desarrollar este proyecto se usa node.js como entorno de ejecución de JavaScript. La opción recomendada para instalarlo es vía nvm que es el manejador de versiones de node. Siguiendo este camino, también se instalará el manejador de paquetes npm. Las instrucciones de instalación y dependencias del proyecto se muestran aquí usando tanto npm, como nvm.
Las gráficas de esta biblioteca están desarrolladas como componentes de Vue.js usando D3.js, por lo tanto se le recomienda a la persona usuaria tener conocimientos básicos de lo anterior así como de desarrollo en JavaScript.
Se puede clonar e instalar este proyecto en tu equipo utilizando solo el protocolo HTTPS, es decir:
git clone https://codigo.conahcyt.mx/sisdai/sisdai-graficas.gitEstablece la versión adecuada de npm y nvm (previamente instaladas).
nvm use 18Instala las dependencias de la biblioteca.
npm installEste proyecto cuenta con una documentación más extensa que aún está en proceso de desarrollo. Es posible levantarla en un ambiente local con la instrucción:
npm run docsSi deseas correr el testing puedes ejecutar el siguiente comando, el cual implementará la pruebas unitarias
npm run testAdicionalmente puedes ejecutar el siguiente comando para evaluar el porcentaje de código que se ha testeado y visualizar el avance en un servidor local
npm run coverageSOFTWARE LIBRE Y ESTÁNDARES ABIERTOS
Sisdai y sisdai-graficas están alineadas a las disposiciones establecidas por la Coordinación de Estrategia Digital Nacional ( DOF:06/09/2021) en donde se estipula que las "políticas y disposiciones tienen como objetivo fortalecer el uso del software libre y los estándares abiertos, fomentar el desarrollo de aplicaciones institucionales con utilidad pública, lograr la autonomía, soberanía e independencia tecnológicas dentro de la APF". En el artículo 63 se explicita que "cuando se trate de desarrollos basados en software libre, se respetarán las condiciones de su licenciamiento original [...]".
Considerando lo anterior, sisdai-graficas se publica bajo la licencia LGPLv3. Dicha licencia se puede consultar en el archivo LICENSE de este repositorio. Esta licencia se encuentra disponible en inglés porque aunque el Sisdai privilegia el idioma español se respeta la versión original de acuerdo al proyecto GNU.
Por el momento sólo quienes sean parte de un equipo de investigación del capítulo de un ENI podrán levantar issues en este repositorio. El equipo del Sisdai se encargará de mantenerlo.