{"id":14990170,"url":"https://github.com/thewebkid/lit-gauge","last_synced_at":"2026-01-05T02:14:29.575Z","repository":{"id":209103672,"uuid":"723245092","full_name":"thewebkid/lit-gauge","owner":"thewebkid","description":"A fully customizable gauge web component. Add it to a dashboard!","archived":false,"fork":false,"pushed_at":"2024-02-04T00:49:12.000Z","size":384,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-26T19:40:27.523Z","etag":null,"topics":["gauge","gauges","lit","threshold","webcomponent"],"latest_commit_sha":null,"homepage":"https://thewebkid.com/modules/lit-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/thewebkid.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":"2023-11-25T03:48:21.000Z","updated_at":"2023-11-28T01:34:13.000Z","dependencies_parsed_at":"2023-11-25T05:19:10.582Z","dependency_job_id":"c204116e-f0a3-43be-9968-da2fe2f2afda","html_url":"https://github.com/thewebkid/lit-gauge","commit_stats":{"total_commits":25,"total_committers":1,"mean_commits":25.0,"dds":0.0,"last_synced_commit":"7fffb130912782605f8064eb90a2ab0d5e88c76c"},"previous_names":["thewebkid/lit-gauge"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thewebkid%2Flit-gauge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thewebkid%2Flit-gauge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thewebkid%2Flit-gauge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thewebkid%2Flit-gauge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thewebkid","download_url":"https://codeload.github.com/thewebkid/lit-gauge/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244882153,"owners_count":20525808,"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":["gauge","gauges","lit","threshold","webcomponent"],"created_at":"2024-09-24T14:19:39.097Z","updated_at":"2026-01-05T02:14:29.518Z","avatar_url":"https://github.com/thewebkid.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \\\u003clit-gauge\u003e [![npm version](https://badge.fury.io/js/lit-gauge.svg)](https://badge.fury.io/js/lit-gauge) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\u003cimg alt=\"Four Lit Gauge Implementation Examples\" src=\"https://thewebkid.com/lit-gauges.png\" width=600\u003e\nA snazzy gauge web component to visualize telemetry. Roll/style your own gauge at the link below:\n\n[Live demo and configuration / style editor](https://thewebkid.com/modules/lit-gauge/)\n\nSince this is a [Lit 3 web component](https://lit.dev/), this will work inside any SPA framework. Read the [React integration docs](https://lit.dev/docs/frameworks/react/). Framework-agnostic web components are the future! \n\n## Installation\n\n```bash\nnpm i lit-gauge\n```\n\n## Usage Examples\nHere are examples using declarative inline attributes. These correspond to the gauges displayed in the screenshot. Styling examples are near the bottom of the readme.\n\n```html\n\u003cscript type=\"module\"\u003e\n  import {LitGauge} from 'lit-gauge';\n\u003c/script\u003e\n\u003clit-gauge\n  id=\"lg1\" size=\"150\"\n  scaleValues=\"0,8,20,65,80,90,100\" \n  scaleColors=\"#0909FB,#5D73CB,#375a7f,#444,#777,#999\"\n  ticks=\"5\" minorTicks=\"5\" \n  value=\"40\" valuePrecision=\"1\"\n\u003e\u003c/lit-gauge\u003e\n\n\u003clit-gauge\n  id=\"lg2\" size=\"250\"\n  scaleColors=\"blue,aqua,green,yellow,red\"\n  fluidcolors=\"true\" ticks=\"10\" minorTicks=\"5\" \n  value=\"60\" label=\"AMPS\"\n  valuePrecision=\"1\"\n\u003e\u003c/lit-gauge\u003e\n\n\u003clit-gauge\n  id=\"lg3\" size=\"250\" fluidcolors=\"true\"\n  scaleValues=\"25000,40000,55000,65000,70000,75000\"\n  scaleColors=\"#000,#ccc,#D85F03,#a00,#ff7b7b\"\n  ticks=\"thresholds\" value=\"60\" label=\"RPM\"\n  tickLabels=\"25k,35k,45k,55k,65k,75k\"\n  valuePrecision=\"0\" setDynamicOuterColor=\"true\"\n\u003e\u003c/lit-gauge\u003e\n\n\u003clit-gauge\n  id=\"lg4\" size=\"200\"\n  scaleValues=\"0,5,20,65,80,90,100\" \n  scaleColors=\"#0909FB,#6BA1FF,#375a7f,#444,#777,#999\"\n  plain=\"true\" ticks=\"5\" minorTicks=\"5\" \n  value=\"40\" valuePrecision=\"1\"\n\u003e\u003c/lit-gauge\u003e \n```\n## Usage with single options object\n```html\n\u003clit-gauge /\u003e\n\u003cscript type='module'\u003e\n  import {LitGauge} from 'lit-gauge';\n\n  let g = document.querySelector('lit-gauge');\n  g.options = {\n    scaleValues: [50, 60, 70, 115, 130, 150],\n    scaleColors: ['midnightblue','blue','green','yellow','rgba(255,0,0,1)'],\n    ticks: 10, minorTicks: 5,\n    fluidColors: false, plain: true, \n    valuePrecision: 1\n  }\n\u003c/script\u003e\n```\n## Attributes\n- **size**: _Number_ - Sets the height and width of the component. This component is square. It starts to look bad below 150px.\n- **scaleValues**: _String_ - `(scaleValues=\"0,10,50,90,100\")` Sets the value ranges that will correspond with the color thresholds.\n- **scaleColors**: _String_ - `(scaleColors=\"#333,green,yellow,red\")` Sets the colors that fill each value range. Must be exactly one value less than the scaleValues attrib. If you set a `scaleValue=0,10,20,30` then you have created 3 ranges (thresholds) that require a color. scaleColors=#333,#888,#ccc would set 0-10 to #333, 10-20 to #888, and 20-30 to #ccc. Use any valid css color string for each value.  \n- **fluidColors**: _Boolean_ - Shows a fluid gradient instead of hard stops for the color ranges.\n- **ticks**: _String_ - `(ticks=\"10\")` Accepts either a numeric divisor (represents the total count of ranges created by the tick marks), or a csv value string representing custom value positions to place ticks (minor ticks will be disabled). Optionally you can enter `ticks=\"thresholds\"` to place ticks on the scaleValues attrib values. The tick mark total will be one greater than the value you enter since the ranges are bounded on both sizes by marks.\n- **minorTicks**: _Number_ - `(minorTicks=\"5\")` Available only when ticks is a numeric value. Subdivides each tick range by the specified value.\n- **tickLabels**: _String_ - `(tickLabels=\"0%,20%,50%,100%\")`Override the generated numeric tick values with a CSV string.\n- **value**: _Number_ - `(value=runtimeValue)` The runtime value that positions the needle and sets the runtime color value. \n- **label**: _String_ - `(label=\"Volts\")` The runtime label to display below the value. If unspecified, the value moves upwards. This should be a short, succinct label.\n- **plain**: _Boolean_ - Overrides the lighted glassy appearance. Uses a flat look. You can also do this with the css variables shown below.\n- **valuePrecision** _Int_ - For readability the label displays value.toFixed(decimalPrecision). If you have a suggestion for large numbers, please open an issue and share! \n\n\n## Styling\nCSS vars to set custom colors and appearance. Below are the default values. Use the [online editor](https://thewebkid.com/modules/lit-gauge/) to generate your own theme.\n```html\n\u003cstyle\u003e\nlit-gauge{\n  --font-fam: Roboto, -apple-system, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif;\n  --outer-color:#444;//this is the outermost background ring\n  /*outer-lighting is the lighting effect on the outer band. Uses a conic semi-opaque gradient overlay.*/\n  --outer-lighting-effect:conic-gradient(from 180deg at 50.0% 50.0%,\n    rgba(0,0,0,0) 98.00deg,\n    rgba(255,255,255,0.3) 103.00deg,\n    rgba(255,255,255,0.5) 180.00deg,\n    rgba(255,255,255,0.3) 257.00deg,\n    rgba(0,0,0,0) 265.00deg\n  );\n  \n  /* styles for the label at the bottom center*/\n  --label-bg: #000; /*  the label that shows the current value inside*/\n  --label-color:#fff; /*  font color of the label*/\n  --label-min-width:3em; /*  customize to your value so the container does not jiggle when updating the value*/\n  \n  /*  ticks/label styles*/\n  --tick-color:#fff; /* the tick line color*/\n  --tick-label-color:#fff;/*  the outer numeric tick label colors*/\n  --tick-label-shadow:0 1px 1px black;/* shadow to apply to the tick-labels to enhance visibility*/\n  \n  /* dial styles*/\n  --dial-background:rgb(22,22,22);/* the main inner color*/\n  --dial-gradient:none;/* you can play with gradients to create your own lighting effect*/\n  --dial-shadow: 0 0 1em .25em rgba(122,122,122,.8), inset 0 0 2em #bbb;/* used to enhance the space between the color thresholds.*/\n  --dial-border-width: 1px;/* the dial border is where the outer ring meets the color threshold bands*/\n  --dial-border-color:#111;\n  --hand-color: #ddd; /* the needle color*/\n}\n\u003c/style\u003e\n```\n\n## Styling examples\nThese are the styles used to create the example screenshot in sequence\n```html\n\u003clink rel=\"stylesheet\"\n      href=\"https://fonts.googleapis.com/css2?family=Mina\u0026family=Jost\u0026family=Outfit\u0026family=Kalam\"\u003e\n\u003cstyle\u003e    \n    #lg1{\n      --outer-color: #000;\n      --hand-color: white;\n      --dial-background: black;\n    }\n    #lg2{\n      --font-fam: Jost;\n      --hand-color: #ccc;\n      --dial-background: black;\n      --dial-shadow:none;\n    }\n    #lg3{\n      --font-fam: Mina;\n      --outer-color: #400;\n      --dial-background: black;\n      --dial-gradient: radial-gradient(200px at 50.0% 10.0%,\n        rgba(55, 55, 55, 1) 15%,\n        rgba(0, 0, 0, 1) 70%,\n        rgba(0, 0, 0, 0) 100%\n      );\n      --hand-color: #B4080E;\n      --dial-border-width: 2px;\n      --tick-label-shadow: 0 1px 2px black;\n      --dial-shadow: inset 0 -10px 30px #444;\n    }\n    #lg4{\n      --font-fam: Kalam;\n      --outer-color: transparent;\n      --label-color: black;\n      --dial-background: #fff;\n      --dial-shadow: none;\n      --tick-color: black;\n      --tick-label-color: white;\n      --hand-color: #333;\n      --tick-label-shadow: 0 1px 1px black;\n      --label-bg: #ccc;\n    }\n  \u003c/style\u003e\n```\n\n## Run local\nUses vite. Will run on node 16+ - but will complain about compatibility if you are stuck on node 16 like me. Ignore this. It's fine.\n```bash\ngit clone https://github.com/thewebkid/lit-gauge.git\ncd ./lit-gauge\nnpm i\nnpm dev\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthewebkid%2Flit-gauge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthewebkid%2Flit-gauge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthewebkid%2Flit-gauge/lists"}