Change Canvas Page Colour and Chart Background Colour in JSON Themes for Power BI Template - json

I want to prepare a default theme and have written the JSON file below for powerbi dashboards. But I don't know how to:
Change the background colour for the canvas to white?
Change the background colour of the page (Canvas colour) to white?
Change the border colour of all visuals to black
We will then push this file to be the default theme for all of our dashboards.
{
"name": "Bardz",
"dataColors": [
"#173583",
"#7DCCE0",
"#26BCD7",
],
"minimum": "#C7F0FA",
"center": "#7CD7E8",
"maximum": "#3EAEFD",
"neutral": "#F58220",
"foreground": "#000000",
"textClasses": {
"label": {
"fontFace": "'Segoe UI', wf_segoe-ui_normal, helvetica, arial, sans-serif",
"fontSize": 9,
"color": "#040404"
},
"callout": {
"fontFace": "'Segoe UI Semibold', wf_segoe-ui_semibold, helvetica, arial, sans-serif",
"fontSize": 15
},
"title": {
"fontFace": "'Segoe UI Light', wf_segoe-ui_light, helvetica, arial, sans-serif",
"fontSize": 10
},
"header": { "fontSize": 11 }
},
"visualStyles": {
"*": {
"*": {
"background": [
{ "color": { "solid": { "color": "#E1E1E1" } }, "transparency": 5 }
],
"border": [
{
"color": { "solid": { "color": "#000000" } },
"show": true,
"radius": 1
}
],
"outspacePane": [
{
"backgroundColor": { "solid": { "color": "#FFFEFE" } },
"transparency": 15,
"foregroundColor": { "solid": { "color": "#000000" } }
}
],
"filterCard": [
{
"$id": "Applied",
"backgroundColor": { "solid": { "color": "#E4E4E4" } },
"transparency": 18
},
{
"$id": "Available",
"backgroundColor": { "solid": { "color": "#F2F2F2" } },
"transparency": 13
}
],
"visualHeader": [
{
"transparency": 35,
"foreground": { "solid": { "color": "#FFFFFF" } },
"border": { "solid": { "color": "#000000" } }
}
],
"visualTooltip": [
{
"titleFontColor": { "solid": { "color": "#454545" } },
"valueFontColor": { "solid": { "color": "#000000" } },
"background": { "solid": { "color": "#C7C5C5" } }
}
],
"visualHeaderTooltip": [
{
"titleFontColor": { "solid": { "color": "#454545" } },
"background": { "solid": { "color": "#C7C5C5" } }
}
]
}
},
"scatterChart": {
"*": {
"fillPoint": [
{
"show": true
}
],
"bubbles": [
{
"bubbleSize": -10
}
],
"background": [
{ "color": { "solid": { "color": "#FFFFFF" } }, "transparency": 100 }
]
}
},
"page": {
"*": {
"background": [
{ "color": { "solid": { "color": "#F9F9F9" } }, "transparency": 89 }
],
"outspace": [
{ "color": { "solid": { "color": "#FAFAFA" } }, "transparency": 14 }
]
}
}
}
}

Related

Elasticsearch: get the max and min value form a specific object of a maps of objects

