{"id":13583433,"url":"https://github.com/uber/grafana-dash-gen","last_synced_at":"2025-05-15T13:07:27.941Z","repository":{"id":30197456,"uuid":"33748307","full_name":"uber/grafana-dash-gen","owner":"uber","description":"grafana dash dash dash gen","archived":false,"fork":false,"pushed_at":"2024-06-01T01:23:25.000Z","size":753,"stargazers_count":506,"open_issues_count":7,"forks_count":73,"subscribers_count":2483,"default_branch":"master","last_synced_at":"2025-05-02T10:03:08.595Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/uber.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":"2015-04-10T20:06:22.000Z","updated_at":"2025-04-27T18:55:44.000Z","dependencies_parsed_at":"2024-06-18T15:15:38.174Z","dependency_job_id":null,"html_url":"https://github.com/uber/grafana-dash-gen","commit_stats":{"total_commits":177,"total_committers":29,"mean_commits":6.103448275862069,"dds":0.7570621468926554,"last_synced_commit":"e5e58b0f5f34e6c9c7d59e3d66fa66e59ba3c861"},"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uber%2Fgrafana-dash-gen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uber%2Fgrafana-dash-gen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uber%2Fgrafana-dash-gen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uber%2Fgrafana-dash-gen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/uber","download_url":"https://codeload.github.com/uber/grafana-dash-gen/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253900623,"owners_count":21981274,"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":"2024-08-01T15:03:28.490Z","updated_at":"2025-05-15T13:07:24.783Z","avatar_url":"https://github.com/uber.png","language":"JavaScript","funding_links":[],"categories":["Monitoring","JavaScript"],"sub_categories":["Grafana"],"readme":"# Grafana Dash Gen\n\n[![Node.js CI](https://github.com/uber/grafana-dash-gen/actions/workflows/node.js.yml/badge.svg)](https://github.com/uber/grafana-dash-gen/actions/workflows/node.js.yml)\n\nA collection of utility classes to construct and publish grafana graphs. The library is built ground up to incorporate grafana terminologies. \n\n- **Dashboard**: Represents the final dashboard that is displayed.\n- **Row**: A row in grafana. Dashboard consists or many rows.\n- **Panel**: A visual display item. A panel could be a graph, single stat or others. A row consists of many panels.\n- **Target**: A dot separated graphite string. E.g, a.b.count. A Panel consists of many targets.\n- **Annotations**: Lined markers that will annotate a graph (panel). A Dashboard can have annotations added to it. \n- **Templates**: Variables that can be included in the state. E.g, a.$dc.b.count (to switch between datacenters). A Dashboard can have templates added to it. \n\n![Alt text](/grafana.png?raw=true \"Optional Title\")\n\n## Code to generate the dashboard\n\nYou will be able to generate and publish a grafana graph using the following steps. \n\n#### Step 1: Configure grafana \nif you would like grafana to publish your dashboard you need this step. If you do not need grafana to publish your dashboard, you can skip this step. \n```js\nconst grafana = require('grafana-dash-gen');\nconst Row = grafana.Row;\nconst Dashboard = grafana.Dashboard;\nconst Panels = grafana.Panels;\nconst Target = grafana.Target;\nconst Templates = grafana.Templates;\nconst Alert = grafana.Alert;\nconst Condition = grafana.Condition;\n\ngrafana.configure({\n\turl: 'https://your.grafana.com/elasticsearch/grafana-dash/dashboard/',\n\tcookie: 'auth-openid=someidhere'\n});\n```\n#### Step 2: Create a dashboard\n```js\nconst dashboard = new Dashboard({\n\ttitle: 'Api dashboard'\n});\n```\n(or) Below is an example of a dashboard with a custom slug, templates `dc` and `smoothing` and annotations.\n```js\n const dashboard = new Dashboard({\n \ttitle: 'Api dashboard',\n \tslug: 'api',\n \ttemplating: [{\n \t\tname: 'dc',\n \t\toptions: ['dc1', 'dc2']\n \t}, {\n \t\tname: 'smoothing',\n \t\toptions: ['30min', '10min', '5min', '2min', '1min']\n \t}],\n \tannotations: [{\n \t\tname: 'Deploy',\n \t\ttarget: 'stats.$dc.production.deploy'\n \t}]\n });\n```\n\nIf you do not wish to have any templates and annotations\n\n#### Step 3: Create a new row\nAs said abolve, grafana dashboard contains a number of rows. \n```js\nconst row = new Row();\n```\n\n#### Step 4: Create graphs to add to the row\nThere are two ways to add the graph to a row. Pass it while a graph is created as below\n```js\nconst panel = new Panels.Graph({\n\ttitle: 'api req/sec',\n\tspan: 5, \n\ttargets: [\n\t\tnew Target('api.statusCode.*').\n\t\t\t\t\ttransformNull(0).sum().hitcount('1seconds').scale(0.1).alias('rps')\n\t],\n\trow: row,\n\tdashboard: dashboard\n});\n```\n\n(or) add it in a separate step\n```js\nconst panel = new Panels.Graph({\n\ttitle: 'api req/sec',\n\tspan: 5,\n\ttargets: [\n\t\tnew Target('api.statusCode.*').\n\t\t\t\t\ttransformNull(0).sum().hitcount('1seconds').scale(0.1).alias('rps')\n\t]\n});\nrow.addPanel(panel);\n```\n\nIf you would like to create a full width single stat (as in the image) the code is below. Notice how we create a new row on the fly. \n```js\nconst requestVolume = new Panels.SingleStat({\n\ttitle: 'Current Request Volume',\n\tpostfix: 'req/sec',\n\ttargets: [\n\t\tnew Target('stats.$dc.counts').\n\t\t\t\tsum().scale(0.1)\n\t],\n\trow: new Row(),\n\tdashboard: dashboard\n});\n```\n\n#### Step 5: Create an alert and add it to the graph\n_Alerts are optional_. An alert is set on a target, each target added to the panel receives a refId of 'A', 'B', ..., 'Z'.\n```js\nconst conditionOnRequestLowVolume = new Condition()\n        .onQuery('A')\n        .withEvaluator(1, 'lt')\n        .withReducer('max');\n\nconst alert = new Alert({ name: 'Low volume of requests' });\nalert.addCondition(conditionOnRequestLowVolume);\n\n// OR \n\nconst alert = new Alert({ name: 'Low volume of requests' })\n        .addCondition(conditionOnRequestLowVolume);\n\nrequestVolume.addAlert(alert);\n```\n\nIt is also possible to add an alert by passing it to the Graph constructor\n```js\nconst graphWithAnAlert = new Graph({ alert: YOUR_ALERT_OBJECT });\n```\n\n#### Step 6: Publish the graph\n```js\ngrafana.publish(dashboard);\n```\n\nto generate the json and not publish use\n\n```js\nconsole.log(JSON.stringify(dashboard.generate()));\n```\n\n**A complete example of a dashboard is provided in example.js**\n\n\n-----\n\n## Installation\n\n`npm install grafana-dash-gen`\n\n## Tests\n\n`npm test`\n\n## Contributors\n\n - Evan Culver\n - Madan Thangavelu\n\n## MIT Licenced\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuber%2Fgrafana-dash-gen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fuber%2Fgrafana-dash-gen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuber%2Fgrafana-dash-gen/lists"}