{"id":13708163,"url":"https://github.com/codersrank-org/skills-chart-widget","last_synced_at":"2025-08-19T11:13:00.700Z","repository":{"id":46708931,"uuid":"305958366","full_name":"codersrank-org/skills-chart-widget","owner":"codersrank-org","description":"Integrate skills chart from your CodersRank profile to your personal website","archived":false,"fork":false,"pushed_at":"2021-10-08T11:04:20.000Z","size":613,"stargazers_count":39,"open_issues_count":3,"forks_count":10,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-18T21:18:43.020Z","etag":null,"topics":["chart","codersrank","codersrank-widget","cv","portfolio","profile","skills","svg","webcomponent"],"latest_commit_sha":null,"homepage":"https://codersrank.io","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/codersrank-org.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-10-21T08:29:42.000Z","updated_at":"2024-08-30T12:53:45.000Z","dependencies_parsed_at":"2022-07-19T18:03:49.281Z","dependency_job_id":null,"html_url":"https://github.com/codersrank-org/skills-chart-widget","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"purl":"pkg:github/codersrank-org/skills-chart-widget","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codersrank-org%2Fskills-chart-widget","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codersrank-org%2Fskills-chart-widget/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codersrank-org%2Fskills-chart-widget/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codersrank-org%2Fskills-chart-widget/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codersrank-org","download_url":"https://codeload.github.com/codersrank-org/skills-chart-widget/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codersrank-org%2Fskills-chart-widget/sbom","scorecard":{"id":297662,"data":{"date":"2025-08-11","repo":{"name":"github.com/codersrank-org/skills-chart-widget","commit":"2f80a92978d9f6263e367ad5772096fa5d0c26b8"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.7,"checks":[{"name":"Code-Review","score":0,"reason":"Found 2/26 approved changesets -- score normalized to 0","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":"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":"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":"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":"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":"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: MIT License: 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":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'main'"],"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 6 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":"47 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","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-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-qrpm-p2h7-hrv2","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-r8f7-9pfq-mjmv","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-7mwh-4pqv-wmr8","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-44c6-4v22-4mhx","Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch","Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7","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-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh"],"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-17T19:56:12.086Z","repository_id":46708931,"created_at":"2025-08-17T19:56:12.086Z","updated_at":"2025-08-17T19:56:12.086Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271143398,"owners_count":24706346,"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":["chart","codersrank","codersrank-widget","cv","portfolio","profile","skills","svg","webcomponent"],"created_at":"2024-08-02T22:01:57.863Z","updated_at":"2025-08-19T11:13:00.677Z","avatar_url":"https://github.com/codersrank-org.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# CodersRank Skills Chart Widget\n\n- [Install from NPM](#install-from-npm)\n- [Install from CDN](#install-from-cdn)\n- [Usage](#usage)\n- [Widget Attributes](#widget-attributes)\n- [Styling](#styling)\n- [Events](#events)\n- [Use As Image](#use-as-image)\n- [Contribution](#contribution)\n- [Licence](#Licence)\n\n\u003c!-- DOCS_START --\u003e\n\nCodersRank Skills Chart Widget is a web component that allows you easily integrate nice looking skills chart from your [CodersRank](https://codersrank.io) profile to your personal website:\n\n\u003cimg src=\"preview.png\" /\u003e\n\n## Install from NPM\n\nWidget script available through NPM:\n\n```\nnpm i @codersrank/skills-chart --save\n```\n\nAfter installation you need to import and register web component:\n\n```js\nimport CodersRankSkillsChart from '@codersrank/skills-chart';\n\n// register web component as \u003ccodersrank-skills-chart\u003e element\nwindow.customElements.define('codersrank-skills-chart', CodersRankSkillsChart);\n```\n\n## Install from CDN\n\nWidget can also be downloaded or linked directly from CDN:\n\n```html\n\u003c!-- replace x.x.x with actual version --\u003e\n\u003cscript src=\"https://unpkg.com/@codersrank/skills-chart@x.x.x/codersrank-skills-chart.min.js\"\u003e\u003c/script\u003e\n```\n\nIn this case it is not required to register web component, it is already registered as `\u003ccodersrank-skills-chart\u003e` element.\n\n## Usage\n\nAs it is a web component the usage is pretty simple, just add widget HTML tag with your [CodersRank](https://codersrank.io) username\n\n```html\n\u003ccodersrank-skills-chart username=\"YOUR_USERNAME\"\u003e\u003c/codersrank-skills-chart\u003e\n```\n\n## Widget Attributes\n\nWidget supports following properties as HTML element attributes:\n\n| Name                | Type      | Default | Description                                                                                                                                             |\n| ------------------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `username`          | `string`  |         | Your [CodersRank](https://codersrank.io) username                                                                                                       |\n| `labels`            | `boolean` | `false` | Display chart labels (chart axis with dates)                                                                                                            |\n| `legend`            | `boolean` | `false` | Display legend below the chart                                                                                                                          |\n| `tooltip`           | `boolean` | `false` | Enables tooltip with number of activities per day                                                                                                       |\n| `skills`            | `string`  |         | Allows to specify skills to display in chart. For example `skills=\"JavaScript, Vue, CSS\"`                                                               |\n| `active-skills`     | `string`  |         | Allows to specify skills to be active by default (all skills not specified here will appear as disabled). For example `active-skills=\"JavaScript, Vue\"` |\n| `svg-width`         | `number`  | `640`   | Render width of chart's SVG element. Ideally should match actual chart width                                                                            |\n| `svg-height`        | `number`  | `320`   | Render height of chart's SVG element. Ideally should match actual chart height                                                                          |\n| `show-other-skills` | `boolean` | `false` | Group skills not specified in `skills` property under the \"Other\" chart area                                                                            |\n| `max-labels`        | `number`  | `8`     | Maximum amount of labels (dates) to be displayed (dates)                                                                                                |\n| `branding`          | `boolean` | `true`  | Displays \"Powered by CodersRank\" link                                                                                                                   |\n| `sort-by-score`     | `boolean` | `false` | Sorts labels by score if true or alphabetically                                                                                                         |\n\nFor example, to enable labels, legend and tooltip:\n\n```html\n\u003ccodersrank-skills-chart\n  username=\"YOUR_USERNAME\"\n  labels\n  legend\n  tooltip\n\u003e\u003c/codersrank-skills-chart\u003e\n```\n\n## Styling\n\nIt is possible to customize widget colors with CSS Custom Properties (CSS Variables) by setting them directly on the widget element with style attribute or in CSS.\n\nThere are following CSS Custom Properties are available:\n\n| Property                       | Value                                                     |\n| ------------------------------ | --------------------------------------------------------- |\n| `--font-family`                | `Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif` |\n| `--svg-width`                  | `100%`                                                    |\n| `--svg-height`                 | `auto`                                                    |\n| `--axis-bg-color`              | `rgba(0, 0, 0, 0.35)`                                     |\n| `--hidden-area-color`          | `#ddd`                                                    |\n| `--label-text-color`           | `inherit`                                                 |\n| `--label-font-size`            | `10px`                                                    |\n| `--label-font-weight`          | `500`                                                     |\n| `--label-white-space`          | `nowrap`                                                  |\n| `--legend-text-color`          | `inherit`                                                 |\n| `--legend-disabled-text-color` | `#ccc`                                                    |\n| `--legend-font-size`           | `14px`                                                    |\n| `--preloader-color`            | `#72a0a8`                                                 |\n| `--tooltip-font-size`          | `12px`                                                    |\n| `--tooltip-total-font-size`    | `16px`                                                    |\n| `--tooltip-total-font-weight`  | `bold`                                                    |\n| `--other-skills-area-color`    | `#bbb`                                                    |\n| `--chart-bg-color`             | `transparent`                                             |\n| `--chart-border-radius`        | `0px`                                                     |\n| `--branding-text-color`        | `inherit`                                                 |\n\nFor example, to change legend text color to `red` and font-size to `12px`, add this to CSS stylesheet:\n\n```css\ncodersrank-skills-chart {\n  --legend-text-color: red;\n  --legend-font-size: 12px;\n}\n```\n\n## Events\n\nWidget element supports the following events:\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003eName\u003c/th\u003e\n      \u003cth\u003eDescription\u003c/th\u003e\n      \u003cth\u003eDetail\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eerror\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eWill be fired on data request error\u003c/td\u003e\n      \u003ctd\u003e`event.detail` will contain an error object\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003edata\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eWill be fired right after data request\u003c/td\u003e\n      \u003ctd\u003e\n        `event.detail` will contain an object with `highest` and `scores` properties.\n        \u003cp\u003e`highest` object contains information about when user had the highest score\u003c/p\u003e\n        \u003cp\u003e`scores` array contains information about skills scores by dates\u003c/p\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003erender\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eWill be fired right after chart rendered to DOM\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\nFor example:\n\n```html\n\u003ccodersrank-skills-chart id=\"skills-chart\" skils=\"...\"\u003e\u003c/codersrank-skills-chart\u003e\n```\n\n```js\nfunction onData(event) {\n  const highest = event.detail.highest;\n  console.log(`Highest score was ${highest.score} on ${highest.date}`);\n}\ndocument.querySelector('#skills-chart').addEventListener('data', onData);\n```\n\n## Use As Image\n\nIt is also possible to insert Skills Chart as an image. It is useful in places where you can't integrate web component, or for example on your GitHub profile README.md page.\n\nImage URL is the following:\n\n```\nhttps://cr-skills-chart-widget.azurewebsites.net/api/api?username=YOUR_USERNAME\n```\n\nIt accepts query parameters:\n\n| Name                | Type      | Default | Description                                                                                       |\n| ------------------- | --------- | ------- | ------------------------------------------------------------------------------------------------- |\n| `username`          | `string`  |         | Your [CodersRank](https://codersrank.io) username                                                 |\n| `skills`            | `string`  |         | Specify skills to display in chart (comma separated), for example `?skills=JavaScript,TypeScript` |\n| `width`             | `number`  | `640`   | Render width of chart's SVG element. Ideally should match actual chart width                      |\n| `height`            | `number`  | `320`   | Render height of chart's SVG element. Ideally should match actual chart height                    |\n| `show-other-skills` | `boolean` | `false` | Group skills not specified in `skills` property under the \"Other\" chart area                      |\n| `bg`                | `string`  | `#fff`  | Chart background image                                                                            |\n| `padding`           | `number`  | `0`     | Image content padding                                                                             |\n\nFor example:\n\n```html\n\u003cimg\n  src=\"https://cr-skills-chart-widget.azurewebsites.net/api/api?username=YOUR_USERNAME\u0026skills=JavaScript,TypeScript\u0026show-other-skills=true\"\n/\u003e\n```\n\nLive example:\n\n```html\n\u003cimg\n  src=\"https://cr-skills-chart-widget.azurewebsites.net/api/api?username=nolimits4web\u0026skills=Vue,C%2B%2B,C%23,SCSS,Svelte\u0026width=820\"\n/\u003e\n```\n\nNote that you need to URL Encode some of the characters, for example `C++` should be `C%2B%2B` and `C#` should be `C%23`\n\n## Contribution\n\nYes please! See the [contributing guidelines](https://github.com/codersrank-org/skills-chart-widget/blob/master/CONTRIBUTING.md) for details.\n\n## Licence\n\nThis project is licensed under the terms of the [MIT license](https://github.com/codersrank-org/skills-chart-widget/blob/master/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodersrank-org%2Fskills-chart-widget","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodersrank-org%2Fskills-chart-widget","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodersrank-org%2Fskills-chart-widget/lists"}