highcharts conditional show / hide for multiple series - javascript

I have a chart that display the sales for Phone, Laptops and Printers and I can toggle any option on/off. I also have another toggle button "Without Taxes" that will display for each option (phone, laptops, printer) some new series.enter image description here
enter image description here
The big problem is that if I disable laptops & printer the "without taxes" toggle button will display all the lines not only the "phone without takes "
enter image description here
My implementations looks like this:
"series": [
{
"name": "Phones",
"id": "phonesId",
"template": "line",
"data": [
....
]
},
{
"name": "Laptops",
"id": "laptopId",
"template": "line",
"data": [
....
]
}
{
"name": "Printers",
"id": "printersId",
"template": "line",
"data": [
....
]
},
{
"name": "Without Taxes",
"id":"noTaxesId",
"template": "line-thin",
"data": [],
},
{
"name": "Phones No Taxes",
"linkedTo":"noTaxesId",
"template": "line-thin",
"data": [
....
]
},
{
"name": "Laptops No Taxes",
"linkedTo":"noTaxesId",
"template": "line-thin",
"data": [
....
]
}
{
"name": "Printers No Taxes",
"linkedTo":"noTaxesId",
"template": "line-thin",
"data": [
....
]
}
]
So I'm using an empty serie with id: "noTaxesId" and then I use "linkedTo":"noTaxesId" for the next 3 series.
Somehow I want to make the "Without taxes" toggle button to show only for the options that are active not for all of them all the time

Related

How to show card carousel in Gifted Chat based on type in React native?

How to iterate through all these objects and get all?
It is getting response from rasa bot. I want get all objects and show it on Card Carousel in React Native using Gifted Chat. I referred this https://developers.facebook.com/docs/messenger-platform/send-messages/template/generic but not getting how declares types and get all objects from the response and show it on the card Carousel in Gifted Chat. Please help me with that.
Array [
Object {
"attachment": Object {
"payload": Object {
"elements": Array [
Object {
"buttons": Array [
Object {
"payload": "/getEnergy",
"title": "Start",
"type": "postback",
},
],
"image_url": "asset/images/cycle.jpg",
"subtitle": "Boost Your Mood: These activities are designed to release happy hormones and leave you with an overall feeling of positivity. Doing them regularly will help you cultivate resilience and a general, positive outlook.",
"title": "Get Energy",
},
Object {
"buttons": Array [
Object {
"payload": "/improveSelfEsteem",
"title": "Start",
"type": "postback",
},
],
"image_url": "asset/images/mountain.jpg",
"subtitle": "Build Strength: This meditation exercise is a powerful practice in mindfulness that helps us cultivate inner strength. Regular practice enables one to be strong in the face of chaos, change, or uncertainty.",
"title": "Improve Self-esteem",
},
Object {
"buttons": Array [
Object {
"payload": "/forBreakups",
"title": "Start",
"type": "postback",
},
],
"image_url": "asset/images/feather.jpg",
"subtitle": "Find Closure: Work on getting closure through the simple method of writing down what you have never expressed or can't say to the ones you've lost.",
"title": "For Breakups",
},
Object {
"buttons": Array [
Object {
"payload": "/forDeepSleep",
"title": "Start",
"type": "postback",
},
],
"image_url": "asset/images/sleep.jpg",
"subtitle": "Unable To Switch Off: This guided meditation will aid you in letting go of everyday thoughts, helping you switch off, relax and drift into a peaceful sleep.",
"title": "For Deep Sleep",
},
Object {
"buttons": Array [
Object {
"payload": "/sleepStories",
"title": "Start",
"type": "postback",
},
],
"image_url": "asset/images/book.jpg",
"subtitle": "Sleep Story - The Mystical Fog",
"title": "Sleep Stories",
},
Object {
"buttons": Array [
Object {
"payload": "/sleepSounds",
"title": "Start",
"type": "postback",
},
],
"image_url": "asset/images/book.jpg",
"subtitle": "Sleep Sound - Rain By The Porch",
"title": "Sleep Sounds",
},
],
"template_type": "generic",
},
"type": "template",
},
"recipient_id": "UserId1",
},
]

Disable submit button/loading on the card on submit in JavaScript adaptive cards

