{"id":26214401,"url":"https://github.com/centrogeo/sisdai-graficas","last_synced_at":"2025-04-15T18:41:49.060Z","repository":{"id":270929358,"uuid":"883484710","full_name":"CentroGeo/sisdai-graficas","owner":"CentroGeo","description":null,"archived":false,"fork":false,"pushed_at":"2025-03-27T18:59:32.000Z","size":13994,"stargazers_count":1,"open_issues_count":4,"forks_count":1,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-03-28T23:44:02.892Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"lgpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CentroGeo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-05T03:30:50.000Z","updated_at":"2025-01-04T05:46:10.000Z","dependencies_parsed_at":"2025-01-04T05:47:46.672Z","dependency_job_id":"5a50cda1-7d53-4e7a-91e0-56ecd0e75fed","html_url":"https://github.com/CentroGeo/sisdai-graficas","commit_stats":null,"previous_names":["centrogeo/sisdai-graficas"],"tags_count":59,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CentroGeo%2Fsisdai-graficas","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CentroGeo%2Fsisdai-graficas/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CentroGeo%2Fsisdai-graficas/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CentroGeo%2Fsisdai-graficas/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CentroGeo","download_url":"https://codeload.github.com/CentroGeo/sisdai-graficas/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249130955,"owners_count":21217645,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-03-12T10:16:54.131Z","updated_at":"2025-04-15T18:41:49.038Z","avatar_url":"https://github.com/CentroGeo.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# sisdai-graficas\n\nEl proyecto sisdai-graficas es una biblioteca de visualización de datos que\nforma parte del Sistema de Diseño y Accesibilidad para la\nInvestigación ([Sisdai](https://sisdai.conahcyt.mx/)). El Sisdai es un proyecto\nde investigación desarrollado por el\nCentro de Investigación en Ciencias de Información Geoespacial, A.C.\n([CentroGeo](https://www.centrogeo.org.mx/)) y coordinado por el Consejo\nNacional de Humanidades, Ciencias y Tecnologías\n([Conahcyt](https://conahcyt.mx)) del Gobierno de México.\n\nPara leer la documentación de la biblioteca, puedes visitar el sitio\n[sisdai-graficas.conahcyt.mx](https://sisdai-graficas.conahcyt.mx)\no levantar la documentación localmente siguiendo las instrucciones escritas en\nla sección [Uso local del proyecto](#uso-local-del-proyecto) de este\ndocumento.\n\nCualquier persona puede hacer uso de esta biblioteca al clonarla e instalarla\nen su equipo a través del\n**protocolo HTTPS** o bien instalándola mediante\n[npm](https://www.npmjs.com/~centrogeomx).\n\n## Utilidades\n\n- Homologa los estilos utilizando el sistema de diseño [Sisdai](https://sisdai.conahcyt.mx).\n- Mejora la accesibilidad mediante el uso de html semántico y aplicando las reglas establecidas en [Sisdai](https://sisdai.conahcyt.mx).\n- Facilita la actualización de elementos institucionales requeridos.\n- Facilita y reduce el código de elementos para la visualización de datos.\n\n## Instalación y uso\n\n### Instala la biblioteca\n\nEn la carpeta principal de tu proyecto Vue puedes instalar la última versión de sisdai-graficas mediante dos opciones:\n\n**Opción A.** Desde el repositorio del [sisdai-graficas en npm](https://www.npmjs.com/package/@centrogeomx/sisdai-graficas).\n\nEn la línea de comando escribe\n\n```bash\nnpm i @centrogeomx/sisdai-graficas\n```\n\n**Opción B.** Desde el repositorio de [sisdai-graficas en github.com](https://github.com/CentroGeo/sisdai-graficas).\n\nEn la línea de comando escribe\n\n```bash\nnpm install git+https://github.com/CentroGeo/sisdai-graficas\n```\n\n### Importa la biblioteca\n\nPara poder utilizar un componente de visualización de esta biblioteca, es necesario importar y registrarlo en el\narchivo `src/main.js` del proyecto (de Vue) a trabajar, por ejemplo en el siguiente script se está registrando e\nimportando el componente de `SisdaiBarras` de esta biblioteca (que construye una gráfica de barras).\n\n```javascript\nimport Vue from 'Vue'\nimport App from './App.Vue'\nimport { SisdaiBarras } from '@centrogeomx/sisdai-graficas'\nimport 'sisdai-graficas/dist/sisdai-graficas.css'\n\nVue.use(SisdaiBarras)\n```\n\n### Uso\n\nEn cualquier vista en la sección `\u003ctemplate\u003e` de tu proyecto puedes utilizar los componentes de la biblioteca\nsin necesidad de volver a importarlo en el script. Por ejemplo:\n\n```js\n\u003ctemplate\u003e\n\n  \u003cSisdaiBarras\n      barras_id=\"...\"\n      :datos=\"[{...}]\"\n      :variables=\"[{...}]\"\n      nombre_color=\"...\"\n      nombre_barra=\"...\"\n      titulo_eje_x=\"...\"\n      titulo_eje_y=\"...\"\n  /\u003e\n\n\u003c/template\u003e\n```\n\n_Para un uso avanzado revisa la [documentación](https://sisdai-graficas.conahcyt.mx)._\n\n## Actualización de la biblioteca\n\nSi necesitas utilizar otra versión de las gráficas, ubícate en la carpeta del\nproyecto en donde necesitas la actualización e instala la versión que requieres\nnuevamente usando una de estas dos opciones\n\n**Opción A.** Para versiones publicadas en el repositorio de [sisdai-graficas en npm](https://www.npmjs.com/package/@centrogeomx/sisdai-graficas).\n\n```bash\nnpm i @centrogeomx/sisdai-graficas@vN.N.N\n```\n\n**Opción B.** Para cualquier versión desde el repositorio de [sisdai-graficas en github.com](https://github.com/CentroGeo/sisdai-graficas).\n\n```bash\nnpm install git+https://github.com/CentroGeo/sisdai-graficas#vN.N.N\n```\n\ndonde N.N.N indica el número de versión, por ejemplo v1.0.0\n\nConsulta el archivo `CHANGELOG.md` del repositorio de [sisdai-graficas en github.com](https://github.com/CentroGeo/sisdai-graficas) para conocer las nuevas características y cambios que sufre la biblioteca en cada una de sus versiones.\n\n## Listado de gráficas\n\n| Gráfica                      | Descripcion                                                                                                                          | Propiedades requeridas                                                                                                    |\n| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- |\n| SisdaiAlluvial               | Componente para construir un gráfico de tipo alluvial                                                                                | :datos=\"`{objeto}`\" :variales=\"`[{arreglo de objetos}]`\"                                                                  |\n| 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`\" |\n| 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`\" |\n| SisdaiBarras                 | Componente para crear gráficas de barras simples o apiladas                                                                          | :datos=\"`[{arreglo de objetos}]`\" :variables=\"`[{arreglo de objetos}]`\" nombre_indice=\"`texto`\"                           |\n| SisdaiCajasBigotes           | Componente para construir un gráfico de cajas y bigotes, útil para visualizar distribuciones                                         | :datos=\"`[{arreglo de objetos}]`\" :variables=\"`{objeto}`\" nombre_indice=\"`texto`\"                                         |\n| SisdaiDona                   | Componente para construir un gráfico de donas                                                                                        | :datos=\"`[{arreglo de objetos}]`\" :variables=\"`{objeto}`\" nombre_indice=\"`texto`\" clave_cantidad=\"`texto`\"                |\n| SisdaiSeriesTiempo           | Componente para construir un gráfico de series de tiempo                                                                             | :datos=\"`[{arreglo de objetos}]`\" :variables=\"`{objeto}`\" nombre_indice=\"`texto`\" formato_temporal=\"`texto`\"              |\n| SisdaiViolines               | Componente para construir un diagrama de violines, útil para visualizar distribuciones                                               | :datos=\"`[{arreglo de objetos}]`\" :variables=\"`{objeto}`\" nombre_indice=\"`texto`\"                                         |\n\n## Uso local del proyecto\n\n### Pasos previos recomendados\n\nPara desarrollar este proyecto se usa [node.js](https://nodejs.org/en) como\nentorno de ejecución de JavaScript. La opción recomendada para instalarlo es\n[vía nvm](https://github.com/nvm-sh/nvm) que es el manejador de versiones de\nnode. Siguiendo este camino, también se instalará el manejador de paquetes\n[npm](https://www.npmjs.com/). Las instrucciones de instalación\ny dependencias del proyecto se muestran aquí usando tanto npm, como nvm.\n\nLas gráficas de esta biblioteca están desarrolladas como [componentes](https://es.vuejs.org/v2/guide/components.html) de\n[Vue.js](https://es.vuejs.org/) usando [D3.js](https://d3js.org/), por lo tanto se le recomienda a la persona usuaria tener\nconocimientos básicos de lo anterior así como de desarrollo en [JavaScript](https://www.javascript.com/).\n\n### Dependencias\n\n- [node.js (^22)](https://nodejs.org/en/download/)\n- [npm (^10)](https://www.npmjs.com/get-npm)\n- [Vue.js (3.4.36)](https://vuejs.org/)\n\n### Instalación\n\nSe puede clonar e instalar este proyecto en tu equipo\nutilizando **solo el protocolo HTTPS**, es decir:\n\n```bash\ngit clone https://github.com/CentroGeo/sisdai-graficas.git\n```\n\nEstablece la versión adecuada de npm y nvm (previamente instaladas).\n\n```bash\nnvm use 22\n```\n\nInstala las dependencias de la biblioteca.\n\n```bash\nnpm install\n```\n\nOpcionalmente levanta en local la documentación.\n\n```bash\nnpm run docs\n```\n\n### Testing\n\nSi deseas correr el testing puedes ejecutar el siguiente comando, el cual implementará la pruebas unitarias.\n\n```bash\nnpm run test\n```\n\nAdicionalmente puedes ejecutar el siguiente comando para evaluar el porcentaje de código que se ha testeado y visualizar el avance en un servidor local\n\n```bash\nnpm run coverage\n```\n\nHasta la versión v6.0.1, las pruebas unitarias que se han implementado son en los siguientes componentes:\n\nLas pruebas realizadas en `SisdaiGraficas` son:\n\n- Renderizado del componente\n- Manejo de props\n- Renderizado de slots\n- Interacciones del usuario (movimiento de cursor)\n- Comportamiento condicional con el globo de información\n- Cálculo correcto de dimensiones\n\nMientras que las pruebas realizadas en los componentes `SisdaiAlluvial`, `SisdaiAreasApiladas`, `SisdaiAreasApiladasOrdenadas`, `SisdaiBarras`, `SisdaiCajasBigotes`, `SisdaiDonas`, `SisdaiSeriesTiempo` y `SisdaiViolines` son:\n\n- Renderizado del componente\n- Manejo de props\n- Creación de elementos gráficos\n\n## Licencia\n\n**SOFTWARE LIBRE Y ESTÁNDARES ABIERTOS**\n\nSisdai y sisdai-graficas están alineadas a las disposiciones establecidas por\nla Coordinación de Estrategia Digital Nacional (\nDOF:06/09/2021) en donde se estipula que las \"políticas y disposiciones tienen\ncomo objetivo fortalecer el uso del software\nlibre y los estándares abiertos, fomentar el desarrollo de aplicaciones\ninstitucionales con utilidad pública, lograr la\nautonomía, soberanía e independencia tecnológicas dentro de la APF\". En el\nartículo 63 se explicita que \"cuando se trate\nde desarrollos basados en software libre, se respetarán las condiciones de su\nlicenciamiento original [...]\".\n\nConsiderando lo anterior, sisdai-graficas se publica bajo la licencia\n[LGPLv3](https://www.gnu.org/licenses/lgpl-3.0.html). Dicha licencia se puede\nconsultar en el archivo _LICENSE_ de este repositorio.\nEsta licencia se encuentra disponible en inglés porque aunque el Sisdai privilegia\nel idioma español se respeta la versión original de acuerdo al proyecto\n[GNU](https://www.gnu.org/licenses/licenses.html).\n\n## Contribuir\n\nPor el momento sólo quienes sean parte de un equipo de investigación del capítulo de un ENI podrán levantar issues en\neste repositorio. El equipo del Sisdai se encargará de mantenerlo.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcentrogeo%2Fsisdai-graficas","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcentrogeo%2Fsisdai-graficas","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcentrogeo%2Fsisdai-graficas/lists"}