@codersrank/activity - npm Package Compare versions

Comparing version 0.9.11 to 0.9.12

codersrank-activity.js

 /**
- * Codersrank Activity Widget 0.9.11
+ * Codersrank Activity Widget 0.9.12
  * undefined
@@ -10,3 +10,3 @@ * https://github.com/codersrank-org/activity-widget#readme
  *
- * Released on: December 1, 2020
+ * Released on: December 4, 2020
  */
@@ -13,0 +13,0 @@

codersrank-activity.min.js

 /**
- * Codersrank Activity Widget 0.9.11
+ * Codersrank Activity Widget 0.9.12
  * undefined
@@ -10,3 +10,3 @@ * https://github.com/codersrank-org/activity-widget#readme
  *
- * Released on: December 1, 2020
+ * Released on: December 4, 2020
  */
@@ -13,0 +13,0 @@

package.json

 {
   "name": "@codersrank/activity",
-  "version": "0.9.11",
+  "version": "0.9.12",
   "description": "CodersRank activity widget",
@@ -5,0 +5,0 @@ "main": "cjs/codersrank-activity.js",

README.md

@@ -58,2 +58,3 @@ # CodersRank Activity Widget
 | `svg-width` | `number`  | `800`   | Render width of chart's SVG element                 |
+| `branding`  | `boolean` | `true`  | Displays "Powered by CodersRank" link               |
 
@@ -151,2 +152,29 @@ For example, to enable labels, legend and tooltip:
 
+## Use As Image
+
+It is also possible to insert Activity widget 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.
+
+Image URL is the following:
+
+```
+https://cr-ss-service.azurewebsites.net/api/ScreenShot?widget=activity&username=YOUR_USERNAME
+```
+
+It accepts all widget attributes as query string parameters, plus one extra parameter:
+
+| Name    | Type     | Default | Description                                                                                                                                                                     |
+| ------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `width` | `number` | `800`   | Width of widget element (generated image). Note that generated image has @2x pixel density, so the PNG image will be actually generated in @2x size from the one specified here |
+| `style` | `string` |         | `style` attribute value (here you can specify all CSS variables)                                                                                                                |
+
+For example:
+
+```html
+<img
+  src="https://cr-ss-service.azurewebsites.net/api/ScreenShot?widget=activity&username=YOUR_USERNAME&labels=true"
+/>
+```
+
+Note that you need to URL Encode some of the characters, for example `#` should be `%23` and `#ff0` color should be specified as `%23ff0` in query.
+
 ## Contribution
@@ -153,0 +181,0 @@

No alert changes

Improved metrics

Total package byte prevSize

201647

increased by0.83%

Number of lines in readme file

185

increased by17.83%

No dependency changes