I have a form while submitting the card I want submit button to be disable or need a kind of loading for the adaptive card so that can avoid continues submission of form
Could any one please help me
Card:
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.3",
"body": [{
"type": "TextBlock",
"text": "Hello !!",
"size": "Medium",
"weight": "Bolder"
},
{
"type": "Container",
"style": "accent",
"items": [{
"type": "TextBlock",
"text": "What was the type?"
},
{
"type": "Input.ChoiceSet",
"id": "call_type",
"style": "compact",
"isRequired": true,
"errorMessage": " required input",
"placeholder": "Please choose",
"choices": [{
"$data": "${Survey.questions[0].items}",
"title": "${choice}",
"value": "${value}"
}]
}
]
}
],
"actions": [{
"type": "Action.Submit",
"title": "Submit"
}]
}
and the card rendering code
var jsonTemplate = "some data",
var jsonDate = "some data"
var template = new ACData.Template(jsonTemplate);
var cardPayload = template.expand({
$root: jsonData
});
var adaptiveCard = new AdaptiveCards.AdaptiveCard();
adaptiveCard.onExecuteAction = function(action) {
alert("Ow!");
}
adaptiveCard.parse(cardPayload);
let renderedCard = adaptiveCard.render();
document.body.appendChild(renderedCard);
Normally the flow is disable submit button(or add loading mask) when the button clicked, then send the submit request to backend.
enable submit button(or remove loading mask) when response comes or the request fails.

Change form elements using angular form