I has this mapping for the índex on elastic, i was try to get the max value of a day for a specific sensor, but my query get the value of all the sensors.
"sensor": {
"type": "nested",
"properties": {
"type": {
"type": "integer"
},
"name": {
"type": "keyword"
},
"number": {
"type": "integer"
},
"values": {
"type": "nested",
"properties": {
"type": {
"type": "text"
},
"value": {
"type": "float"
},
"unit": {
"type": "text"
},
"Lmin": {
"type": "float"
},
"Lmax": {
"type": "float"
}
}
}
}
An this is the map of objects,
I need only the max and the min value of the las day from the sensor number 13, i try it but ever i get the max of all sensors.
{"query": {
"nested": {
"path": "sensor",
"query": {
"nested": {
"path": "sensor.values",
"query": {
"bool": {
"must": [
{
"match": {
"sensor.values.type": "TEMPERATURE"
}
}
]
}
}
}
}
}
},
"aggs": {
"agg_by_type": {
"nested": {
"path": "sensor.values"
},
"aggs": {
"max_value": {
"max": {
"field": "sensor.values.value"
}
}
}
}
}
}
I'm new in elasticsearch, can someone help whit this please?, thanks.
You need to also add the nested filter in the aggregation part to only aggregate the relevant nested documents, i.e. the ones related to TEMPERATURE, like this:
{
"query": {
"nested": {
"path": "sensor",
"query": {
"nested": {
"path": "sensor.values",
"query": {
"bool": {
"must": [
{
"match": {
"sensor.values.type": "TEMPERATURE"
}
}
]
}
}
}
}
}
},
"aggs": {
"agg_by_type": {
"nested": {
"path": "sensor.values"
},
"aggs": {
"temperature_only": {
"filter": {
"match": {
"sensor.values.type": "TEMPERATURE"
}
},
"aggs": {
"max_value": {
"max": {
"field": "sensor.values.value"
}
}
}
}
}
}
}
}
After a few days of work in another projects, i back to try make this query and finally i can do it, now i can get the data per day, hours, and by type of sensor, thanks for your help.
This is my code if somebody are trying the same.
{
"query": {
"bool": {
"filter": [
{
"bool": {
"must": [
{
"match": {
"mac": "34:ab:95:8f:84:c0"
}
}
],
"filter": [
{
"range": {
"timestamp": {
"gte": "2021-08-10",
"lt": "2021-08-25"
}
}
}
]
}
},
{
"nested": {
"path": "sensor",
"query": {
"bool": {
"must": [
{
"match": {
"sensor.type": 1
}
}
],
"should": [
{
"nested": {
"path": "sensor.values",
"query": {
"bool": {
"must": [
{
"match": {
"sensor.values.type": "HUMIDITY"
}
},
{
"match": {
"sensor.values.type": "TEMPERATURE"
}
}
]
}
}
}
}
]
}
}
}
}
]
}
},
"aggs": {
"values_per_day": {
"date_histogram": {
"field": "timestamp",
"fixed_interval": "1d",
"format" : "yyyy-MM-dd HH:mm:ss"
},
"aggs": {
"agg_type": {
"nested": {
"path": "sensor"
},
"aggs": {
"type_only": {
"filter": {
"match": {
"sensor.type": 1
}
},
"aggs": {
"agg_by_type": {
"nested": {
"path": "sensor.values"
},
"aggs": {
"temperature_only": {
"filter": {
"match": {
"sensor.values.type": "TEMPERATURE"
}
},
"aggs": {
"max_value": {
"max": {
"field": "sensor.values.value"
}
},
"min_value": {
"min": {
"field": "sensor.values.value"
}
}
}
},
"humedity_only": {
"filter": {
"match": {
"sensor.values.type": "HUMIDITY"
}
},
"aggs": {
"max_value": {
"max": {
"field": "sensor.values.value"
}
},
"min_value": {
"min": {
"field": "sensor.values.value"
}
}
}
}
}
}
}
}
}
}
}
}
},
"from": 0,
"sort": [
{
"timestamp": {
"order": "desc"
}
}
]
}

Modify the width, height and position of product variant drop-down for a Shopify Buy Button without disabling the iFrame

I need to alter the height of the product variant dropdown to exactly 42px (the same height as the buy button) and the width to exactly 80px. Additionally, instead of the product variant dropdown being positioned above the buy button, I need to be positioned directly beside the buy button to the left.
I've tried to find articles on how to do this within Shopify forums, but have yet to find one and I'm unsure where within the embedded code these elements are to change. Shopify doesn't offer customization support for their buy buttons either. I do not want to disable the iFrame.
JSFiddle: https://jsfiddle.net/johnsmithh/eo4rzLwc/2/
Code:
<div id="product-component-1580935128063">
<script type="text/javascript">
/*<![CDATA[*/
(function () {
var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
if (window.ShopifyBuy) {
if (window.ShopifyBuy.UI) {
ShopifyBuyInit();
} else {
loadScript();
}
} else {
loadScript();
}
function loadScript() {
var script = document.createElement('script');
script.async = true;
script.src = scriptURL;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
script.onload = ShopifyBuyInit;
}
function ShopifyBuyInit() {
var client = ShopifyBuy.buildClient({
domain: 'missingnewyork.myshopify.com',
storefrontAccessToken: '8ad1e9d2d113621e1e9785f5a84b7330',
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('product', {
id: '4448713736258',
node: document.getElementById('product-component-1580935128063'),
moneyFormat: '%24%7B%7Bamount%7D%7D',
options: {
"product": {
"styles": {
"product": {
"#media (min-width: 601px)": {
"max-width": "calc(25% - 20px)",
"margin-left": "20px",
"margin-bottom": "50px"
}
},
"button": {
"font-weight": "bold",
"color": "#000000",
":hover": {
"color": "#000000",
"background-color": "#e6e6e6"
},
"background-color": "#ffffff",
":focus": {
"background-color": "#e6e6e6"
},
"border-radius": "5px"
},
},
"option": {
"display": "inline-block",
"width": "20px",
},
"contents": {
"img": false,
"title": false,
"price": false
},
"text": {
"outOfStock": "SOLD OUT"
},
},
"productSet": {
"styles": {
"products": {
"#media (min-width: 601px)": {
"margin-left": "-20px"
}
}
}
},
"modalProduct": {
"contents": {
"img": false,
"imgWithCarousel": true,
"button": false,
"buttonWithQuantity": true
},
"styles": {
"product": {
"#media (min-width: 601px)": {
"max-width": "100%",
"margin-left": "0px",
"margin-bottom": "0px"
}
},
"button": {
"font-weight": "bold",
"color": "#000000",
":hover": {
"color": "#000000",
"background-color": "#e6e6e6"
},
"background-color": "#ffffff",
":focus": {
"background-color": "#e6e6e6"
},
"border-radius": "5px"
}
},
"text": {
"button": "ADD TO CART"
}
},
"cart": {
"styles": {
"button": {
"font-weight": "bold",
"color": "#000000",
":hover": {
"color": "#000000",
"background-color": "#e6e6e6"
},
"background-color": "#ffffff",
":focus": {
"background-color": "#e6e6e6"
},
"border-radius": "5px"
},
"title": {
"color": "#ffffff"
},
"header": {
"color": "#ffffff"
},
"lineItems": {
"color": "#ffffff"
},
"subtotalText": {
"color": "#ffffff"
},
"subtotal": {
"color": "#ffffff"
},
"notice": {
"color": "#ffffff"
},
"currency": {
"color": "#ffffff"
},
"close": {
"color": "#ffffff",
":hover": {
"color": "#ffffff"
}
},
"empty": {
"color": "#ffffff"
},
"noteDescription": {
"color": "#ffffff"
},
"discountText": {
"color": "#ffffff"
},
"discountIcon": {
"fill": "#ffffff"
},
"discountAmount": {
"color": "#ffffff"
},
"cart": {
"background-color": "#000000"
},
"footer": {
"background-color": "#000000"
}
},
"text": {
"title": "CART",
"empty": "YOUR CART IS EMPTY.",
"notice": "Shipping and taxes are added at checkout.",
}
},
"toggle": {
"styles": {
"toggle": {
"font-weight": "bold",
"background-color": "#ffffff",
":hover": {
"background-color": "#e6e6e6"
},
":focus": {
"background-color": "#e6e6e6"
}
},
"count": {
"color": "#000000",
":hover": {
"color": "#000000"
}
},
"iconPath": {
"fill": "#000000"
}
}
},
"lineItem": {
"styles": {
"variantTitle": {
"color": "#ffffff"
},
"title": {
"color": "#ffffff"
},
"price": {
"color": "#ffffff"
},
"fullPrice": {
"color": "#ffffff"
},
"discount": {
"color": "#ffffff"
},
"discountIcon": {
"fill": "#ffffff"
},
"quantity": {
"color": "#ffffff"
},
"quantityIncrement": {
"color": "#ffffff",
"border-color": "#ffffff"
},
"quantityDecrement": {
"color": "#ffffff",
"border-color": "#ffffff"
},
"quantityInput": {
"color": "#ffffff",
"border-color": "#ffffff"
}
}
}
},
});
});
}
})();
/*]]>*/
</script>
</div>
Thanks!
You have a few options. What I would suggest is removing the iFrame altogether and styling it in a CSS file. It'd look something like this:
moneyFormat: '%24%7B%7Bamount%7D%7D',
options: {
"product": {
"iframe": false,
...
}
}
You can find more information about it here, just skip to "Custom styling without iframes". There are some other alternatives, but I believe this one would be the best one to have full control as you wish.
Keep in mind that naturally it will mess up the pre-built CSS. Here is an example I coded for you.

Host config bot framework [supportsInteractivity]

I am working on the webchat bot framework, more particularly on the hostconfig part of the adaptive card.
I want to use container selectaction but I do not have the expected display.
I created a basic card with container that I display on my chatbot but when I put the mouse cursor on the container, the card does not make the interactive effect yet the property supportsInteractivity is true.
Does anyone have any ideas?
Thans you
Here is my hostconfig:
{
"supportsInteractivity": true,
"spacing": {
"small": 4,
"default": 8,
"medium": 16,
"large": 24,
"extraLarge": 32,
"padding": 8
},
"separator": {
"lineThickness": 1,
"lineColor": "#cccccc"
},
"fontFamily": "\"Segoe UI\", sans-serif",
"fontSizes": {
"small": 12,
"default": 13,
"medium": 15,
"large": 17,
"extraLarge": 19
},
"fontWeights": {
"lighter": 200,
"default": 400,
"bolder": 700
},
"containerStyles": {
"default": {
"backgroundColor": "#00000000",
"foregroundColors": {
"default": {
"default": "#000000",
"subtle": "#808c95"
},
"accent": {
"default": "#2e89fc",
"subtle": "#802E8901"
},
"attention": {
"default": "#ffd800",
"subtle": "#CCFFD800"
},
"good": {
"default": "#00ff00",
"subtle": "#CC00FF00"
},
"warning": {
"default": "#ff0000",
"subtle": "#CCFF0000"
}
}
},
"emphasis": {
"backgroundColor": "#08000000",
"foregroundColors": {
"default": {
"default": "#333333",
"subtle": "#EE333333"
},
"accent": {
"default": "#2e89fc",
"subtle": "#882E89FC"
},
"attention": {
"default": "#cc3300",
"subtle": "#DDCC3300"
},
"good": {
"default": "#54a254",
"subtle": "#DD54A254"
},
"warning": {
"default": "#e69500",
"subtle": "#DDE69500"
}
}
}
},
"imageSizes": {
"small": 40,
"medium": 80,
"large": 160
},
"actions": {
"maxActions": 100,
"spacing": "default",
"buttonSpacing": 8,
"showCard": {
"actionMode": "inline",
"inlineTopMargin": 8
},
"actionsOrientation": "vertical",
"actionAlignment": "stretch"
},
"adaptiveCard": {
"allowCustomStyle": false
},
"imageSet": {
"imageSize": "medium",
"maxImageHeight": 100
},
"factSet": {
"title": {
"color": "default",
"size": "default",
"isSubtle": false,
"weight": "bolder",
"wrap": true,
"maxWidth": 150
},
"value": {
"color": "default",
"size": "default",
"isSubtle": false,
"weight": "default",
"wrap": true
},
"spacing": 8
}
}
and there is my card :
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Text",
"weight": "bolder",
"size": "large",
"color": "accent",
"horizontalAlignment": "center"
}
]
},
{
"type": "Container",
"separator": true,
"items": [
{
"type": "TextBlock",
"text": "text",
"size": "medium",
"horizontalAlignment": "center",
"wrap": true
}
]
},
{
"type": "Container",
"separator": true,
"items": [
{
"type": "TextBlock",
"text": "text",
"horizontalAlignment": "center"
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"style": "default",
"items": [
{
"type": "Container",
"style": "emphasis",
"items": [
{
"type": "TextBlock",
"text": "text"
}
],
"selectAction": {
"type": "Action.Submit",
"title": "text",
"data": {
"action": "1"
}
}
}
]
}
]
},
{
"type": "Container",
"separator": false,
"items": [
{
"type": "TextBlock",
"text": "text",
"horizontalAlignment": "center"
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"style": "default",
"items": [
{
"type": "Container",
"style": "emphasis",
"items": [
{
"type": "TextBlock",
"text": "text"
}
],
"selectAction": {
"type": "Action.Submit",
"title": "text",
"data": {
"action": "1"
}
}
}
]
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"style": "default",
"items": [
{
"type": "Container",
"style": "emphasis",
"items": [
{
"type": "TextBlock",
"text": "text"
}
],
"selectAction": {
"type": "Action.Submit",
"title": "text",
"data": {
"action": "1"
}
}
}
]
}
]
}
],
"actions": [
{
"type": "Action.Submit",
"title": "👍",
"data": {
"action": "2"
}
},
{
"type": "Action.ShowCard",
"title": "👎",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "Input.Text",
"id": "comment",
"isMultiline": true,
"placeholder": "Add a comment"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Soumettre",
"data": {
"action": "3"
}
}
]
}
}
]
}

