{"id":24206561,"url":"https://github.com/andyg2/wp-gauges","last_synced_at":"2025-06-25T14:34:07.754Z","repository":{"id":270656548,"uuid":"911054779","full_name":"andyg2/wp-gauges","owner":"andyg2","description":null,"archived":false,"fork":false,"pushed_at":"2025-01-02T07:19:09.000Z","size":392,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-14T00:35:40.282Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/andyg2.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","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":"2025-01-02T06:21:58.000Z","updated_at":"2025-01-02T07:19:12.000Z","dependencies_parsed_at":"2025-01-02T07:35:37.652Z","dependency_job_id":"7aed959a-794e-4639-9e8e-6ae303cc0aba","html_url":"https://github.com/andyg2/wp-gauges","commit_stats":null,"previous_names":["andyg2/wp-gauges"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andyg2%2Fwp-gauges","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andyg2%2Fwp-gauges/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andyg2%2Fwp-gauges/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andyg2%2Fwp-gauges/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andyg2","download_url":"https://codeload.github.com/andyg2/wp-gauges/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241678156,"owners_count":20001682,"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":"2025-01-14T00:34:23.850Z","updated_at":"2025-03-03T14:13:24.994Z","avatar_url":"https://github.com/andyg2.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WP Gauges\n\nA WordPress plugin for creating animated gauges using simple shortcodes. Perfect for displaying metrics, progress indicators, or any numerical data in an engaging visual format.\n\n![WP Gauges Preview](assets/images/wp-gauges-preview.png)\n\n![WP Gauges Download](https://github.com/andyg2/wp-gauges/raw/refs/heads/main/wp-gauges.zip)\n\n## Features\n\n- 🎯 Radial gauges with customizable appearance\n- 🎨 Color-coded sections for different value ranges\n- ⚡ Smooth animations\n- 📱 Fully responsive design\n- 🛠️ User-friendly shortcode generator\n- 🎮 Live preview while configuring\n- 🎯 Customizable tick marks and values\n- 🎨 Flexible color schemes\n\n## Installation\n\n1. Download the plugin from WordPress.org or clone this repository\n2. Upload the `wp-gauges` folder to your `/wp-content/plugins/` directory\n3. Activate the plugin through the 'Plugins' menu in WordPress\n4. Access the shortcode generator via WP Gauges in your WordPress admin menu\n\n## Usage\n\n### Quick Start\n\nThe simplest way to create a gauge is to use the built-in shortcode generator:\n\n1. Go to WordPress Admin → WP Gauges\n2. Configure your gauge using the visual interface\n3. Click \"Generate Shortcode\"\n4. Copy the generated shortcode and paste it into your post or page\n\n### Manual Shortcode Configuration\n\nYou can also create gauges manually using the `[gauge]` shortcode. Here's the basic syntax without colors:\n\n```text\n[gauge title=\"Speed\" units=\"mph\" min=\"0\" max=\"100\" animateto=\"65\" ticks=\"0 10 20 30 40 50 60 70 80 90 100\"]\n```\n\n### Available Parameters\n\n| Parameter | Description | Default | Example |\n|-----------|-------------|---------|---------|\n| title | The gauge title | \"Title\" | title=\"Speed\" |\n| units | Units to display | \"units\" | units=\"mph\" |\n| titletag | HTML tag for title | \"h2\" | titletag=\"h3\" |\n| titlecol | Title color | \"black\" | titlecol=\"#444444\" |\n| ticks | Space-separated tick values | \"0 2 4 6 8 10\" | ticks=\"0 25 50 75 100\" |\n| min | Minimum value | 0 | min=\"0\" |\n| max | Maximum value | 10 | max=\"100\" |\n| initial | Starting value | 0 | initial=\"20\" |\n| animateto | Target value for animation | 5 | animateto=\"75\" |\n| green | Green range (format: \"start end\") | - | green=\"0 30\" |\n| yellow | Yellow range (format: \"start end\") | - | yellow=\"30 60\" |\n| orange | Orange range (format: \"start end\") | - | orange=\"60 80\" |\n| red | Red range (format: \"start end\") | - | red=\"80 100\" |\n\n### Color Ranges\n\nYou can define up to four color-coded ranges on your gauge:\n\n```text\n[gauge title=\"Temperature\" units=\"°C\" ticks=\"0 10 20 30 40 50 60 70 80 90 100\" min=\"0\" max=\"100\" green=\"0 30\" yellow=\"30 60\" orange=\"60 80\" red=\"80 100\" animateto=\"75\"]\n```\n\n### Examples\n\n1. **Basic Speedometer**\n\n```text\n[gauge title=\"Speed\" units=\"mph\" min=\"0\" max=\"120\" ticks=\"0 20 40 60 80 100 120\" animateto=\"65\"]\n```\n\n2. **Temperature Gauge with Color Ranges**\n\n```text\n[gauge title=\"Temperature\" units=\"°C\" min=\"0\" max=\"100\" ticks=\"0 20 40 60 80 100\" green=\"0 30\" yellow=\"30 60\" orange=\"60 80\" red=\"80 100\" animateto=\"75\"]\n```\n\n3. **Progress Indicator**\n\n```text\n[gauge title=\"Progress\" units=\"%\" min=\"0\" max=\"100\" ticks=\"0 25 50 75 100\" green=\"75 100\" yellow=\"50 75\" orange=\"25 50\" red=\"0 25\" animateto=\"82\"]\n```\n\n## Customization Tips\n\n### Styling the Title\n\n- Use `titletag` to match your theme's heading hierarchy\n- Adjust `titlecol` to match your theme's color scheme\n\n### Creating Effective Ranges\n\n- Use color ranges that make sense for your data\n- Consider using fewer ranges for simpler visuals\n- Ensure ranges don't overlap\n- Use ranges that align with your tick marks\n\n### Animation\n\n- Set `initial` to start from a specific value\n- Use `animateto` for the target value\n- Remove `animateto` to create a static gauge\n\n## Frequently Asked Questions\n\n### Can I have multiple gauges on the same page?\n\nYes! You can add as many gauges as you need using different shortcodes.\n\n### Does it work with page builders?\n\nYes, the shortcode works with most popular page builders including Elementor, Divi, and WPBakery Page Builder.\n\n### Can I change the size of the gauge?\n\nThe gauge automatically adjusts to its container width while maintaining aspect ratio.\n\n### How can I remove the animation?\n\nSimply omit the `animateto` parameter, and the gauge will remain static at the initial value.\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## License\n\nThis project is licensed under the GPL-2.0+ License - see the [LICENSE.txt](LICENSE.txt) file for details.\n\n## Credits\n\nCreated by [Andy Gee](https://dgte.pro)\nBased on [Canvas Gauges](https://canvas-gauges.com/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandyg2%2Fwp-gauges","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandyg2%2Fwp-gauges","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandyg2%2Fwp-gauges/lists"}