I am making angular dynamic form with form-elements loaded through JSON..
The form element generation are working fine, but i am in the need of change of form elements based on options selected from dropdown..
JSON that generates form-elements
jsonData: any = [
{
"elementType": "textbox",
"class": "col-12 col-md-4 col-sm-12",
"key": "project_name",
"label": "Project Name",
"type": "text",
"value": "",
"required": false,
"minlength": 3,
"maxlength": 20,
"order": 1
},
{
"elementType": "dropdown",
"key": 'project',
"label": 'Choose option to display',
"options": [
{ "key": 'description', "value": 'Show Project Description' },
{ "key": 'level', "value": 'Show Project Level' },
{ "key": 'members', "value": 'Show Project Members' }
],
"order": 2
},
{
"elementType": "textbox",
"class": "col-12 col-md-4 col-sm-12",
"key": "project_desc",
"label": "Project Description",
"type": "text",
"value": "",
"order": 3
},
{
"elementType": "dropdown",
"key": 'project_level',
"label": 'Choose Project Level',
"options": [
{ "key": 'low', "value": 'Low' },
{ "key": 'medium', "value": 'Medium' },
{ "key": 'high', "value": 'High' }
],
"order": 4
},
{
"elementType": "dropdown",
"key": 'project_members',
"label": 'Choose Project Member',
"options": [
{ "key": 'developer', "value": 'Developer' },
{ "key": 'leader', "value": 'Leader' },
{ "key": 'manager', "value": 'Manager' }
],
"order": 5
}
];
Based on the above JSON, the elements are generated..
Here you can see that Order 1 has textbox with project name which has no changes.
Then in next we have a dropdown with key as project, from here only the requirement starts..
In options, if i choose Show Project Description, then the Project Description textbox needs to be displayed and other two project_level and project_members needs to be in hidden format..
Likewise if i choose Show Project Level then the Project Level dropdown alone needs to be displayed and the Project Description and Project Members needs to be in hidden..
In the same way for Project Members..
So how to change the form-elements based on the selection of project dropdown values??
The working example for the same was here https://stackblitz.com/edit/angular-x4a5b6-5ys5hf
Kindly help me to hide the other elements based on the selection from the project dropdown using angular dynamic form alone..
As #benshabatnoam say the only thing you need is change you dinamic-form-question to include some like
<div [formGroup]="form" *ngIf="?????">
You can use a condition like #Benshabatnoam say, but I suggest you some more "parametrizable"
Imagine your json has a new property "visible" that was an object with two properties, field and value. So, your element "project_desc" can be like
{
"elementType": "textbox",
"class": "col-12 col-md-4 col-sm-12",
"key": "project_desc",
"label": "Project Description",
"type": "text",
"value": "",
"order": 3,
"visible":{"field":"project","value":'description'} //<--add this "property"
},
So the dinamic-form-question can be like
<div [formGroup]="form"
*ngIf="!question.visible ||
form.get(question.visible.field).value==question.visible.value">
...
</div>
See that I include the condition (!question.visible) so, if you don't give the property "visible" to one field, this field is showed always.
Well, you must work some more, you must change question-base.ts to admit this new property
export class QuestionBase<T> {
value: T;
...
visible:any; //<--ad this property
constructor(options: {
value?: T,
...
visible?:any, //In constructor include "visible" too
..
}){
this.value = options.value;
...
this.visible = options.visible;
}
You can see your forked stackblitz
You need to make few changes to your code.
Change the json so that the options key will match the controls key.
...
{
"elementType": "dropdown",
"key": 'project',
"label": 'Choose option to display',
"options": [
{ "key": 'project_desc', "value": 'Show Project Description' },
{ "key": 'project_level', "value": 'Show Project Level' },
{ "key": 'project_members', "value": 'Show Project Members' }
],
"order": 2
},
{
"elementType": "textbox",
"class": "col-12 col-md-4 col-sm-12",
"key": "project_desc",
"label": "Project Description",
"type": "text",
"value": "",
"order": 3
},
...
In your form add a *ngIf to the app-question component that will execute a function passing it the question, and this function will holding the logic for hiding the given question.
<app-question *ngIf="isShowQuestion(question)" [question]="question" [form]="form">
</app-question>
The function logic would check if the question is one of the controls you want to hide, and if so it will check the value of the dropdown 'option to display' for match, if match it will show the question else it will hide the question.
isShowQuestion(question: QuestionBase<any>): boolean {
// If one of the controls you want to hide
if (question.key === 'project_desc' ||
question.key === 'project_level' ||
question.key === 'project_members') {
// if the option to display have value and it is this question that show it else don't show it
return !this.form.controls['project'].value ||
this.form.controls['project'].value === question.key;
} else { // if not, always display
return true;
}
}
I've forked your stackblitz project, so you can see it in action here.

Error in enum data type while uploading intent dialogflow

I am trying to upload my intent everything is working fine, i am writing script in V2 and everything works but for parameter webhookState data type is enum ( [here] ) and we have to enter following of the three values ( [here][1]) now when i enter any one and try to upload it shows.
" Unable to load file: SyntaxError: Unexpected token W in JSON at position 98 "
now when I pass WEBHOOK_STATE_ENABLED(or any one) in quotes code uploads successfully (because as per my knowledge it treats it as string and gets executed) and intent is created for my agent but webhook remains off and also training phrases are not there, i am certain that the parameter webhookState is not being activated when i pass in quotes(because of above mentioned reason) Same is the case with rest, like when i try to put in type of training phrases.
{
"name": "Warehouse_Management",
"displayName": "Warehouse_Management",
"webhookState": "WEBHOOK_STATE_ENABLED_FOR_SLOT_FILLING" ,
"priority": 50000,
"isFallback": false,
"mlDisabled": false,
"trainingPhrases": [
{
"name":"Try1" ,
"type": "EXAMPLE",
"parts": [
{
"text": "for",
"userDefined": true
},
{
"text": "warehouse",
"entityType": "#Properties",
"alias": "Properties",
"userDefined": true
},
{
"text": "management",
"userDefined": true
}
]
},
{
"name":"Try2" ,
"type": "EXAMPLE",
"parts": [
{
"text": "i want app for ",
"userDefined": true
},
{
"text": "warehouse",
"alias": "Properties",
"entityType": "#Properties",
"userDefined": true
}
]
}
],
"outputContexts": [
{
"name": "Yes",
"lifespanCount": 2
},
{
"name": "No",
"lifespanCount": 2
},
{
"name": "Device_Integration",
"lifespanCount": 2
}
],
"resetContexts": false,
"parameters": [
{
"name": "Properties",
"displayName": "Properties",
"value": "$parameter_name",
"entityTypeDisplayName": "#Properties",
"mandatory": false,
"isList": true
}
],
"messages": [
{
"text":"This is sample response"
}
],
"rootFollowupIntentName": "root",
"parentFollowupIntentName": "parent"
}
Please NOTE that in the attached Json i have put it in quotes so it would get successfully executed and will create intent.
In order for it to be valid JSON, the enum value should be wrapped in quotes. It's expecting the enum value as a String.

displaying nested json in ng-repeat

I seem to be having difficulty in grasping how to drill down to get to nested JSON and display it on a page using angular. For example I have the following JSON structure and I want to display the connectivity products under portfolio in an ng-repeat...
{
"addons": [
...
],
"attributes": [
...
],
"portfolios": [
{
"connectivity": [
{
"product-1": {
"label": "product-1",
"description": "Description in here"
}
},
{
"product-2": {
"label": "product-2",
"description": "Description in here"
}
}
]
}
]
}
So far I have tried it two different ways.
$scope.listOfProducts = allProducts.data.portfolios.connectivity;
and in the ng-repeat
ng-repeat='product in listOfProducts.portfolios.connectivity'
What would be the correct way to loop through and display the 'connectivity' products in a ng-repeat? Thanks
EDIT:
I've changed the JSON to this structure...
{
"addons": [
...
],
"attributes": [
...
],
"portfolios": [
{
"connectivity": [
{
"label": "product-1",
"description": "Description in here"
},
{
"label": "product-2",
"description": "Description in here"
}
]
}
]
But I still can't seem to get ng-repeat to display the products in connectivity.
$scope.listOfProducts = allProducts.data.portfolios.connectivity
Since listOfProducts is already set to the connectivity array, you would just ng-repeat="product in listOfProducts"
<div ng-repeat="product in listOfProducts">
{{product.label}}
</div>
Edit: Well, your array is sort of irregular, since you're creating a property called product-[index] for each item. Do you have control of the data which is returned? Your array should just have the objects, like:
"connectivity": [
{
"label": "product-1",
"description": "Description in here"
},
{
"label": "product-2",
"description": "Description in here"
}
]

Categories