Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added number-heart-shading #480

Merged
merged 2 commits into from
Mar 6, 2022
Merged

Added number-heart-shading #480

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fafce3d
Added number-heart-shading
tecchan1107 Feb 13, 2022
35d31c4
Merge Prep
PopWarner Mar 6, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 40 additions & 0 deletions column-samples/number-heart-shading/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
# Heart shading

## Summary
This sample demonstrates how to express percentages in terms of the color shading of a heart displayed in SVG.

- `number-heart-shading-site-theme-color.json` uses the theme color of the site as the color of the heart.
- `number-heart-shading-custom-color` uses the HTML color code as the the color of the heart, and in the sample, `#FF0000` is set.
- `number-heart-shading-rainbow-color.json` uses different colors for each heart, starting from the left heart: purple, blue, green, yellow, and red.

![screenshot of the sample](./assets/screenshot.png)

## View requirements
This format can be applied to a Number column. It is expected that the values will be from 0 to 1 (percent).

## Sample

Solution |Author(s)
-------------------------------------------|---------------------------
number-heart-shading-site-theme-color.json |[Tetsuya Kawahara](https://twitter.com/techan_k)
number-heart-shading-custom-color.json |[Tetsuya Kawahara](https://twitter.com/techan_k)
number-heart-shading-rainbow-color.json |[Tetsuya Kawahara](https://twitter.com/techan_k)

## Version history

Version |Date |Comments
--------|------------------|--------
1.0 |February 13, 2022 |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.**

---

## Additional notes

The SVG heart in this sample is based on a sample from the following site.

- [d - SVG: Scalable Vector Graphics | MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d)

<img src="https://pnptelemetry.azurewebsites.net/list-formatting/column-samples/number-heart-shading" />
51 changes: 51 additions & 0 deletions column-samples/number-heart-shading/assets/sample.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
[
{
"name": "pnp-list-formatting-number-heart-shading",
"reponame": "number-heart-shading",
"source": "pnp",
"title": "Heart shading",
"shortDescription": "This sample demonstrates how to express percentages in terms of the color shading of a heart displayed in SVG.",
"url": "https://github.com/pnp/List-Formatting/tree/master/column-samples/number-heart-shading",
"longDescription": [
"This sample demonstrates how to express percentages in terms of the color shading of a heart displayed in SVG."
],
"creationDateTime": "2022-02-13T00:00:00.000Z",
"updateDateTime": "2022-02-13T00:00:00.000Z",
"products": [
"SharePoint",
"Microsoft Lists"
],
"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-heart-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 its displayed to users who browse the list.",
"url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
}
]
}
]
Binary file added column-samples/number-heart-shading/assets/screenshot.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
163 changes: 163 additions & 0 deletions column-samples/number-heart-shading/number-heart-shading-custom-color.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "row",
"white-space": "nowrap",
"align-items": "center"
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "row",
"height": "25px",
"white-space": "nowrap",
"color": "red"
},
"children": [
{
"elmType": "div",
"children": [
{
"elmType": "svg",
"style": {
"fill": "currentColor",
"stroke": "currentColor",
"fill-opacity": "=if(@currentField >= 0.2 , '1' , (@currentField / 0.2) )",
"height": "100%"
},
"attributes": {
"viewBox": "0 0 100 100"
},
"children": [
{
"elmType": "path",
"attributes": {
"d": "M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"
}
}
]
}
]
},
{
"elmType": "div",
"children": [
{
"elmType": "svg",
"style": {
"fill": "currentColor",
"stroke": "currentColor",
"fill-opacity": "=if(@currentField >= 0.4 , '1' , if(@currentField > 0.2 , ((@currentField - 0.2) / 0.2) , '0')) ",
"height": "100%"
},
"attributes": {
"viewBox": "0 0 100 100"
},
"children": [
{
"elmType": "path",
"attributes": {
"d": "M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"
}
}
]
}
]
},
{
"elmType": "div",
"children": [
{
"elmType": "svg",
"style": {
"fill": "currentColor",
"stroke": "currentColor",
"fill-opacity": "=if(@currentField >= 0.6 , '1' , if(@currentField > 0.4 , ((@currentField - 0.4) / 0.2) , '0')) ",
"height": "100%"
},
"attributes": {
"viewBox": "0 0 100 100"
},
"children": [
{
"elmType": "path",
"attributes": {
"d": "M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"
}
}
]
}
]
},
{
"elmType": "div",
"children": [
{
"elmType": "svg",
"style": {
"fill": "currentColor",
"stroke": "currentColor",
"fill-opacity": "=if(@currentField >= 0.8 , '1' , if(@currentField > 0.6 , ((@currentField - 0.6) / 0.2) , '0')) ",
"height": "100%"
},
"attributes": {
"viewBox": "0 0 100 100"
},
"children": [
{
"elmType": "path",
"attributes": {
"d": "M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"
}
}
]
}
]
},
{
"elmType": "div",
"children": [
{
"elmType": "svg",
"style": {
"fill": "currentColor",
"stroke": "currentColor",
"fill-opacity": "= ((@currentField - 0.8) / 0.2)",
"height": "100%"
},
"attributes": {
"viewBox": "0 0 100 100"
},
"children": [
{
"elmType": "path",
"attributes": {
"d": "M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"
}
}
]
}
]
}
]
},
{
"elmType": "div",
"style": {
"margin-left": "12px",
"font-weight": "bold",
"font-size": "14px"
},
"txtContent": "@currentField.displayValue"
}
]
}
]
}
Loading