{"id":21630478,"url":"https://github.com/hawkular/hawkular-charts","last_synced_at":"2025-10-04T06:35:23.142Z","repository":{"id":26771909,"uuid":"30229944","full_name":"hawkular/hawkular-charts","owner":"hawkular","description":null,"archived":false,"fork":false,"pushed_at":"2017-08-17T22:01:47.000Z","size":3444,"stargazers_count":10,"open_issues_count":2,"forks_count":15,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-08-08T17:18:06.245Z","etag":null,"topics":[],"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/hawkular.png","metadata":{"files":{"readme":"README.adoc","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}},"created_at":"2015-02-03T07:06:36.000Z","updated_at":"2020-12-02T18:43:10.000Z","dependencies_parsed_at":"2022-08-22T04:40:33.339Z","dependency_job_id":null,"html_url":"https://github.com/hawkular/hawkular-charts","commit_stats":null,"previous_names":[],"tags_count":94,"template":false,"template_full_name":null,"purl":"pkg:github/hawkular/hawkular-charts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hawkular%2Fhawkular-charts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hawkular%2Fhawkular-charts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hawkular%2Fhawkular-charts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hawkular%2Fhawkular-charts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hawkular","download_url":"https://codeload.github.com/hawkular/hawkular-charts/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hawkular%2Fhawkular-charts/sbom","scorecard":{"id":457829,"data":{"date":"2025-08-11","repo":{"name":"github.com/hawkular/hawkular-charts","commit":"9776093a585bf7339a5a5099c4811be24e2bd7b1"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.2,"checks":[{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Code-Review","score":8,"reason":"Found 9/11 approved changesets -- score normalized to 8","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: Apache License 2.0: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 30 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"116 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-c75v-2vq8-878f","Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25","Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx","Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-p28h-cc7q-c4fg","Warn: Project is vulnerable to: GHSA-9vvw-cc9w-f27h","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-hr2v-3952-633q","Warn: Project is vulnerable to: GHSA-h6ch-v84p-w6p9","Warn: Project is vulnerable to: GHSA-297x-8xj4-vcxv","Warn: Project is vulnerable to: GHSA-4859-gpc7-4j66","Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2","Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-j4f2-536g-r55m","Warn: Project is vulnerable to: GHSA-r7qp-cfhv-p84w","Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h","Warn: Project is vulnerable to: GHSA-qrmc-fj45-qfc2","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-9qj9-36jm-prpv","Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3","Warn: Project is vulnerable to: MAL-2023-462","Warn: Project is vulnerable to: GHSA-xf7w-r453-m56c","Warn: Project is vulnerable to: GHSA-q42p-pg8m-cqh6","Warn: Project is vulnerable to: GHSA-w457-6q6x-cgp9","Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f","Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p","Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv","Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8","Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65","Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh","Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44","Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988","Warn: Project is vulnerable to: GHSA-44pw-h2cw-w3vq","Warn: Project is vulnerable to: GHSA-jp4x-w63m-7wgm","Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-6x33-pw7p-hmpq","Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-7x7c-qm48-pq9c","Warn: Project is vulnerable to: GHSA-rc3x-jf5g-xvc5","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695","Warn: Project is vulnerable to: GHSA-fvqr-27wr-82fm","Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574","Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-82v2-mx6x-wq7q","Warn: Project is vulnerable to: GHSA-7px7-7xjx-hxm8","Warn: Project is vulnerable to: GHSA-x5pg-88wf-qq4p","Warn: Project is vulnerable to: GHSA-p9wx-2529-fp83","Warn: Project is vulnerable to: GHSA-5v2h-r2cx-5xgj","Warn: Project is vulnerable to: GHSA-rrrm-qjm4-v8hf","Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-wrvr-8mpx-r7pp","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-gwg9-rgvj-4h5j","Warn: Project is vulnerable to: GHSA-w9mr-4mfr-499f","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-q75g-2496-mxpp","Warn: Project is vulnerable to: GHSA-6fx8-h7jm-663j","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-6g33-f262-xjp4","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6","Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj","Warn: Project is vulnerable to: GHSA-fxwf-4rqh-v8g3","Warn: Project is vulnerable to: GHSA-25hc-qcg6-38wj","Warn: Project is vulnerable to: GHSA-xfhh-g9f5-x4m4","Warn: Project is vulnerable to: GHSA-qm95-pgcg-qqfq","Warn: Project is vulnerable to: GHSA-cqmj-92xf-r6r9","Warn: Project is vulnerable to: GHSA-2m39-62fm-q8r3","Warn: Project is vulnerable to: GHSA-mf6x-7mm4-x2g7","Warn: Project is vulnerable to: GHSA-j44m-qm6p-hp7m","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-g7q5-pjjr-gqvp","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-mgfv-m47x-4wqp","Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6","Warn: Project is vulnerable to: GHSA-g78m-2chm-r7qv","Warn: Project is vulnerable to: GHSA-5v72-xg48-5rpm","Warn: Project is vulnerable to: GHSA-72mh-269x-7mh5","Warn: Project is vulnerable to: GHSA-h4j5-c7cj-74xg","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh","Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-19T10:13:38.085Z","repository_id":26771909,"created_at":"2025-08-19T10:13:38.085Z","updated_at":"2025-08-19T10:13:38.085Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271229982,"owners_count":24722840,"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","status":"online","status_checked_at":"2025-08-19T02:00:09.176Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-11-25T02:11:09.134Z","updated_at":"2025-10-04T06:35:18.109Z","avatar_url":"https://github.com/hawkular.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"= http://github.com/hawkular/hawkular-charts[Angular 4+ Components for Metrics Visualization]\n\n__\"Legos for Metrics Visualization\"__\n\nThis project provides charting components (**Now with Angular 4 support**) for displaying custom visual representations of time series data as charts.\nIt uses http://d3js.org[D3] as its charting toolkit and tries to simplify creating advanced metrics visualizations\nwith Angular.io components\n\nWhile designed for use in the Hawkular UI console, it is a general purpose, metrics charting library designed to work with any array of data as long as it can be transformed into a tuple of datetime/value pairs.\n\n== About\n\nHawkular Charts is a direct result of wanting metric visualizations for the parent project:\nhttp://github.com/hawkular/hawkular[Hawkular] - _An Open Source\nMonitoring Tool_. The console in Hawkular uses these charting components and will further push the development\nof these charting components into the future with additional features and specialized chart types.\nThis will also make adhoc development quicker/easier with components that can render Hawkular Metrics (or any other metrics) charts with very little effort.\n\n\n== Development Quickstart\n\nThe quickest way to start using the charts is to use https://github.com/angular/angular-cli[angular-cli]. Make sure\nthat https://nodejs.org[Node.js version 6.x] is installed.\n\nTo provide a components library, this project follows https://github.com/robisim74/angular-library-starter[angular-library-starter] pattern.\n\nThen, from the _hawkular-charts_ root directory:\n\n`npm install \u0026\u0026 npm run build`\n\nTo test locally the npm package:\n\n`npm run pack-lib`\n\nThat will pack a tgz file that you can then use from a downstream app with `npm install [path]/hawkular-charts-[version].tgz`\n\n== Charts\n\n=== Chart Types\n\nChart types are set via the *chart-type* attribute of the *hk-metric-chart* directive.\nThe following chart types are available:\n\n* *line:* this is the default chart type if not specified and is recommended for most metrics display\n* *multiline:* specifically made for display multiple metrics in a singe graph\n\nNote: the following other types are not yet implemented as Angular 4+ components (they were in previous AngularJS directives)\n\n* *histogram:* histogram bar chart (used in Hawkular GC chart)\n* *area:* standard area chart with hawkular extensions\n* *scatter:* regular scatter plot supporting avg/high/low\n* *rhqbar:* http://rhq-project.github.io/rhq/[RHQ/JON] style graphs https://docs.jboss.org/author/display/RHQ/d3+Charts\n\nAll of the chart types are either in the process of being approved by Red Hat UxD, or have been approved.\n\n\n==== Metrics Chart\nimage::img/hawkular-metric-charts.png[Hawkular Metrics Chart Type]\n\n_Sample code for this chart:_\n\n[source,html]\n----\n\u003chk-metric-chart\n    raw-data=\"dataPoints\"\n    chart-type=\"line\"\n    alert-value=\"{{threshold}}\"\n    y-axis-units=\"Response Time (ms)\"\u003e\n\u003c/hk-metric-chart\u003e\n----\nNeed to update the chart? No problem, just alter the dataPoints array with new data and the chart will re-render itself.\nThrough custom attributes it is very easy to configure a custom chart just the way you want using advanced\ncapabilities that standard charting libraries don't provide.\nNeed to change the threshold alert value or chart-type just use Angular's two way binding to bind to a field on the\nscreen and watch the dynamics unfold.\n\n===== Forecasting Feature\nimage::img/forecast.png[Hawkular Metrics Chart with Forecasting]\n\nThe metrics chart has the ability to display forecasting (of data into the future) with the addition of the\n*forecastData* attribute. These future datapoints show in the chart as a dashed line. This data attribute uses the same\ndata format as *data* but only require *timestamp* and *value* fields.\nAdditionally, an optional *min* and *max* field can be added to display a confidence interval around the forecast\nvalues. The *forecastData* can provide as many or as little data points as desired (but the spacing\nbetween timestamps should be the same as with the *data* points to keep visual consistency.\n\n\n_Example:_\n[source,javascript]\n----\n  var myForecastData = [\n    {'timestamp': 1434480361167, 'value': 1780, 'min': 1740, 'max': 1790},\n    {'timestamp': 1434480511167, 'value': 1680, 'min': 1640, 'max': 1760}\n  ];\n----\n\n==== Event Timeline Chart\nimage::img/event-timeline.png[Event Timeline Chart Type]\n\nThe Event Timeline chart renders events along a timeline. In most timelines, the events would be laid out on a\nsingle horizontal axis. However, with many events clustering around the same point in time the event points start to\noverlap and hide one another. To eliminate this overlap, we lay out events in 5 horizontal slots to further give some\nbreathing room to event elements on the timeline[i.e., this means it would take more than 6 events at the same time to\noverlap one another.] Cluster of events can also be drilled into by just dragging a selection across the points of\ninterest and then only the time range of those points selected will be displayed.\n\n_Sample code for this chart:_\n\n[source,javascript]\n----\n\u003chk-timeline-chart\n  events=\"events\"\n  start-timestamp=\"{{timeline.startTime}}\"\n  end-timestamp=\"{{timeline.endTime}}\"\n/\u003e\n\n// Where events is TimelineEvent[] is:\n// ManageIQ External Management System Event\n  export class EmsEvent {\n    constructor(public timestamp: TimeInMillis,\n      public eventSource: string,\n      public provider: string,\n      public message?: string,\n      public resource?: string) {\n    }\n  }\n\n  /**\n   * TimelineEvent is a subclass of EmsEvent that is specialized toward screen display\n   */\n  export class TimelineEvent extends EmsEvent {\n    constructor(public timestamp: TimeInMillis,\n      public eventSource: string,\n      public provider: string,\n      public message?: string,\n      public resource?: string,\n      public formattedDate?: string,\n      public color?: string,\n      public row?: number,\n      public selected?: boolean) {\n      super(timestamp, eventSource, provider, message, resource);\n      this.formattedDate = moment(timestamp).format('MMMM Do YYYY, h:mm:ss a');\n      this.selected = false;\n    }\n----\n\n==== Availability Chart Type\nimage::img/avail-chart.png[Hawkular Availability Chart Type]\n\n_Sample code for this chart:_\n\n[source,javascript]\n----\n\u003chk-availability-chart data=\"vm.availabilityDataPoints\"\u003e\u003c/hk-availability-chart\u003e\n----\nThe availability chart makes it easy to visualize the availability types:\n\n* up\n* down\n* unknown (no data was collected for this time period, so we don't know if it was up or down)\n\non a time line. (The data formats are discussed later).\nHovering over one of the areas provides additional information such as: when the period started/ended, the duration\nof the period and the status of the period.\n\n\n==== Multi-line Chart Type\nHere is an screen shot from the Hawkular Console that uses the multi-line chart for displaying JVM metrics:\n\nimage::img/jvm-heap-chart.png[JVM Heap Chart via Multi-line Chart]\n\n__This chart type would also be used for displaying multiple metrics in a single chart.__\nDon't like the charts we have? Take one of the existing charts and modify (there are many types in the code).\n\n== How to Get\n\nThis version is currently not published. May be published on npm n the future.\n\nFor the time being you need to clone this repository and build as described above.\n\n== Using the Charting Directives\nBind to a javascript array of metrics:\n\n[source,javascript]\n----\n \u003chk-metric-chart\n     [raw-data]=\"vm.getChartDataFor(selectedMetric)\"\n     [chart-type]=\"selectedChart.chartType\"\u003e\n \u003c/hk-metric-chart\u003e\n----\n\nThe nice part of about using angular in the charting framework is that whenever the underlying data changes, watchers automatically load and re-render the chart (as well as any of the properties that may have changed like chart-type).\nThis results in less code and more productivity.\n\n.Prerequisite setup:\n. Install the built tgz with npm (`npm install [path]/hawkular-charts-[version].tgz`)\n. In your downstream _.angular-cli.json_, add link to CSS _\"../node_modules/hawkular-charts/styles.css\"_\n. Use `ng build` or `ng serve` to build with angular-cli.\n\nAll that's left to do now is select the chart type and bind the _raw-data_ (or _stats-data_) attribute on the __\u003chk-metric-chart\u003e__ directive.\n\n=== Stand Alone Live Updating Tag Example\n__Quickly and easily add some dynamically updating charts to your own pages__\n\nThe stand alone version of the tag allows for linking to hawkular-metrics servers (or any supplier of formatted metric data) without any dependencies except for a few js libs and 2 lines of script to setup an Angular app.\n\n[source,javascript]\n----\n\u003chk-metric-chart\n        chart-type=\"bar\"\n        metric-id=\"server2.cpu.user\"\n        metric-type=\"gauge\"\n        metric-tenant-id=\"myTenant\"\n        metric-url=\"http://127.0.0.1:8080/hawkular/metrics\"\n        time-range-in-seconds=\"86400002\"\n        refresh-interval-in-seconds=\"30\" \u003e\n\u003c/hk-metric-chart\u003e\n----\n\nThis allows plain html web pages to be sprinkled with tags and a couple js libs and you can have dynamic live updating metrics. Great for NOCs or dashboards. These pages can even be emailed around and then thrown behind an http server for viewing.\n\n== Data Formats\n\nMetric Time Series data is generally viewed as a Tuple: `{metric, time, value}`. The Hawkular charts version looks like\nthis:\n\n=== Availability Data\n\n.Table Availability Data Format\n|===\n|Name |Type |Required |Description\n\n|start\n|number\n|Yes\n|Integer representing Starting period timestamp - milli-seconds since epoch(unix)\n\n|end\n|number\n|Yes\n|Integer representing Ending period timestamp - milli-seconds since epoch(unix)\n\n|value\n|text\n|Yes\n|String enum of Availability Type('up','down','unknown')\n\n\n|duration\n|text\n|No\n|String with duration period to show in hover\n\n\n|message\n|text\n|No\n|String with message **Not Used Yet**\n|===\n\n_Example:_\n[source,javascript]\n----\n var availChartData = [{\"timestamp\": 1438025381038, \"value\": \"up\"},\n     {\"timestamp\": 1438031047504, \"value\": \"down\"}];\n----\n\n\n\n=== Metrics Data\n\n==== Single Chart Data Format\n\nTODO: differentiate _raw-data_ and _stats-data_, now they must be explicitly mentioned.\n\n.Table Aggregated Metrics Data Format\n|===\n|Name |Type |Required |Description\n\n|timestamp\n|number\n|Yes\n|Integer representing milli-seconds since epoch(unix)\n\n|avg\n|number\n|Yes\n|Any valid number (int or decimal)\n\n|min\n|number\n|No\n|Any valid number (int or decimal)\n\n|max\n|number\n|No\n|Any valid number (int or decimal)\n\n\n|empty\n|boolean\n|No\n|boolean indicating if the chart should show *missing* data representation for this time period. This overrides the\nactual values.\n|===\n\n_Aggregate Metrics Example:_\n[source,javascript]\n----\n  var metricData = [{\n        \"timestamp\": 1434476761167,\n        \"avg\": 1912,\n        \"min\": 1482,\n        \"max\": 2342,\n        \"empty\": false\n      }, {\n        \"timestamp\": 1434476791167,\n        \"avg\": 1816,\n        \"min\": 1816,\n        \"max\": 1816,\n        \"empty\": false\n      }];\n----\n\nTIP: If you don't have aggregate values (maybe you aren't using Hawkular Metrics) then just populate the *avg* value with the desired metric value. Min, Max and Empty are optional.\n\nNOTE: Everything ends up being an aggregated value in time (usually after 8 hours). This is due to needing a\nconsistently representable dataset that charts nicely. Raw datasets can easily become bottlenecks to the clients\ncharting the data and unintended consequences of very large or small datasets can make for _strange_ looking charts.\nFor this reason, we recommend bucketing data into a fixed set of datapoints that the charting client is comfortable\nhandling performance-wise and that generally _fits_ the chart\n\n==== Multi-Chart Data Format\n\n.Table Multi-Chart Data Format\nThe multi-chart data format used to show multiple charts(metrics) on a single chart is the same _values_ data as the above metrics data format, but just adds a nested (__d3 nested__) array of map values. This consists of key --\u003e values pairs with the _key_ being the name of the dataset and the _values_ being the array of values metric data described in the preceding section. This is probably most easily illustrated by a code example:\n\n_Example:_\n[source,javascript]\n----\n var nestedData = [\n  {\"key\" : \"red hat\", \"values\" : redhatData },\n  {\"key\" : \"amazon\", \"values\" : amazonData }\n ];\n----\n\n\n== Chart Customization\n\n.This project is built around customization. There are several forms of customization:\n- Most cosmetic issues are controlled via standard css(LESS) through the https://github\n.com/hawkular/hawkular-charts/blob/2fde03777b428a424c12ecc1c80aeb558ebad78c/src/less/hawkular-charts\n.less[hawkular-charts.less].\n- Additional(new) functionality is offered through custom attributes.\n- New chart types are easily created by simply creating a new https://github\n.com/hawkular/hawkular-charts/blob/ed24b148057b9b2aa52c63079f97c0858775f8ba/src/chart/types.ts#L39-L39[ChartType]\nclass with a name and drawChart method. And then adding it to the https://github\n.com/hawkular/hawkular-charts/blob/2fde03777b428a424c12ecc1c80aeb558ebad78c/src/chart/metric-chart-directive\n.ts[registered chart types]\n\n\n== Consuming Hawkular Charts from Hawkular Project\n\nEasily setup bower linking so that changes to the charts are instantly reflected in Hawkular console...\n\nhttp://www.hawkular.org/docs/dev/ui-dev.html[Integrating with Hawkular]\n\n== Hawkular UI Services\n\n__What good is a chart if you don't have a way to get the metric data?__\n\nIf you don't want to retrieve data directly from the REST Url, we have an API that is a wrapper around ngResources. For angular apps this is probably the easiest and most powerful way to access Hawkular data. There are currently API wrappers around:\n\n. http://www.hawkular.org/docs/rest/rest-metrics.html[Hawkular Metrics]\n. http://www.hawkular.org/docs/rest/rest-inventory.html[Hawkular Inventory]\n. http://www.hawkular.org/docs/rest/rest-alerts.html[Hawkular Alerts]\n. https://github.com/hawkular/hawkular-agent[Hawkular Agent] (via websockets)\n\n[source,javascript]\n----\n//\n// Querying Availability\n//\n HawkularMetric.AvailabilityMetricData(this.$rootScope.currentPersona.id).query({\n          availabilityId: metricId,\n          start: startTime,\n          end: endTime,\n          distinct: true\n        }).$promise\n          .then((response) =\u003e {\n            this.availabilityDataPoints = response;\n          }, (error) =\u003e {\n            this.NotificationsService.error('Error Loading Avail Data: ' + error);\n          });\n//\n// Here is a real-world example querying multiple metrics for a multi-line graph\n// the data is put into the chartWebSessionData array for charting\n// Querying both Gauge and Counter metrics\n//\n HawkularMetric.GaugeMetricData(this.$rootScope.currentPersona.id).queryMetrics({\n        gaugeId: 'MI~R~[' + this.$routeParams.resourceId +\n        '~/]~MT~WildFly Aggregated Web Metrics~Aggregated Active Web Sessions',\n        start: this.startTimeStamp,\n        end: this.endTimeStamp, buckets:60}, (data) =\u003e {\n        this.chartWebSessionData[0] = { key: 'Active Sessions',\n          color: AppServerWebDetailsController.ACTIVE_COLOR, values: this.formatBucketedChartOutput(data) };\n      }, this);\n\n HawkularMetric.CounterMetricData(this.$rootScope.currentPersona.id).queryMetrics({\n        counterId: 'MI~R~[' + this.$routeParams.resourceId +\n          '~/]~MT~WildFly Aggregated Web Metrics~Aggregated Expired Web Sessions',\n        start: this.startTimeStamp,\n        end: this.endTimeStamp, buckets:60}, (data) =\u003e {\n        this.chartWebSessionData[1] = { key: 'Expired Sessions',\n          color: AppServerWebDetailsController.EXPIRED_COLOR, values: this.formatCounterChartOutput(data) };\n      }, this);\n----\n\n\n== FAQ\n\n.Questions about Hawkular-charts\n* There used to be a width and height attribute in the charting directives, what happened to those?\n_Answer_: Hawkular-charts is now fully responsive so height and width no longer make sense. Height and width is now\ndetermined by the container surrounding the chart directive (a div for example).\n\n== Releases\nOther information regarding releases can be found at: https://github.com/hawkular/hawkular-charts/releases/\n\n== Contributing\n\nWe're always interested in contributions from the community.\n\n.Please ensure that your Pull Request provides the following:\n* Detailed description of the proposed changes\n* Use the https://github.com/hawkular/hawkular/blob/master/angular-style-guide.adoc[Angular Typescript Style Guide]\nfor reference.\n* Rebased onto the latest master commit\n* This is a http://github.com/Microsoft/TypeScript/[Typescript] project, so please submit the _Typescript source_ (*not*\n the javascript source; javascript submissions will be rejected)\n* Issues/Bugs can be reported via https://issues.jboss.org/browse/HAWKULAR/[Hawkular Jira]\n\n__We would like to give special Thanks to the Red Hat, User Experience Team (UxD) for their design expertise.__\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhawkular%2Fhawkular-charts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhawkular%2Fhawkular-charts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhawkular%2Fhawkular-charts/lists"}