{"id":18949025,"url":"https://github.com/junjizhi/bootstrap-vue-heatmap","last_synced_at":"2026-03-27T21:30:23.023Z","repository":{"id":84289053,"uuid":"381581886","full_name":"junjizhi/bootstrap-vue-heatmap","owner":"junjizhi","description":"🔥 A simple heatmap component based on Bootstrap-Vue","archived":false,"fork":false,"pushed_at":"2021-08-02T12:18:10.000Z","size":265,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-07-11T12:22:21.715Z","etag":null,"topics":["bootstrap","bootstrap-table","bootstrap-vue","bootstrapvue","heatmap","heatmap-chart","heatmap-libraries","vue","vuejs"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/junjizhi.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2021-06-30T05:07:58.000Z","updated_at":"2021-08-02T12:17:45.000Z","dependencies_parsed_at":"2023-03-04T05:30:46.665Z","dependency_job_id":null,"html_url":"https://github.com/junjizhi/bootstrap-vue-heatmap","commit_stats":{"total_commits":9,"total_committers":2,"mean_commits":4.5,"dds":"0.11111111111111116","last_synced_commit":"ef62aa48a60915b2c262bbf1a2d1eeacfa6607c7"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junjizhi%2Fbootstrap-vue-heatmap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junjizhi%2Fbootstrap-vue-heatmap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junjizhi%2Fbootstrap-vue-heatmap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junjizhi%2Fbootstrap-vue-heatmap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/junjizhi","download_url":"https://codeload.github.com/junjizhi/bootstrap-vue-heatmap/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239946914,"owners_count":19723018,"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":["bootstrap","bootstrap-table","bootstrap-vue","bootstrapvue","heatmap","heatmap-chart","heatmap-libraries","vue","vuejs"],"created_at":"2024-11-08T13:15:28.068Z","updated_at":"2026-03-27T21:30:22.921Z","avatar_url":"https://github.com/junjizhi.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# bootstrap-vue-heatmap\n\n## Introduction\nA simple heatmap component based on [Bootstrap-Vue](https://bootstrap-vue.org/) tables (a.k.a, `b-table`).\n\n### Demo\n[CodeSandbox](https://codesandbox.io/s/nameless-leftpad-1pu2x)\n\n### Why heatmap as a table?\nThis component implements the heatmap as a table because of the flexibility and intuitive interaction. Other libraries implement heatmap more *chart-like*, e.g., [E-charts heatmap](https://echarts.apache.org/examples/en/editor.html?c=heatmap-cartesian), which doesn't have many built-in interactions (e.g., sorting), and we have to code them by hand.\n\nBased on `b-table`, the heatmap comes with flexible options out of the box:\n- Sorting on a column (See the gif below)\n- Multiple non-numeric, non-color-coded columns\n\n![2021-06-30 09 34 01](https://user-images.githubusercontent.com/2715151/123969615-621f5e00-d986-11eb-9e32-a8c3f82749e0.gif)\n\n\n## Dependencies\n\n\n* [Vue.js 2.6+](https://vuejs.org/2016/04/27/announcing-2.0/)\n* [Bootstrap-Vue (v2.21.2+)](https://bootstrap-vue.org/)\n* [Other Bootstrap-Vue dependencies](https://bootstrap-vue.org/docs).\n\n## Installation\n\n```bash\nnpm i bootstrap-vue-heatmap\n\n# if you use yarn:\n\nyarn add bootstrap-vue-heatmap\n```\n\n## Usage\n\n```html\n\u003cscript\u003e\nimport Vue from 'vue';\nimport BootstrapVueHeatmap from '@/bootstrap-vue-heatmap.vue';\nimport { BCard } from 'bootstrap-vue'\nVue.component('b-card', BCard)\n\n// Uncomment the following to import BootstrapVue CSS files if you\n// have not done so when registering BootstrapVue. Order is important.\n// Check out: https://bootstrap-vue.org/docs#using-module-bundlers\n// import 'bootstrap/dist/css/bootstrap.min.css'\n// import 'bootstrap-vue/dist/bootstrap-vue.css'\n\nconst Cities = [\n  'Berkeley',\n  'Mexico City',\n  'Mumbai',\n  'New York',\n  'Shanghai',\n  'Tokyo',\n  'Toronto'\n];\n\nexport default Vue.extend({\n  name: 'ServeDev',\n  components: {\n    BootstrapVueHeatmap\n  },\n  data() {\n    return {\n      nonNumericFields: ['City'],\n      numericFields: [\n        '2021-06-27 8:00',\n        '2021-06-27 8:10',\n        '2021-06-27 8:20',\n        '2021-06-27 8:30',\n        '2021-06-27 8:40',\n        '2021-06-27 8:50',\n        '2021-06-27 9:00'\n      ],\n      data: Cities.map(city =\u003e ({\n        City: city,\n        '2021-06-27 8:00': Math.floor(Math.random() * 9),\n        '2021-06-27 8:10': Math.floor(Math.random() * 9),\n        '2021-06-27 8:20': Math.floor(Math.random() * 9),\n        '2021-06-27 8:30': Math.floor(Math.random() * 9),\n        '2021-06-27 8:40': Math.floor(Math.random() * 9),\n        '2021-06-27 8:50': Math.floor(Math.random() * 9),\n        '2021-06-27 9:00': Math.floor(Math.random() * 9)\n      }))\n    }\n  }\n});\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cb-card\n      title=\"Heatmap\"\n    \u003e\n      \u003cbootstrap-vue-heatmap\n        :non-numeric-fields=\"nonNumericFields\"\n        :numeric-fields=\"numericFields\"\n        :data=\"data\"\n      /\u003e\n    \u003c/b-card\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n```\n\n\n## Features\n- [x] Supporting sorting\n- [x] Support compact mode\n- [ ] Support custom color pallette\n- [ ] Support custom cell rendering as slots\n- [ ] Support ordinal data (e.g., `Low`, `Medium`, `High`)\n  - Currently you have to convert them into numeric data and pass in in the `data` props\n\n## Component Reference\n### Props\n\n| Name                 | Type      | Description                                                                                                                        |\n| -------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------- |\n| `non-numeric-fields` | `Array`   | A list of non-numeric fields (strings). These columns will not be color-coded.                                                     |\n| `numeric-fields`     | `Array`   | A list of numeric fields (strings). These columns will be color-coded.                                                             |\n| `data`               | `Array`   | A list of data objects. The keys of each object should be either a numeric or non-numeric field.                                   |\n| `compact`            | `Boolean` | A flag to indicate if the heatmap is rendering in compact mode. It allows the heatmap to show more data with less horizontal span. |\n| `sticky-fields`      | `Array`   | A list of fields that are stick to the left of the heatmap when the heatmap has a horizontal scrollbar.\n| `fixed-decimal-places` | `Number` \u0026#124; `Boolean` | Formats a the numermic cells using Javascript fixed-point notation. If passed in as a number, it denotes the number of decimal places to display. | `() =\u003e 2`  |\n\n## Development\n\n**Install dependencies**:\n```bash\nyarn install --dev\n```\n\n**Build component**:\n```bash\nyarn build\n```\n\n**Run example app locally**:\n```bash\nyarn serve\n```\n\n**Lints and fixes files**:\n```bash\nyarn lint\n```\n\n**Generate component documentation**:\n```bash\nyarn doc src/bootstrap-vue-heatmap.vue\n```\n\n## License\n\nReleased under the MIT [License](./LICENSE). Copyright (c) Bootstrap-vue-heatmap.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjunjizhi%2Fbootstrap-vue-heatmap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjunjizhi%2Fbootstrap-vue-heatmap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjunjizhi%2Fbootstrap-vue-heatmap/lists"}