Azure Stream Analytics GetRecordPropertyValue puzzle - azure-stream-analytics

Could anyone please spot easily what am I doing wrong here?
I'm using the query below:
SELECT
GetArrayElement(Requests.context.custom.dimensions, 0),
GetType( GetArrayElement(Requests.context.custom.dimensions, 0)),
GetRecordPropertyValue(GetArrayElement(Requests.context.custom.dimensions, 0), "Response-Body")
INTO
PowerBICreateScheduleDurations
FROM
AppInsightsIncomingRequests AS Requests
To parse this input file:
{
"request": [{
"id": "dff22190-ecc8-44d2-aa3f-453c3d533c4d",
"name": "",
"count": 1,
"responseCode": 401,
"success": false,
"url": "",
"urlData": {
"base": "",
"host": "",
"hashTag": "",
"protocol": "https"
},
"durationMetric": {
"value": 4786.0,
"count": 1.0,
"min": 4786.0,
"max": 4786.0,
"stdDev": 0.0,
"sampledValue": 4786.0
}
}
],
"internal": {
"data": {
"id": "f0b0f800-ab16-11e8-89c8-ed6412963258",
"documentVersion": "1.61"
}
},
"context": {
"data": {
"eventTime": "2018-08-28T23:05:54.8884157Z",
"isSynthetic": false,
"samplingRate": 100.0
},
"cloud": {},
"device": {
"type": "PC",
"roleName": "",
"roleInstance": "",
"screenResolution": {}
},
"session": {
"isFirst": false
},
"operation": {
"id": "dff22190-ecc8-44d2-aa3f-453c3d533c4d",
"parentId": "dff22190-ecc8-44d2-aa3f-453c3d533c4d",
"name": ""
},
"location": {
"clientip": "0.0.0.0",
"continent": "North America",
"country": "United States"
},
"custom": {
"dimensions": [{
"Response-Body": "response 0"
}, {
"Operation Name": ""
}, {
"ApimanagementRegion": ""
}, {
"ApimanagementServiceName": ""
}, {
"Cache": "None"
}, {
"API Name": ""
}, {
"HTTP Method": "GET"
}
],
"metrics": [{
"Response Size": {
"count": 1.0,
"max": 343.0,
"min": 343.0,
"sampledValue": 343.0,
"stdDev": 0.0,
"sum": 343.0,
"value": 343.0
}
}, {
"Request Size": {
"count": 1.0,
"max": 0.0,
"min": 0.0,
"sampledValue": 0.0,
"stdDev": 0.0,
"sum": 0.0,
"value": 0.0
}
}, {
"Client Time (in ms)": {
"count": 1.0,
"max": 0.0,
"min": 0.0,
"sampledValue": 0.0,
"stdDev": 0.0,
"sum": 0.0,
"value": 0.0
}
}
]
}
}
}
The desired behavior is for the GetRecordPropertyValue... line to extract the "response 0" string, yet it returns null. The downloaded output is below:
[{
"getarrayelement": {
"Response-Body": "response 0"
},
"gettype": "record",
"getrecordpropertyvalue": null
}
]

Please change you query to use single quotes around 'Response-Body'. In SQL double quotes are used to escape column names (similar to []) so you query is interpreted as column with name "Response-Body" instead of string constant "Response-Body"
SELECT
GetArrayElement(Requests.context.custom.dimensions, 0),
GetType( GetArrayElement(Requests.context.custom.dimensions, 0)),
GetRecordPropertyValue(GetArrayElement(Requests.context.custom.dimensions, 0), 'Response-Body')
INTO
PowerBICreateScheduleDurations
FROM
AppInsightsIncomingRequests AS Requests

Related

Mule4 Dataweave transformation

