{"id":13636986,"url":"https://ashish-chopra.github.io/angular-gauge/","last_synced_at":"2025-04-19T08:33:40.661Z","repository":{"id":57179924,"uuid":"69453605","full_name":"ashish-chopra/angular-gauge","owner":"ashish-chopra","description":"A reusable gauge directive for Angular 1.x apps and dashboards","archived":false,"fork":false,"pushed_at":"2018-09-13T16:03:05.000Z","size":580,"stargazers_count":95,"open_issues_count":19,"forks_count":36,"subscribers_count":11,"default_branch":"master","last_synced_at":"2024-10-30T06:40:31.595Z","etag":null,"topics":["angularjs","angularjs-directives","dashboard-widget","directives","gauge","ui-components"],"latest_commit_sha":null,"homepage":"https://ashish-chopra.github.io/angular-gauge/","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/ashish-chopra.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-09-28T10:43:09.000Z","updated_at":"2023-12-26T15:15:22.000Z","dependencies_parsed_at":"2022-09-09T13:20:50.080Z","dependency_job_id":null,"html_url":"https://github.com/ashish-chopra/angular-gauge","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ashish-chopra%2Fangular-gauge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ashish-chopra%2Fangular-gauge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ashish-chopra%2Fangular-gauge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ashish-chopra%2Fangular-gauge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ashish-chopra","download_url":"https://codeload.github.com/ashish-chopra/angular-gauge/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223266825,"owners_count":17116493,"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":["angularjs","angularjs-directives","dashboard-widget","directives","gauge","ui-components"],"created_at":"2024-08-02T00:01:08.916Z","updated_at":"2024-11-09T06:31:04.558Z","avatar_url":"https://github.com/ashish-chopra.png","language":"JavaScript","funding_links":[],"categories":["Packages for Angular"],"sub_categories":["Angular-Guage"],"readme":"# angular-gauge\n\n[![npm version](https://badge.fury.io/js/angularjs-gauge.svg)](https://badge.fury.io/js/angularjs-gauge)\n[![Build Status](https://travis-ci.org/ashish-chopra/angular-gauge.png?branch=master)](https://travis-ci.org/ashish-chopra/angular-gauge)\n[![peerDependencies Status](https://david-dm.org/ashish-chopra/angular-gauge/peer-status.svg)](https://david-dm.org/ashish-chopra/angular-gauge?type=peer)\n[![devDependencies Status](https://david-dm.org/ashish-chopra/angular-gauge/dev-status.svg)](https://david-dm.org/ashish-chopra/angular-gauge?type=dev)\n[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/dwyl/esta/issues)\n\nA reusable gauge directive for Angular 1.x apps and dashboards. It provides many configurationable options to customize according to your needs. Checkout the live demo [here](https://ashish-chopra.github.io/angular-gauge).\n\nIf you are looking for Gauge Component for Angular 4 and beyond, checkout [ngx-gauge](https://github.com/ashish-chopra/ngx-gauge).\n\n![alt text](https://raw.githubusercontent.com/ashish-chopra/angular-gauge/master/examples/examples.png)\n\n**NOTE: In angular-gauge 2.x, some breaking changes have been introduced. If you are upgrading from `v1.x.x` version to `v2.x.x` then checkout the [Upgrade Guide](#upgrade-guide) first.**\n\n# Usage\n\n### Install using npm\n\n```\nnpm install angularjs-gauge\n```\n### Install using Bower\n\n```\nbower install angularjs-gauge\n```\n\n### Install manually\n\n```\ngit clone https://github.com/ashish-chopra/angular-gauge.git\n```\n\nCopy the files from `dist/` manually into your project folder.Then, add the script to your code (after adding the dependency of Angular 1.5) and resolving the paths as given below:\n\n```html\n\u003chead\u003e\n  ...\n\u003chead\u003e\n\u003cbody\u003e\n  ...\n\u003c/body\u003e\n  \u003cscript src=\"vendor/angular/angular.min.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"vendor/angularjs-gauge/dist/angularjs-gauge.min.js\"\u003e\u003c/script\u003e\n```\n\nAdd as dependency in your module\n\n```js\nangular.module('yourApp', ['angularjs-gauge']);\n```\nUse it in your HTML markup like this\n\n```html\n\u003cng-gauge size=\"200\" type=\"full\" thick=\"5\" min=\"0\" max=\"120\" value=\"68.2\" cap=\"round\" label=\"Speed\"  foreground-color=\"#ffcc66\" background-color=\"rgba(255,255,255, 0.4)\" append=\"mph\"\u003e\u003c/ng-gauge\u003e\n```\n\nIf you face any problem, then raise an issue [here](https://github.com/ashish-chopra/angular-gauge/issues).\n\n# Config Options\n\nThere are plenty of configurable options available to tune the `Gauge` as per your needs.\n\n| Name      | Description  | Required  | Default value  | Possible values |\n| ---       | ---          | ---       | ---               | ---            |\n| `size`    | Specifies the size of the canvas in which Gauge will be drawn. It is used as `width` and `height` both. | No       | `200` | Positive Integer           |\n| `type`      | Specifies the gauge's type.                     | No        | `\"full\"`     |  `\"full\"`, `\"semi\"`, `\"arch\"`  |\n| `min`  | Specifies the minimum numeric value for gauge's scale.  | No     | `0`  | Any numeric value  |\n| `max` | Specified the maximum numeric value for gauge's scale. | No       | `100`  | Any numeric value  |\n| `value`          | Specifies the current value of the Gauge in the range specified by `min` and `max`. It is a required attribute.       | Yes       | `undefined`  | Any numeric value |\n| `cap`       | The style of line ending at the gauge's end.    | No        | `\"butt\"`    | `\"round\"`, `\"butt\"`           |\n| `thick`        | Specified the thickness of the gauge's bar.            | No        | `6`        | Any Positive Integer |\n| `label`       | Specifies the text to display below the Gauge's reading.  | No  | `undefined`                | Any String           |\n| `foreground-color`         | Specifies the foreground color of the Gauge's scale.                    | No       | `rgba(0, 150, 136, 1)`             |   Any color value string       |\n| `background-color`    | Specifies the background color of the Gauge's scale.| No        |    `rgba(0, 0, 0, 0.1)`           |    Any color value string        |\n| `append`   | Specifies a `string` appended to the Gauge's reading. For example `\"%\"` most commonly used. | No        | `undefined`        | Any string           |\n| `prepend`      | Specifies a `string` prepended to the Gauge's reading. For example `\"$\"` in case of financial data displayed in Gauge.                                        | No        | `undefined`            | Any String           |\n| `duration`    | Specifies the duration (in milliseconds) of the Gauge's animation | No       | `1500` | Positive Integer           |\n| `thresholds` | Specifies an object of threshold values at which the gauge's color changes. Checkout an example [here](#configure-threshold-color-ranges).  | No |  `none` | {} |\n| `label-only` | Only label specified by `label` attribute is shown, when set to `true`. | No | `false` | `true`, `false` |\n| `fraction-size` | Number of decimal places to round the number to. If this is not provided then the fraction size is computed from the current locale's number formatting pattern. | No | `none` | Positive Integer |\n\n# Global Defaults\n\nangular-gauge ships with a provider to globally set config options for all gauge instances used in the application during angular config phase. You can specify `ngGaugeProvider` dependency during `config` phase. It supports a single API to set config options:\n\n```js\nngGaugeProvider.setOptions(customOptions);\n```\n\nHere, `customOptions` is an object `{}` where keys are the configOptions name (in camelCase notation), mentioned in above section. For example, let see how to set `size`, `cap`, `thick`, `foreground-color` and `background-color` options  globally using provider as shown below:\n\n```js\n\nangular\n  .module('myApp', ['angularjs-gauge'])\n  .config(configApp);\n\n  configApp.$inject = ['ngGaugeProvider'];\n  function configApp(ngGaugeProvider) {\n\n    // setting the default parameters for\n    // gauge instances globally.\n    ngGaugeProvider.setOptions({\n        size: 250,\n        cap: 'round',\n        thick: 15,\n        foregroundColor: \"#ff8645\",   // note the camelCase notation for parameter name\n        backgroundColor: \"#e4e4e4\"\n    });\n\n  }\n\n```\n\n## Configure Threshold Color Ranges\n\nYou can customize the colors of the gauge based on the current value being shown. This feature is introduced in `v2.1.0`. Make sure to update your local copy before using this feature. \n\nIn order to show different colors when gauge crosses certain value, use property `thresholds`. It takes an object with the threshold value  as `key` and an object with `color` property as `value`. For example: \n\n```js\n....\n\nvar threshold = {\n  '0': {color: 'green'},\n  '40': {color: 'orange'},\n  '75.5': {color: 'red'}\n};\n\n....\n\n```\n\n```html\n\u003cng-gauge ...  thresholds=\"threshold\"\u003e\u003c/ng-gauge\u003e\n```\nThe keys in the threshold object signifies the minimum value at which the color will be applied. For instance, if the gauge's current value is `53.2`, then orange color will be applied because after point `40` every value will be displayed as `orange`, until next threshold is encountered. In this example `75.5` is the next threshold.\n\n# Playground\n\nThe examples section is redesigned as a playground where you can play with Gauge by tuning its different parameters. \nAnd, you can see the result live on-screen. It is good start to get familiar with Gauge.\n\n![alt text](https://raw.githubusercontent.com/ashish-chopra/angular-gauge/master/examples/playground.png)\n\n# Upgrade Guide\n\nIf you are upgrading from angular-gauge 1.x version to any version in 2.x family, then make sure to read the release notes of the chosen version on the [Releases](https://github.com/ashish-chopra/angular-gauge/releases) section.\n\nFollowing are the breaking changes introduced in 2.x.x onwards:\n1. `used` and `total` attributes are removed.\n2. `min` and `max` attributes are introduced which works with `value` attribute. Checkout [config options](#config-options) to know more about their usage.\n\n\n# Contribute\n\nThe project is continously evolving with every new release. Give it a star, if you like it. For contribution, setup the development environment as follows:\n\n1. clone and setup the project dependencies\n\n```shell\n$\u003e git clone https://github.com/ashish-chopra/angular-gauge.git\n$\u003e npm install\n```\n\n2. Use following commands based on what you'd like to do:\n\n```shell\n$\u003e npm start             # starts the server at port 3000 and hosts the `/examples` directory.\n$\u003e npm test              # runs test suite once and exit.\n$\u003e npm run test:watch    # starts the test framework and watch for changes in code.\n$\u003e npm run build         # triggers a manual build for library, outputs at `/dist` directory.\n```\n\n3. To add a new feature or fix a bug, make sure to create a new branch from `master`.\n\n\nFirst thing first, explore the [issue tracker](https://github.com/ashish-chopra/angular-gauge/issues) to find something to contribute. There are tons of other project setup related issues and activities in which you can help. Your feedback could also be a great contribution.\n\nIf you face any problem, then raise an issue [here](https://github.com/ashish-chopra/angular-gauge/issues).\n\n# License\n\n[MIT License](https://github.com/ashish-chopra/angular-gauge/blob/master/LICENSE)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/ashish-chopra.github.io%2Fangular-gauge%2F","html_url":"https://awesome.ecosyste.ms/projects/ashish-chopra.github.io%2Fangular-gauge%2F","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/ashish-chopra.github.io%2Fangular-gauge%2F/lists"}