Added number-background-color-shading

Author: tecchan1107

column-samples/number-background-color-shading/README.md

@@ -0,0 +1,31 @@
+# Background color shading by number column value
+
+## Summary
+This sample demonstrates how to change the shade of the background color depending on the value of the number column. Also, in this sample, the background color is lightest at `-100` and darkest at `350`.
+
+- `number-background-color-shading-theme-color.json` uses your site's theme color as the background color.
+- `number-background-color-shading-custom-color.json` uses the HTML color code as the background color, and in the sample, `#FFBBFF` is set.
+
+![screenshot of the sample](./assets/screenshot.png)
+
+## View requirements
+
+This format can be applied to a Number column.
+
+## Sample
+
+Solution                                          |Author(s)
+--------------------------------------------------|------------------------------------------------
+number-background-color-shading-theme-color.json  |[Tetsuya Kawahara](https://twitter.com/techan_k)
+number-background-color-shading-custom-color.json |[Tetsuya Kawahara](https://twitter.com/techan_k)
+
+## Version history
+
+Version |Date             |Comments
+--------|-----------------|----------------
+1.0     |November 16, 2021|Initial release
+
+## Disclaimer
+**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
+
+<img src="https://telemetry.sharepointpnp.com/sp-dev-list-formatting/column-samples/number-background-color-shading" />

column-samples/number-background-color-shading/assets/sample.json

@@ -0,0 +1,51 @@
+[
+  {
+    "name": "pnp-list-formatting-number-background-color-shading",
+    "reponame": "number-background-color-shading",
+    "source": "pnp",
+    "title": "Background color shading by number column value",
+    "shortDescription": "This sample demonstrates how to change the shade of the background color according to the value of the number column.",
+    "url": "https://github.com/pnp/List-Formatting/tree/master/column-samples/number-background-color-shading",
+    "longDescription": [
+      "This sample demonstrates how to change the shade of the background color according to the value of the number column."
+    ],
+    "creationDateTime": "2021-11-16T00:00:00.000Z",
+    "updateDateTime": "2021-11-16T00:00:00.000Z",
+    "products": [
+      "SharePoint",
+      "Office"
+    ],
+    "metadata": [
+      {
+        "key": "LIST-SAMPLE-TYPE",
+        "value": "Column"
+      },
+      {
+        "key": "SHAREPOINT-COMPATIBILITY",
+        "value": "SharePoint Online"
+      }
+    ],
+    "thumbnails": [
+      {
+        "type": "image",
+        "order": 100,
+        "url": "https://github.com/pnp/List-Formatting/blob/master/column-samples/number-background-color-shading/assets/screenshot.png?raw=true",
+        "alt": "screenshot"
+      }
+    ],
+    "authors": [
+      {
+        "gitHubAccount": "tecchan1107",
+        "pictureUrl": "https://github.com/tecchan1107.png",
+        "name": "Tetsuya Kawahara"
+      }
+    ],
+    "references": [
+      {
+        "name": "Use column formatting to customize SharePoint",
+        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
+        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
+      }
+    ]
+  }
+]

column-samples/number-background-color-shading/assets/screenshot.png

@@ -0,0 +1,31 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
+  "elmType": "div",
+  "style": {
+    "width": "100%",
+    "height": "42px",
+    "position": "relative",
+    "white-space": "nowrap"
+  },
+  "children": [
+    {
+      "elmType": "div",
+      "style": {
+        "position": "abdolute",
+        "width": "100%",
+        "height": "100%",
+        "opacity": "= ( (@currentField - (-100)) / (350 - (-100)) )",
+        "background-color": "#FFBBFF"
+      }
+    },
+    {
+      "elmType": "div",
+      "txtContent": "@currentField",
+      "style": {
+        "position": "absolute",
+        "margin-left": "10px",
+        "font-size": "18px"
+      }
+    }
+  ]
+}

column-samples/number-background-color-shading/number-background-color-shading-custom-color.json

@@ -0,0 +1,33 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
+  "elmType": "div",
+  "style": {
+    "width": "100%",
+    "height": "42px",
+    "position": "relative",
+    "white-space": "nowrap"
+  },
+  "children": [
+    {
+      "elmType": "div",
+      "style": {
+        "position": "abdolute",
+        "width": "100%",
+        "height": "100%",
+        "opacity": "= ( (@currentField - (-100)) / (350 - (-100)) )"
+      },
+      "attributes": {
+        "class": "ms-bgColor-themeTertiary"
+      }
+    },
+    {
+      "elmType": "div",
+      "txtContent": "@currentField",
+      "style": {
+        "position": "absolute",
+        "margin-left": "10px",
+        "font-size": "18px"
+      }
+    }
+  ]
+}