I need to transform the below JSON
Input :-
{
"type": "donut",
"weight-unit": "lb",
"price-unit": "$/lb",
"price": 10.75,
"batters":
{
"batter":
[
{ "id": "10011", "type": "Original","weight": 500},
{ "id": "10021", "type": "Chocolate","weight": 200, "price": 11.75 },
{ "id": "10031", "type": "Blueberry", "weight": 250, "price": 11.75 },
{ "id": "10041", "type": "Devil's Food", "weight": 150}
]
},
"topping":
[
{ "id": "50011", "type": "None", "price": 0 },
{ "id": "50021", "type": "Glazed", "price": 45.23},
{ "id": "50051", "type": "Sugar", "price": 34.1},
{ "id": "50071", "type": "Powdered Sugar", "price": 21.11},
{ "id": "50061", "type": "Chocolate with Sprinkles", "price": 34.43 },
{ "id": "50031", "type": "Chocolate", "price": 87.40},
{ "id": "50041", "type": "Maple", "price": 64.11}
]
}
The output that I want is
Output :-
{
"type": "donut",
"ChocolateFlavoredGlazedDonut" : {
"weight": 200,
"unit": "kg",
"price": 56.98,
"unit": "$/kg",
},
"ChocolateFlavoredSprinklesDonut" : {
"weight": 200,
"unit": "kg",
"price": 46.18,
"unit": "$/kg",
},
"BlueberryFlavoredSugarDonut" : {
"weight": 250,
"unit": "kg",
"price": 45.85,
"unit": "$/kg",
},
"OriginalGlazedDonut" : {
"weight": 500,
"unit": "kg",
"price": 45.23,
"unit": "$/kg",
},
"OriginalMapleDonut" : {
"weight": 500,
"unit": "kg",
"price": 64.11,
"unit": "$/kg",
},
"OriginalSugarDonut" : {
"weight": 500,
"unit": "kg",
"price": 34.1,
"unit": "$/kg",
},
}
Explanantion:-
"BatterName + ToppingName" : {
"weight": 500(batter weight),
"unit": "kg"(hard coded),
"price": 34.1(batter price + topping price),
"unit": "$/kg"(hard coded,
}
For example if Batter Name is "Chocolate", then there will be 6 toppings for Chocolate batter and so on for each batter. So total batter number is 4 and topping is 8 , I want 32 items in the final output
You basically need a cross join on toppings and batters. You can use join from dw::core::Arrays to do that. It accepts the 2 arrays as input along with two joining criteria (which are inline functions). For that you can just pass a function that always returns true (or any other static value but it should be same in both criteria functions) so the function will merge every item with every item, and you will get all combos possible.
I noticed that the names of the snack after combining is not very straight forward, so I crated a separated function for that.
%dw 2.0
import join from dw::core::Arrays
import capitalize from dw::core::Strings
output application/json
fun getComboName(batterName, toppingName, snackType) =
capitalize(batterName)
++ (if(lower(batterName) != "original")("Flavoured") else "")
++ (if(lower(toppingName) != "none") capitalize((toppingName splitBy " ")[-1]) else "")
++ capitalize(snackType)
---
join(
payload.batters.batter,
payload.topping,
(a) -> true,
(a) -> true
)
reduce ((combo, acc={"type": payload."type"}) -> {
(acc),
(getComboName(combo.l."type", combo.r."type", payload."type")): {
weight: combo.l.weight,
unit: "kg",
price: (combo.l.price default 0) + (combo.r.price default 0),
unit: "\$/kg"
}
})

Square API: Object version does not match latest database version

I'm trying to use the following Square API endpoint to update an item, but I'm getting some errors. Here is the item that I'm trying to update.
{
"type": "ITEM",
"id": "7HXK6NVBDKSOK64CCAYZJ2KW",
"updated_at": "2020-08-08T21:43:41.849Z",
"version": 1596923021849,
"is_deleted": false,
"present_at_all_locations": false,
"present_at_location_ids": [
"1JZ5JTPBW0EXY"
],
"item_data": {
"name": "Hummus Plate",
"description": "Olives, feta, tomatoes, tzatziki and warm pita.",
"visibility": "PRIVATE",
"category_id": "ARB5LTTDUSER6T66ZWYO65FL",
"variations": [
{
"type": "ITEM_VARIATION",
"id": "HBIHPLROOJUUNUSW3BZUDQ5J",
"updated_at": "2020-08-08T21:40:14.581Z",
"version": 1596922814581,
"is_deleted": false,
"present_at_all_locations": false,
"present_at_location_ids": [
"1JZ5JTPBW0EXY"
],
"item_variation_data": {
"item_id": "7HXK6NVBDKSOK64CCAYZJ2KW",
"name": "Regular",
"ordinal": 0,
"pricing_type": "FIXED_PRICING",
"price_money": {
"amount": 1000,
"currency": "USD"
}
}
}
],
"product_type": "REGULAR",
"skip_modifier_screen": true,
"ecom_available": false,
"ecom_visibility": "UNINDEXED"
}
}
Here the body content.
{
"batches": [{
"objects": [{
"type": "ITEM_VARIATION",
"id": "T6KKCATDIU2VV4BDBMVGML4W",
"item_variation_data": {
"item_id": "FNWWGFTBQWFAYK6JGBD3LDLD",
"pricing_type": "FIXED_PRICING",
"price_money": {
"amount": 150,
"currency": "USD"
}
}
}]
}],
"idempotency_key": "61994762-3a6s-4b75-sf81-fdfaf"
}
Here is the error I'm getting:
**{
"errors": [
{
"category": "INVALID_REQUEST_ERROR",
"code": "VERSION_MISMATCH",
"detail": "Object version does not match latest database version.",
"field": "version"
}
]
}**
I'm not sure what I'm doing wrong, but I appreciate any help I can get. Thank you in advance!
When updating a catalog object in Square, you need to provide the latest version number in the request.
{
"batches": [{
"objects": [{
"type": "ITEM_VARIATION",
"id": "T6KKCATDIU2VV4BDBMVGML4W",
"version": "12345",
"item_variation_data": {
"item_id": "FNWWGFTBQWFAYK6JGBD3LDLD",
"pricing_type": "FIXED_PRICING",
"price_money": {
"amount": 150,
"currency": "USD"
}
}
}]
}],
"idempotency_key": "61994762-3a6s-4b75-sf81-fdfaf"
}

Vega-Lite: How to use slider value in transform calculation

How do I use the value of a slider in the transform?
This example from vega online editor plots a sine and cosine wave.
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "Plots two functions using a generated sequence.",
"width": 300,
"height": 150,
"data": {
"sequence": {
"start": 0,
"stop": 12.7,
"step": 0.1,
"as": "x"
}
},
"transform": [
{
"calculate": "sin(datum.x)",
"as": "sin(x)"
},
{
"calculate": "cos(datum.x)",
"as": "cos(x)"
},
{
"fold": ["sin(x)", "cos(x)"]
}
],
"mark": "line",
"encoding": {
"x": {
"type": "quantitative",
"field": "x"
},
"y": {
"field": "value",
"type": "quantitative"
},
"color": {
"field": "key",
"type": "nominal",
"title": null
}
}
}
I would like to add two sliders and use their values in the calculation. I can define sliders using:
"selection" : {
"amp" : {
"type" : "single",
"fields" : ["sin", "cos"],
"bind": {
"sin": { "input" : "range", "min": 0.0, "max": 10.0, "step": 0.1},
"cos": { "input" : "range", "min": 0.0, "max": 10.0, "step": 0.1}
}
}
},
How do I access the slider values to use in the calculations? Something like
{
"calculate": "amp.sin * sin(datum.x)",
"as": "sin(x)"
},
You can do this in exactly the way you wrote in your question. Additionally, adding an initial value will make the selections valid before you interact with them.
Here is a full example (vega editor):
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "Plots two functions using a generated sequence.",
"width": 300,
"height": 150,
"data": {"sequence": {"start": 0, "stop": 12.7, "step": 0.1, "as": "x"}},
"transform": [
{"calculate": "amp.sin * sin(datum.x)", "as": "sin(x)"},
{"calculate": "amp.cos * cos(datum.x)", "as": "cos(x)"},
{"fold": ["sin(x)", "cos(x)"]}
],
"mark": "line",
"encoding": {
"x": {"type": "quantitative", "field": "x"},
"y": {"field": "value", "type": "quantitative"},
"color": {"field": "key", "type": "nominal", "title": null}
},
"selection": {
"amp": {
"type": "single",
"fields": ["sin", "cos"],
"init": {"sin": 1, "cos": 1},
"bind": {
"sin": {"input": "range", "min": 0, "max": 10, "step": 0.1},
"cos": {"input": "range", "min": 0, "max": 10, "step": 0.1}
}
}
}
}