ElasticSearch - Match all nested variations in a document

I have several products with variations like the one below
{
"title": "100% Cotton Unstitched Suit For Men",
"slug": "100-cotton-unstitched-suit-for-men",
"price": 200,
"sale_price": 0,
"vendor_id": 32,
"featured": 0,
"viewed": 20,
"stock": 4,
"sku": "XXX-B",
"rating": 0,
"active": 1,
"vendor_name": "vendor_name",
"category": [
"men_fashion",
"traditional_clothing",
"unstitched_fabric"
],
"image": "imagename.jpg",
"variations": [
{
"variation_id": "34",
"stock": 5,
"price": 200,
"variation_image": "",
"sku": "XXX-C",
"size": "m",
"color": "red"
},
{
"variation_id": "35",
"stock": 5,
"price": 200,
"variation_image": "",
"sku": "XXX-D",
"size": "l",
"color": "red"
}
]
}
I am looking for a query that would have all of the below parameters
Get all products in a certain category
Get all products that are black
Get sizes l and m
My current Query:
{
"size": 15,
"from": 0,
"query": {
"filtered": {
"filter": {
"bool": {
"must": [
{
"match": {
"category": "women_fashion"
}
},
{
"nested": {
"path": "variations",
"query": {
"bool": {
"must": [{
"match": {
"variations.color": "red"
}
},
{
"match": {
"variations.size": "l"
}
},
{
"match": {
"variations.size": "m"
}
}
]
}
}
}
}
]
}
}
}
}
}
It works fine if i only search for 1 size. But once i search for 2 sizes it gives no records. My guess is that it looks for all 3 parameters in every nested variation, which obviously it cant find. How would i modify the query to search for
size: m, color: black
size: l, color: black
I have also tried using a nested filter, but the issue with this is that it works like "SHOULD" query while i am looking for a "MUST" query. ie. it shows all the products have large variations while i just want to show products that are large and red.
My Second Query:
{
"size": 15,
"from": 0,
"query": {
"filtered": {
"filter": {
"bool": {
"must": [
{
"match": {
"category": "women_fashion"
}
},
{
"nested": {
"path": "variations",
"query": {
"bool":{
"filter": [
{
"term": {
"variations.color": "red"
}
},
{
"term": {
"variations.size": "l"
}
}
]
}
}
}
}
]
}
}
}
}
}
You can put the size variations into a clause of it's own so at least one of the sizes will match
{
"query": {
"filtered": {
"filter": {
"bool": {
"must": [
{
"match": {
"category": "women_fashion"
}
},
{
"nested": {
"path": "variations",
"query": {
"bool": {
"must": [
{
"match": {
"variations.color": "red"
}
},
{
"query": {
"bool": {
"should": [
{
"match": {
"variations.size": "l"
}
},
{
"match": {
"variations.size": "m"
}
}
]
}
}
}
]
}
}
}
}
]
}
}
}
}
}

