{"id":13588598,"url":"https://github.com/digrich/bubblechart-panel","last_synced_at":"2025-04-08T06:32:21.650Z","repository":{"id":217179344,"uuid":"95927300","full_name":"digrich/bubblechart-panel","owner":"digrich","description":"Bubble chart panel for grafana monitoring system.","archived":false,"fork":false,"pushed_at":"2025-03-29T06:36:01.000Z","size":22811,"stargazers_count":8,"open_issues_count":13,"forks_count":10,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-29T07:26:42.645Z","etag":null,"topics":["bubble-chart","d3js","dashboard","grafana","grafana-panel","metrics","monitoring","timeseries","tsdb","visualization"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/digrich.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":"2017-06-30T22:08:43.000Z","updated_at":"2024-09-25T03:52:07.000Z","dependencies_parsed_at":"2025-03-29T07:23:57.144Z","dependency_job_id":"9ba15598-8061-427e-b217-a4eb839008a3","html_url":"https://github.com/digrich/bubblechart-panel","commit_stats":null,"previous_names":["digrich/bubblechart-panel"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digrich%2Fbubblechart-panel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digrich%2Fbubblechart-panel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digrich%2Fbubblechart-panel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digrich%2Fbubblechart-panel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/digrich","download_url":"https://codeload.github.com/digrich/bubblechart-panel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247792110,"owners_count":20996878,"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":["bubble-chart","d3js","dashboard","grafana","grafana-panel","metrics","monitoring","timeseries","tsdb","visualization"],"created_at":"2024-08-01T15:06:48.820Z","updated_at":"2025-04-08T06:32:16.617Z","avatar_url":"https://github.com/digrich.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003c!-- This README file is going to be the one displayed on the Grafana.com website for your plugin. Uncomment and replace the content here before publishing.\n\nRemove any remaining comments before publishing as these may be displayed on Grafana.com --\u003e\n\n# Bubble Chart Panel for Grafana\n\n[![Marketplace](https://img.shields.io/badge/dynamic/json?logo=grafana\u0026color=F47A20\u0026label=marketplace\u0026prefix=v\u0026query=%24.items%5B%3F%28%40.slug%20%3D%3D%20%22digrich-bubblechart-panel%22%29%5D.version\u0026url=https%3A%2F%2Fgrafana.com%2Fapi%2Fplugins)](https://grafana.com/grafana/plugins/digrich-bubblechart-panel/)\n[![Downloads](https://img.shields.io/badge/dynamic/json?logo=grafana\u0026color=F47A20\u0026label=downloads\u0026query=%24.items%5B%3F%28%40.slug%20%3D%3D%20%22digrich-bubblechart-panel%22%29%5D.downloads\u0026url=https%3A%2F%2Fgrafana.com%2Fapi%2Fplugins)](https://grafana.com/grafana/plugins/digrich-bubblechart-panel)\n[![License](https://img.shields.io/github/license/digrich/bubblechart-panel)](LICENSE)\n[![Known Vulnerabilities](https://snyk.io/test/github/digrich/bubblechart-panel/badge.svg)](https://snyk.io/test/github/digrich/bubblechart-panel)\n\n\u003c!-- [![Maintainability](https://api.codeclimate.com/v1/badges/5c5cd1076777c637b931/maintainability)](https://codeclimate.com/github/grafana/grafana-polystat-panel/maintainability)\n[![Test Coverage](https://api.codeclimate.com/v1/badges/5c5cd1076777c637b931/test_coverage)](https://codeclimate.com/github/grafana/grafana-polystat-panel/test_coverage)\n[![Build Status](https://drone.grafana.net/api/badges/grafana/grafana-polystat-panel/status.svg)](https://drone.grafana.net/grafana/grafana-polystat-panel) --\u003e\n\n## Overview \n\nThis panel is designed to provide a centralized view of any component in the form of a bubble chart. Circles are grouped together into clusters based on tag values, and the size and color of each circle represent the aggregated value of time series data.\n\nThis plugin uses a D3-based library to create a bubble chart. It supports autoscaling to readjust its size according to the panel size. If the labels are too long, they will be disabled, and only a tooltip will be shown.\n\n## Requirements\n\nThe plugin is compatible with Grafana 10 and above. \n\n## Screenshots\n\n| ![Gradient color scheme](https://raw.githubusercontent.com/digrich/bubblechart-panel/migrate-to-react/src/img/BC1.png) | ![Unique color scheme](https://raw.githubusercontent.com/digrich/bubblechart-panel/migrate-to-react/src/img/BC2.png) | ![Threshold color scheme](https://raw.githubusercontent.com/digrich/bubblechart-panel/migrate-to-react/src/img/BC3.png) \n|:--:|:--:|:--:|\n| Group color scheme | Gradient color scheme | Unique color scheme |\n\n| ![Group color scheme](https://raw.githubusercontent.com/digrich/bubblechart-panel/migrate-to-react/src/img/BC4.png) | ![Threshold color scheme](https://raw.githubusercontent.com/digrich/bubblechart-panel/migrate-to-react/src/img/BC5.png) | ![Group color scheme](https://raw.githubusercontent.com/digrich/bubblechart-panel/migrate-to-react/src/img/BC6.png) |\n|:--:|:--:|:--:|\n| Gradient color scheme | Threshold color scheme | Gradient color scheme |\n\n## Grouping\nThis panel provides two options for grouping circles: 'Name' and 'Label.' When selecting the 'Name' option, utilize the group separator (default: comma) to split names and establish hierarchical grouping based on data naming conventions. In the datasource query, use aliases with different tag names separated by the configurable group separator to determine the hierarchy order. This dynamic feature allows you to control the organization of circles on the chart by adjusting the order of tag names in the alias. For instance, if your data involves both data centers and hosts, and your alias is structured as $tag_dc,$tag_host, the chart will automatically group all host circles under the data center circle.\n\nAlternatively, when the 'Label' option is selected, use the dropdown menu to select labels and customize the grouping order. This flexibility is particularly useful when dealing with series that do not have a name or alias defined properly, providing better control over circle organization on the chart.\n\nTo handle non-time series formatted data, first, convert it to a multiple series format using Grafana's 'Partition by values' transformation. In the chart options, select the 'Group by' option as 'Label' and choose appropriate labels; it will parse the data properly.\n\n## Options\n\n\n### Bubble chart settings\n![Options](https://raw.githubusercontent.com/digrich/bubblechart-panel/migrate-to-react/src/img/Options.png)\n###\n* Labels - Select the labels to be displayed in the bubble chart circles.\n* Calculation - Reducer functions to aggregtaed the data.\n* Unit - Unit to be displayed.\n* Decimals - Number of decimals to be displayed.\n* Group Separator - Tag values separator in Alias for grouping.\n\n\n### Color scheme\n![Options](https://raw.githubusercontent.com/digrich/bubblechart-panel/migrate-to-react/src/img/ColorScheme.png)\n\n* Multiple color schemes.\n    * Group - In the grouping scheme, circles are colored according to their group hierarchy.\n        * Colors - The start and end range of colors for the group hierarchy.\n    * Threshold - In the threshold scheme, circles are colored based on threshold values.\n        * Thresholds - Threshold values.\n        * Colors - Colors are applied for different threshold values.\n    * Gradient - In the gradient scheme, circles are colored based on component values.\n        * Thresholds - Threshold values.\n        * Colors - The start and end range of colors for the gradient scale.\n    * Unique - In the unique scheme, different colors are applied to individual circles.\n\n### Compatibility\nTested against the following databases:\n* [InfluxDB](https://www.influxdata.com/)\n* [OpenTSDB](http://opentsdb.net/)\n* [Bosun](http://bosun.org/)\n* [MySQL](http://docs.grafana.org/features/datasources/mysql/#using-mysql-in-grafana)\n    * For MySQL, utilize the CONCAT function in the SQL expression for the metric field to achieve multiple group hierarchies. Example SQL expression:\n    ```sql \n    SELECT\n    UNIX_TIMESTAMP(date) as time_sec,\n    amt as value,\n    CONCAT(server, ',', org) as metric\n    FROM trade\n    WHERE $__timeFilter(date)\n    ORDER BY date ASC\n    ```\n\nThis approach is expected to be working to other databases as well.\n\n## Building\n\nThis plugin relies on [Plugin Tools](https://github.com/grafana/plugin-tools). The typical build sequence is as follows:\n\n```BASH\nnpm install\nnpm run build\n```\nFor development, you can run:\n\n```BASH\nnpm run dev\n```\n### Docker Support\n\nFor convenient development and testing, you can simply execute the following command using the included docker-compose.yml file:\n\n```BASH\ndocker-compose up\n```\nThen browse to \u003chttp://localhost:3000\u003e\n\n## Upgrade Implications\n\n### Changes in D3 Pack Layout Symmetry\n\nIn the latest version of D3, the pack layout symmetry has been updated to accommodate a greater number of circles. Users migrating from the Angular version (v1.*.*) of this plugin may observe differences in their layout. Previously, D3 organized circles in a spiral form, but now it packs circles more densely, enhancing the overall arrangement. ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdigrich%2Fbubblechart-panel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdigrich%2Fbubblechart-panel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdigrich%2Fbubblechart-panel/lists"}