Parsing Twitter Information with jq ("text": null)

I am trying to do some Twitter-analysis via Twurl and extract some information via jq.
I firstly get some tweets via twurl with the command
twurl /1.1/users/search.json?q=judo
Then i used the following line to structure the outpot with jq:
twurl /1.1/users/search.json?q=judo | jq
i get something like this:
[
{
"id": 173752759,
"id_str": "173752759",
"name": "#JudoWorlds πŸ₯‹",
"screen_name": "Judo",
"location": "Worldwide",
"description": "The Official Twitter Account of the International Judo Federation πŸ₯‹",
"url": "https:.....",
"entities": {
"url": {
"urls": [
{
"url": "https://......",
"expanded_url": "https://www.ijf.org/news/show/5-must-see-preliminary-round-clashes-2",
"display_url": "ijf.org/news/show/5-mu…",
"indices": [
0,
23
]
}
]
},
"description": {
"urls": []
}
},
"protected": false,
"followers_count": 59854,
"friends_count": 847,
"listed_count": 529,
"created_at": "Mon Aug 02 07:55:15 +0000 2010",
"favourites_count": 7074,
"utc_offset": null,
"time_zone": null,
"geo_enabled": true,
"verified": true,
"statuses_count": 16532,
"lang": null,
"status": {
"created_at": "Fri Aug 30 08:27:10 +0000 2019",
"id": 1167353053282013200,
"id_str": "1167353053282013184",
"text": "#JudoWorlds The Alternative Promo \n\n#NeilAdamsJudo https://.....",
"truncated": false,
"entities": {
"hashtags": [
{
"text": "JudoWorlds",
"indices": [
0,
11
]
}
],
"symbols": [],
"user_mentions": [
{
"screen_name": "NeilAdamsJudo",
"name": "Neil Adams MBE",
"id": 40488733,
"id_str": "40488733",
"indices": [
36,
50
]
}
],
"urls": [],
"media": [
{
"id": 1167352899267002400,
"id_str": "1167352899267002369",
"indices": [
51,
74
],
"media_url": "http://pbs.twimg.com/ext_tw_video_thumb/1167352899267002369/pu/img/6yD1r7uaPV7p3y6a.jpg",
"media_url_https": "https://pbs.twimg.com/ext_tw_video_thumb/1167352899267002369/pu/img/6yD1r7uaPV7p3y6a.jpg",
"url": "https://......",
"display_url": "pic.twitter.com/0RlLbKLkN8",
"expanded_url": "https://twitter.com/Judo/status/1167353053282013184/video/1",
"type": "photo",
"sizes": {
"thumb": {
"w": 150,
"h": 150,
"resize": "crop"
},
"medium": {
"w": 1200,
"h": 675,
"resize": "fit"
},
"small": {
"w": 680,
"h": 383,
"resize": "fit"
},
"large": {
"w": 1280,
"h": 720,
"resize": "fit"
}
}
}
]
},
"extended_entities": {
"media": [
{
"id": 1167352899267002400,
"id_str": "1167352899267002369",
"indices": [
51,
74
],
"media_url": "http://pbs.twimg.com/ext_tw_video_thumb/1167352899267002369/pu/img/6yD1r7uaPV7p3y6a.jpg",
"media_url_https": "https://pbs.twimg.com/ext_tw_video_thumb/1167352899267002369/pu/img/6yD1r7uaPV7p3y6a.jpg",
"url": "https://.....",
"display_url": "pic.twitter.com/0RlLbKLkN8",
"expanded_url": "https://twitter.com/Judo/status/1167353053282013184/video/1",
"type": "video",
"sizes": {
"thumb": {
"w": 150,
"h": 150,
"resize": "crop"
},
"medium": {
"w": 1200,
"h": 675,
"resize": "fit"
},
"small": {
"w": 680,
"h": 383,
"resize": "fit"
},
"large": {
"w": 1280,
"h": 720,
"resize": "fit"
}
},
"video_info": {
"aspect_ratio": [
16,
9
],
"duration_millis": 48800,
"variants": [
{
"bitrate": 256000,
"content_type": "video/mp4",
"url": "https://video.twimg.com/ext_tw_video/1167352899267002369/pu/vid/480x270/v4nkTg6qs9rpLq8M.mp4?tag=10"
},
{
"content_type": "application/x-mpegURL",
"url": "https://video.twimg.com/ext_tw_video/1167352899267002369/pu/pl/SQN57QxQFYcKWV7l.m3u8?tag=10"
},
{
"bitrate": 2176000,
"content_type": "video/mp4",
"url": "https://video.twimg.com/ext_tw_video/1167352899267002369/pu/vid/1280x720/8cyNocB_8CRjwVCI.mp4?tag=10"
},
{
"bitrate": 832000,
"content_type": "video/mp4",
"url": "https://video.twimg.com/ext_tw_video/1167352899267002369/pu/vid/640x360/uy2U7D_AEmbLdqEK.mp4?tag=10"
}
]
},
"additional_media_info": {
"monetizable": false
}
}
]
},
"source": "Twitter for Android",
"in_reply_to_status_id": null,
"in_reply_to_status_id_str": null,
"in_reply_to_user_id": null,
"in_reply_to_user_id_str": null,
"in_reply_to_screen_name": null,
"geo": null,
"coordinates": null,
"place": null,
"contributors": null,
"is_quote_status": false,
"retweet_count": 4,
"favorite_count": 17,
"favorited": false,
"retweeted": false,
"possibly_sensitive": false,
"lang": "en"
},
"contributors_enabled": false,
"is_translator": false,
"is_translation_enabled": false,
"profile_background_color": "0099CC",
"profile_background_image_url": "http://abs.twimg.com/images/themes/theme1/bg.png",
"profile_background_image_url_https": "https://abs.twimg.com/images/themes/theme1/bg.png",
"profile_background_tile": false,
"profile_image_url": "http://pbs.twimg.com/profile_images/1057928008797970433/O3l2sKj0_normal.jpg",
"profile_image_url_https": "https://pbs.twimg.com/profile_images/1057928008797970433/O3l2sKj0_normal.jpg",
"profile_banner_url": "https://pbs.twimg.com/profile_banners/173752759/1565853008",
"profile_link_color": "0C3C42",
"profile_sidebar_border_color": "8F320A",
"profile_sidebar_fill_color": "F2CF41",
"profile_text_color": "000000",
"profile_use_background_image": true,
"has_extended_profile": false,
"default_profile": false,
"default_profile_image": false,
"following": false,
"follow_request_sent": false,
"notifications": false,
"translator_type": "none"
},
Because i am only interested in certain informations i tried to get the name and the text of the tweet with the following command:
twurl /1.1/users/search.json?q=judo | jq ".[] | { name: .name, text: .text }"
and i get this:
{
"name": "#JudoWorlds πŸ₯‹",
"text": null
}
{
"name": "#WeAreGBJudo",
"text": null
}
{
"name": "CBJ",
"text": null
}
{
"name": "Santos Futebol Clube",
"text": null
}
{
"name": "Marius Vizer",
"text": null
}
{
"name": "FF Judo",
"text": null
}
{
"name": "Santos FC πŸ‡Ί πŸ‡Έ πŸ‡¬ πŸ‡§ ",
"text": null
}
{
"name": "USA Judo",
"text": null
}
{
"name": "ε…¨ζ—₯ζœ¬ζŸ”ι“ι€£η›Ÿ -ゴジラジャパン-",
"text": null
}
{
"name": "Vila Belmiro",
"text": null
}
{
"name": "Deutscher Judo-Bund",
"text": null
}
{
"name": "Bruno Secco",
"text": null
}
{
"name": "Bobby Judo",
"text": null
}
{
"name": "African Judo Union",
"text": null
}
{
"name": "JudoInside.com",
"text": null
}
{
"name": "For competitive judo",
"text": null
}
{
"name": "Judo Canada",
"text": null
}
{
"name": "Neil Adams MBE",
"text": null
}
{
"name": "Sophie Cox",
"text": null
}
{
"name": "Galatasaray Judo",
"text": null
}
Why is this and how can i fix it?
I tried other commands like :
twurl /1.1/search/tweets.json?q=afd | jq ".[] | { name: .name, text: .text }"
but got the error
jq: error (at <stdin>:0): Cannot index array with string "name"
If you need nested 'text' value from 'status' field you should use:
.[] | { name: .name, text: .status.text }
Or shorter version:
.[] | { name, text: .status.text }

Highcharts-vue: Stacked Columns with Drilldown

I'm trying to replicate this chart http://jsfiddle.net/edzk8Loe/ using vue js.
To be honest, I'm learning vuejs and so I'm trying to replicate already ready projects to get confident quickly.
The issue I'm facing at the moment I guess is a logic one. The functions have to create new series as drilldown when click on a column, seams not triggered at all. I'm not getting any error in the console and I'm
Not having yet a totally clear idea about the structure, I think I'm messing up the code. Hereunder you'll find the code I'm using in VUE.
<template>
<div class="chartElem">
<div class="row">
<highcharts class="chart" :constructor-type="'chart'" :options="chartOptions"></highcharts>
</div>
</div>
</template>
<script>
import HighchartsVue from "highcharts-vue";
import Highcharts from "highcharts";
import dataModule from "highcharts/modules/data";
import drilldown from "highcharts/modules/drilldown";
drilldown( Highcharts );
dataModule( Highcharts );
let drilldownChart, drilldownEvent, drilldownLevel = 0;
const chartOptions = {
chart: {
"type": "column",
},
credits: {
"enabled": false
},
plotOptions: {
column: {
stacking: "normal",
events: {
click: function ( event ) {
return false;
}
}
},
"series": {
"borderWidth": 0,
"dataLabels": {
"enabled": true,
"style": {
"textShadow": false,
"fontSize": "10px"
}
}
}
},
"legend": {
"enabled": false,
},
"yAxis": {
"stackLabels": {
"enabled": false,
"style": {
"fontWeight": "bold",
"color": "gray"
}
}
},
"title": {
"text": "Stacked Column Drilldown Chart",
"fontWeight": "bold"
},
"xAxis": {
"title": {},
"type": "category"
},
"yAxis": [ {
"title": {
"text": "Number of Students"
},
"min": 0,
"allowDecimals": false
} ],
"series": [ {
"name": "Outstanding",
"color": "rgb(102, 168, 255)",
"data": [ {
"name": "English",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "105"
}, {
"name": "Social Science",
"y": 1,
"parentCategoryHierarchyId": "0",
"graphParentId": "119",
"drilldown": true
}, {
"name": "Science",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "126"
}, {
"name": "Maths",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "139"
}, {
"name": "Hindi",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "146"
} ]
}, {
type: 'column',
"name": "Very Good",
"color": "rgb(128, 183, 255)",
"data": [ {
"name": "English",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "105"
}, {
"name": "Social Science",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "119",
"drilldown": true
}, {
"name": "Science",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "126"
}, {
"name": "Maths",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "139"
}, {
"name": "Hindi",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "146"
} ]
}, {
type: 'column',
"name": "Satisfactory",
"color": "rgb(179, 212, 255)",
"data": [ {
"name": "English",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "105"
}, {
"name": "Social Science",
"y": 1,
"parentCategoryHierarchyId": "0",
"graphParentId": "119",
"drilldown": true
}, {
"name": "Science",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "126"
}, {
"name": "Maths",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "139"
}, {
"name": "Hindi",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "146"
} ]
}, {
type: 'column',
"name": "Needs Improvement",
"color": "rgb(204, 226, 255)",
"data": [ {
"name": "English",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "105"
}, {
"name": "Social Science",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "119",
"drilldown": true
}, {
"name": "Science",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "126"
}, {
"name": "Maths",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "139"
}, {
"name": "Hindi",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "146"
} ]
}, {
type: 'column',
"name": "Not Performing",
"color": "rgb(230, 242, 255)",
"data": [ {
"name": "English",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "105"
}, {
"name": "Social Science",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "119",
"drilldown": true
}, {
"name": "Science",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "126"
}, {
"name": "Maths",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "139"
}, {
"name": "Hindi",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "146"
} ]
} ]
};
export default {
data: () => ( {
chartOptions,
drilldownChart,
drilldownEvent,
drilldownLevel
} ),
methods: {},
computed:{
drilldown: function ( e ) {
if ( !e.seriesOptions ) {
updateGraph( true, this, e );
}
},
drillup: function ( e ) {
if ( !e.seriesOptions.flag ) {
drilldownLevel = e.seriesOptions._levelNumber;
updateGraph( false );
}
}
},
mounted() {
function updateGraph( isDrilldown, chart, e ) {
if ( isDrilldown ) {
drilldownLevel++;
drilldownChart = chart;
drilldownEvent = e;
if ( drilldownLevel === 1 ) {
var drilldowns = {
'Social Science': {
name: 'Outstanding',
color: 'rgb(102, 168, 255)',
data: [ {
name: 'Geography',
y: 7,
drilldown: true
}, {
name: 'History',
y: 4
}, {
name: 'Civics',
y: 9
} ]
}
},
drilldowns2 = {
'Social Science': {
name: 'Very Good',
color: 'rgb(128, 183, 255)',
data: [ {
name: 'Geography',
y: 4,
drilldown: true
}, {
name: 'History',
y: 8
}, {
name: 'Civics',
y: 2
} ],
},
},
drilldowns3 = {
'Social Science': {
name: 'Satisfactory',
color: 'rgb(179, 212, 255)',
data: [ {
name: 'Geography',
y: 4,
drilldown: true
}, {
name: 'History',
y: 7
}, {
name: 'Civics',
y: 1
} ],
}
},
drilldowns4 = {
'Social Science': {
name: 'Needs Improvement',
color: 'rgb(204, 226, 255)',
data: [ {
name: 'Geography',
y: 2,
drilldown: true
}, {
name: 'History',
y: 7
}, {
name: 'Civics',
y: 2
} ]
}
},
drilldowns5 = {
'Social Science': {
name: 'Not Performing',
color: 'rgb(230, 242, 255)',
data: [ {
name: 'Geography',
y: 6,
drilldown: true
}, {
name: 'History',
y: 3
}, {
name: 'Civics',
y: 0
} ],
}
},
series = drilldowns[ e.point.name ],
series2 = drilldowns2[ e.point.name ],
series3 = drilldowns3[ e.point.name ],
series4 = drilldowns4[ e.point.name ],
series5 = drilldowns5[ e.point.name ];
chart.addSingleSeriesAsDrilldown( e.point, series );
chart.addSingleSeriesAsDrilldown( e.point, series2 );
chart.addSingleSeriesAsDrilldown( e.point, series3 );
chart.addSingleSeriesAsDrilldown( e.point, series4 );
chart.addSingleSeriesAsDrilldown( e.point, series5 );
chart.applyDrilldown();
} else if ( drilldownLevel === 2 ) {
var drilldown1 = {
"Geography": {
"name": "Yes",
stacking: 'percent',
color: 'red',
"data": [ {
"name": "Q1",
"y": 1
}, {
"name": "Q2",
"y": 2
}, {
"name": "Q3",
"y": 3
}, {
"name": "Q4",
"y": 4
} ]
}
};
var drilldown2 = {
"Geography": {
"name": "No",
stacking: 'percent',
color: 'green',
"data": [ {
"name": "Q1",
"y": 1
}, {
"name": "Q2",
"y": 2
}, {
"name": "Q3",
"y": 3
}, {
"name": "Q4",
"y": 4
} ]
}
};
var drilldown3 = {
"exampleDrilldown": {
type: 'line',
"name": "Example",
color: 'black',
"data": [ {
"name": "Q1",
"y": 10
}, {
"name": "Q2",
"y": 20
}, {
"name": "Q3",
"y": 30
}, {
"name": "Q4",
"y": 40
} ]
}
}
chart.addSingleSeriesAsDrilldown( e.point, drilldown1[ e.point.name ] );
chart.addSingleSeriesAsDrilldown( e.point, drilldown2[ e.point.name ] );
chart.addSingleSeriesAsDrilldown( e.point, drilldown3[ 'exampleDrilldown' ] );
console.log( e );
chart.applyDrilldown();
}
}
}
}
}
</script>
I'm not looking for someone is doing the task instead of me, I won't learn anything. Ideas and tips are super welcomed.
Cheers
You've made several simple mistakes in your code.
1) Add updateGraph function to chart methods - that way you can invoke this method in drilldown callback
2) Save chart component reference in the chart object to be able to use updateGraph method from drilldown callback function. You can make it using mounted() hook:
mounted() {
this.$children[0].chart.vueRef = this;
}
3) Data should be a function that returns an object with properties:
data() {
return {
chartOptions,
drilldownChart,
drilldownEvent,
drilldownLevel
}
}
4) Add drilldown and drillup callbacks to chart.events object. There you can invoke updateGraph method from the chart component reference saved in mounted hook:
chart: {
"type": "column",
events: {
drilldown: function(e) {
if (!e.seriesOptions) {
this.vueRef.updateGraph(true, this, e);
}
},
drillup: function(e) {
if (!e.seriesOptions.flag) {
this.vueRef.drilldownLevel = e.seriesOptions._levelNumber;
this.vueRef.updateGraph(false);
}
}
}
}
Demo:
https://codesandbox.io/s/2w513lwpw0