{"id":16369748,"url":"https://github.com/dcsunset/vue-iperf3-chart","last_synced_at":"2026-03-03T18:30:23.654Z","repository":{"id":36191042,"uuid":"195185477","full_name":"DCsunset/vue-iperf3-chart","owner":"DCsunset","description":"Plot iperf3 json data using Chart.js and Vue.js","archived":false,"fork":false,"pushed_at":"2023-01-04T21:55:12.000Z","size":3894,"stargazers_count":1,"open_issues_count":28,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-31T13:03:52.847Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","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/DCsunset.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}},"created_at":"2019-07-04T06:52:28.000Z","updated_at":"2022-10-14T09:03:58.000Z","dependencies_parsed_at":"2023-01-16T23:17:16.011Z","dependency_job_id":null,"html_url":"https://github.com/DCsunset/vue-iperf3-chart","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DCsunset%2Fvue-iperf3-chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DCsunset%2Fvue-iperf3-chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DCsunset%2Fvue-iperf3-chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DCsunset%2Fvue-iperf3-chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DCsunset","download_url":"https://codeload.github.com/DCsunset/vue-iperf3-chart/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239885515,"owners_count":19713320,"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-10-11T02:56:14.742Z","updated_at":"2026-03-03T18:30:23.566Z","avatar_url":"https://github.com/DCsunset.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-iperf3-chart\n\n[![npm](https://img.shields.io/npm/v/vue-iperf3-chart.svg)](https://www.npmjs.com/package/vue-iperf3-chart)\n[![npm](https://img.shields.io/npm/dm/vue-iperf3-chart.svg)](https://www.npmjs.com/package/vue-iperf3-chart)\n[![GitHub](https://img.shields.io/github/license/DCsunset/vue-iperf3-chart.svg?color=blue)](https://github.com/DCsunset/vue-iperf3-chart/blob/master/LICENSE)\n\nA Vue component to plot iperf3 json data.\n\n## Install\n\n```\nnpm install vue-iperf3-chart\n```\n\n## Usage\n\nFirst import the package and **css**,\nand then use it as a Vue Component:\n\n```html\n\u003ctemplate\u003e\n\t\u003cdiv style=\"height: 95vh\"\u003e\n\t\t\u003cchart\n\t\t\t:data=\"jsonData\"\n\t\t\t:labels=\"labels\"\n\t\t\t:options=\"options\"\n\t\t\t:fillAlpha=\"0.3\"\n\t\t/\u003e\n\t\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport jsonData from \"./data.json\";\nimport Chart from \"vue-iperf3-chart\";\nimport \"vue-iperf3-chart/dist/vue-iperf3-chart.css\";\n\nexport default {\n\tname: \"app\",\n\tcomponents: {\n\t\tChart\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tjsonData,\n\t\t\tlabels: [\"Label 1\", \"Label 2\"],\n\t\t\toptions: {\n\t\t\t\tmaintainAspectRatio: false\n\t\t\t}\n\t\t};\n\t}\n};\n\u003c/script\u003e\n```\n\nThe iperf3 chart's height and width depend on its parent node.\nWhen the size of its parent node changes,\nit changes as well.\n\nThe chart's data is also responsive.\nWhen the data changes,\nthe chart will be refreshed.\n\n## Props\n\n| Prop        | Type   | Default                     | Description                                                                                                                       |\n| ----------- | ------ | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |\n| data        | Array  | `undefined`                 | An array of iperf3 json data                                                                                                      |\n| labels | Array | `undefined` | An array of labels of data. The length should be the same as data's |\n| options     | Object | `undefined`                 | options passed to Chart.js                                                                                                        |\n| unit        | String | `\"Mbits\"`                   | The unit can be `\"Kbits\"`, `\"Mbits\"` or `\"Gbits\"`                                                                                 |\n| start       | Number | `0`                         | The starting interval in data                                                                                                     |\n| end         | Number | `-1`                        | The ending interval in data (-1 means the end)                                                                                    |\n| fillAlpha   | Number | `0.5`                       | The background alpha channel of each line                                                                                         |\n| colorScheme | String | `\"tableau.ClassicMedium10\"` | The color scheme used in `chartjs-plugin-colorschemes`. It can be picked at \u003chttps://nagix.github.io/chartjs-plugin-colorschemes\u003e |\n\n\n## Events\n\n| Event  | Argument    | Description                                  |\n| ------ | ----------- | -------------------------------------------- |\n| parsed | Parsed data | When data changes, the event will be emitted |\n\n\n\n## Test\n\nFirst clone this repository and install dependencies:\n\n```\nnpm install\n```\n\nThen start the dev server to plot\n\n```\nnpm run serve\n```\n\nPut the json data file in `src/data.json`.\n\nThen change the options of Chart.js in `App.vue`\nto have custom settings.\n\n\n## Screenshot\n\n![Screenshot](./Screenshot.png)\n\n## License\n\nMIT License\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdcsunset%2Fvue-iperf3-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdcsunset%2Fvue-iperf3-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdcsunset%2Fvue-iperf3-chart/lists"}