ElasticSearch combine conditional statements 'and' with 'or'

Purpose of the query below is to return n results for each criteria i.e. it must match partnersites 16 and match 'venueTown' or partnersites 16 and match 'venueName'. Currently it returns the results where each field must contain the same string. In my case fields: name, venueName and venueTown must contain manchester, but I want separate results for each pair {(partnersites, venueName), (partnersites, venueTown)}.
{
"size": 0,
"_source": ["groupedName", "groupedDisplayName", "groupedUrl", "eventCode", "venueName", "venueTown", "venueId", "media"],
"query": {
"bool": {
"must": [{
"match": {
"partnersites": {
"query": "16"
}
}
}, {
"match": {
"name": "manchester"
}
}, {
"match": {
"venueName": "manchester"
}
}, {
"match": {
"venueTown": "manchester"
}
}, {
"match": {
"venueTown": "manchester"
}
}]
}
},
"aggs": {
"distinct_names": {
"terms": {
"field": "name.keyword",
"size": 10
},
"aggs": {
"top_tag_hits": {
"top_hits": {
"size": 1,
"_source": ["groupedName", "groupedDisplayName", "groupedUrl", "eventCode", "venueName", "venueTown", "venueId", "media"]
}
}
}
},
"distinct_venues": {
"terms": {
"field": "venueName.keyword",
"size": 10
},
"aggs": {
"top_tag_hits": {
"top_hits": {
"size": 1,
"_source": ["groupedName", "groupedDisplayName", "groupedUrl", "eventCode", "venueName", "venueTown", "venueId", "media"]
}
}
}
},
"distinct_towns": {
"terms": {
"field": "venueTown.keyword",
"size": 10
},
"aggs": {
"top_tag_hits": {
"top_hits": {
"size": 1,
"_source": ["groupedName", "groupedDisplayName", "groupedUrl", "eventCode", "venueName", "venueTown", "venueId", "media"]
}
}
}
}
}
}
Try this:
{
"size": 0,
"query": {
"bool": {
"must": [
{
"bool": {
"should": [
{
"bool": {
"must": [
{
"term": {
"partnersites": "16"
}
},
{
"match_phrase_prefix": {
"name": "mancheste"
}
}
]
}
},
{
"bool": {
"must": [
{
"term": {
"partnersites": "16"
}
},
{
"match_phrase_prefix": {
"venueName": "mancheste"
}
}
]
}
},
{
"bool": {
"must": [
{
"term": {
"partnersites": "16"
}
},
{
"match_phrase_prefix": {
"venueTown": "mancheste"
}
}
]
}
}
]
}
}
]
}
},
"aggs": {
"distinct_names": {
"terms": {
"field": "groupedName.keyword",
"size": 30
},
"aggs": {
"top_tag_hits": {
"top_hits": {
"size": 1,
"_source": [
"groupedName",
"groupedDisplayName",
"groupedUrl",
"eventCode",
"venueName",
"venueTown",
"venueId",
"media"
]
}
}
}
}
}
}