How to handle dropouts in React JS

How to handle dropouts in React JS - javascript

here i am pasting my code at below, please guide me how i can click on the link from dropouts..
let showWomenCategoryMenuDropout = false;
class WomenCategoryMenu extends React.Component {
constructor(props) {
super(props);
this.state = {
showWomenCategoryMenuDropout: false
};
this.openWomenCategoryMenuDropout = this.openWomenCategoryMenuDropout.bind(
this
);
this.closeWomenCategoryMenuDropout = this.closeWomenCategoryMenuDropout.bind(
this
);
}
openWomenCategoryMenuDropout() {
this.setState({
showWomenCategoryMenuDropout: true
});
}
closeWomenCategoryMenuDropout() {
this.setState({
showWomenCategoryMenuDropout: false
});
}
render() {
return (
<div>
<div
className={classnames(style.header_category_menu_container)}
onMouseOut={this.closeWomenCategoryMenuDropout}
onMouseEnter={this.openWomenCategoryMenuDropout}>
<span>Women</span>
</div>
<div>
<SignIn
type="dropout"
open={this.state.showWomenCategoryMenuDropout}
onMouseOut={this.closeWomenCategoryMenuDropout}
onMouseEnter={this.openWomenCategoryMenuDropout}>
<div className={classnames(style.cartegory_wrapper)}>
<CategoryGrid>
{data.map((ele, index) => (
<div
className={classnames(style.cartegory_menu)}
key={"Key-" + index}>
<h3 className={classnames(style.cartegory_menu_title)}>
{ele.categorytitle}
</h3>
<ul>
{Array.isArray(ele.category) &&
ele.category.map((d, i) => (
<li key={"Key-" + i}>{d[`Category${i + 1}`]}</li>
))}
{ele.imagePath && <img src={ele.imagePath} />}
</ul>
</div>
))}
</CategoryGrid>
</div>
</SignIn>
</div>
</div>
);
}
}
also please find the JASON data at below...
var data = [
{
categorytitle: "Shoes",
category: [
{
Category1: "Boots"
},
{
Category2: "Sneakers"
},
{
Category3: "Flats"
},
{
Category4: "Booties"
},
{
Category5: "Mules"
},
{
Category6: "Heels/Pumps"
},
{
Category7: "Clogs"
},
{
Category8: "Slippers"
},
{
Category9: "Sandals"
},
{
Category10: "Sale"
},
{
Category11: "Shop All"
}
]
},
{
categorytitle: "Activities",
category: [
{
Category1: "Comfort Shop"
},
{
Category2: "Run Shop"
},
{
Category3: "Trend Guide"
},
{
Category4: "Athletic"
},
{
Category5: "Casual"
},
{
Category6: "Dress"
},
{
Category7: "Outdoor"
},
{
Category8: "Walking"
},
{
Category9: "Foot Health & Wellness"
},
{
Category10: "Narrow Shoes"
},
{
Category11: "Wide Shoes"
}
]
},
{
categorytitle: "Clothing & More",
category: [
{
Category1: "Handbags/Purses"
},
{
Category2: "Active & Yoga"
},
{
Category3: "Coats & Jackets"
},
{
Category4: "Athletic"
},
{
Category5: "Dresses"
},
{
Category6: "Tops"
},
{
Category7: "Sweaters"
},
{
Category8: "Socks"
},
{
Category9: "Sunglasses"
},
{
Category10: "Rain Gear"
},
{
Category11: "Wide Shoes"
}
]
},
{
categorytitle: "Top Brands",
category: [
{
Category1: "Sam Edelman"
},
{
Category2: "Clarks"
},
{
Category3: "Dr Martens"
},
{
Category4: "Lucky Brand"
},
{
Category5: "New Balance"
},
{
Category6: "Skechers"
},
{
Category7: "Sperry Top-Sider"
},
{
Category8: "Sorel"
},
{
Category9: "TOMS"
},
{
Category10: "UGG"
},
{
Category11: "Vionic"
}
]
},
{
targetUrl: "/",
imagePath:
"src/image1",
title: "WORK SHOP"
}
];
this above is my JSON data, here once mouse hover dropuout is showing correctly but once i am going to click any link from dropout the dropouts itself is closing.

This problem got solved ..here just need to replace from onMouseOut to onMouseLeave.

Related

How to return a nested JSon object in a key value store object

I have a [simplified] JSON file like
{
"id":87,
"meta_data":[
{
"id":1232,
"key":"user_created_by",
"value":"example#gmail.com"
},
{
"id":1233,
"key":"user_created_at",
"value":"1659890457477"
},
{
"id":1234,
"key":"good_person_or_silly_sausage",
"value":"No"
}
]
}
I want to do something like
Logger.log(orderDetailsObject.meta_data.value[key="good_person_or_silly_sausage"])
The expected value would be
No
However, this isn't what's occurring. At present I'm being told that the object is null.
I think it's because the meta_data object is an object in an object or two dimensional array or something? I don't have a good understand of what I'm doing here,
I feel like
https://docs.jsonata.org/simple
and
https://docs.jsonata.org/predicate
Should be guiding me towards the answer - but I'm not getting something I think.
I'm a newbie to SO and JSON & Javascript - so please be gentle. <3
EDIT: None-simplified actual json file below:
{
"id":87,
"parent_id":0,
"status":"pending",
"currency":"USD",
"version":"6.5.1",
"prices_include_tax":false,
"date_created":"2022-08-07T16:40:57",
"date_modified":"2022-08-11T10:13:07",
"discount_total":"0.00",
"discount_tax":"0.00",
"shipping_total":"0.00",
"shipping_tax":"0.00",
"cart_tax":"0.00",
"total":"1100.00",
"total_tax":"0.00",
"customer_id":17,
"order_key":"wc_order_omQo7nW5yCS9X",
"billing":{
"first_name":"",
"last_name":"",
"company":"",
"address_1":"",
"address_2":"",
"city":"",
"state":"",
"postcode":"",
"country":"",
"email":"freddie#example.com",
"phone":""
},
"shipping":{
"first_name":"",
"last_name":"",
"company":"",
"address_1":"",
"address_2":"",
"city":"",
"state":"",
"postcode":"",
"country":"",
"phone":""
},
"payment_method":"",
"payment_method_title":"",
"transaction_id":"",
"customer_ip_address":"",
"customer_user_agent":"",
"created_via":"rest-api",
"customer_note":"",
"date_completed":null,
"date_paid":"2022-08-07T16:40:58",
"cart_hash":"",
"number":"87",
"meta_data":[
{
"id":1232,
"key":"user_created_by",
"value":"example#gmail.com"
},
{
"id":1233,
"key":"user_created_at",
"value":"1659890457477"
},
{
"id":1234,
"key":"good_person_or_silly_sausage",
"value":"No"
},
{
"id":1235,
"key":"order_request_high_chair",
"value":"yes"
},
{
"id":1240,
"key":"order_notes",
"value":"They're on their honeymoon"
},
{
"id":1241,
"key":"pricing_notes",
"value":"They're on their honeymoon"
},
{
"id":1242,
"key":"order_booked_by",
"value":"me on me"
},
{
"id":1243,
"key":"order_referral_source",
"value":"Newspaper"
},
{
"id":1244,
"key":"commission_percent",
"value":"13"
},
{
"id":1245,
"key":"discount_percent",
"value":"5"
},
{
"id":1246,
"key":"deposit_paid_date",
"value":"today"
},
{
"id":1247,
"key":"damage_bond_date_paid",
"value":"today"
},
{
"id":1248,
"key":"damage_bond",
"value":"100"
},
{
"id":1249,
"key":"start_date",
"value":"01\/01\/01"
},
{
"id":1250,
"key":"deposit_payment_amount",
"value":"500"
},
{
"id":1251,
"key":"order_request_welcome_pack_wine_type",
"value":"Red"
},
{
"id":1252,
"key":"end_date",
"value":"02\/02\/02"
},
{
"id":1259,
"key":"_new_order_email_sent",
"value":"true"
},
{
"id":1260,
"key":"_automatewoo_order_created",
"value":"1"
}
],
"line_items":[
{
"id":45,
"name":"Villa Booking",
"product_id":0,
"variation_id":0,
"quantity":1,
"tax_class":"",
"subtotal":"1000.00",
"subtotal_tax":"0.00",
"total":"1000.00",
"total_tax":"0.00",
"taxes":[
],
"meta_data":[
{
"id":411,
"key":"Dates",
"value":"01\/01\/01 until 02\/02\/02",
"display_key":"Dates",
"display_value":"01\/01\/01 until 02\/02\/02"
}
],
"sku":null,
"price":1000,
"parent_name":null
},
{
"id":46,
"name":"Standard Welcome Pack",
"product_id":73,
"variation_id":0,
"quantity":2,
"tax_class":"",
"subtotal":"0.00",
"subtotal_tax":"0.00",
"total":"0.00",
"total_tax":"0.00",
"taxes":[
],
"meta_data":[
{
"id":421,
"key":"Wine Type",
"value":"Red",
"display_key":"Wine Type",
"display_value":"Red"
}
],
"sku":"",
"price":0,
"parent_name":null
}
],
"tax_lines":[
],
"shipping_lines":[
],
"fee_lines":[
{
"id":47,
"name":"Damage Bond",
"tax_class":"",
"tax_status":"taxable",
"amount":"100",
"total":"100.00",
"total_tax":"0.00",
"taxes":[
],
"meta_data":[
{
"id":428,
"key":"damage_bond_paid_to",
"value":"example#gmail.com",
"display_key":"damage_bond_paid_to",
"display_value":"example#gmail.com"
},
{
"id":429,
"key":"damage_bond_paid_on",
"value":"today",
"display_key":"damage_bond_paid_on",
"display_value":"today"
}
]
},
{
"id":48,
"name":"Booking Fee",
"tax_class":"",
"tax_status":"taxable",
"amount":"",
"total":"0.00",
"total_tax":"0.00",
"taxes":[
],
"meta_data":[
{
"id":436,
"key":"dbooing_fee_paid_to",
"value":"example#gmail.com",
"display_key":"dbooing_fee_paid_to",
"display_value":"example#gmail.com"
},
{
"id":437,
"key":"booking_fee_paid_on",
"value":"1659890457477",
"display_key":"booking_fee_paid_on",
"display_value":"1659890457477"
}
]
}
],
"coupon_lines":[
],
"refunds":[
],
"payment_url":"https:\/\/dev1.example.com\/checkout\/order-pay\/87\/?pay_for_order=true&key=wc_order_omQo7nW5yCS9X",
"date_created_gmt":"2022-08-07T16:40:57",
"date_modified_gmt":"2022-08-11T10:13:07",
"date_completed_gmt":null,
"date_paid_gmt":"2022-08-07T16:40:58",
"currency_symbol":"$",
"_links":{
"self":[
{
"href":"https:\/\/dev1.example.com\/wp-json\/wc\/v3\/orders\/87"
}
],
"collection":[
{
"href":"https:\/\/dev1.example.com\/wp-json\/wc\/v3\/orders"
}
],
"customer":[
{
"href":"https:\/\/dev1.example.com\/wp-json\/wc\/v3\/customers\/17"
}
]
}
}

You can use the find method on the array:
const orderDetailsObject = {"id":87,"meta_data":[{"id":1232,"key":"user_created_by","value":"example#gmail.com"},{"id":1233,"key":"user_created_at","value":"1659890457477"},{"id":1234,"key":"good_person_or_silly_sausage","value":"No"}]};
console.log(orderDetailsObject.meta_data.find(
({key}) => key == "good_person_or_silly_sausage"
)?.value);

Stop Deeply Nested JSON Array Items/Objects Based on Element Name

So, I'm relatively new to javascript, and I'm working with a client-side javascript function that inserts JSON results pushed to it from the server.
I would like to stop certain results, independently of that javascript that populating the results.
Usually, if the js was my own, I'd make a guess that I'd use the "splice" function to remove the JSON array entry(ies) that I don't wish to be there, does that sound about right? (I'd got to there through plenty of searching on StartPage and here)
However, I need whatever function I (let's be honest, "you") come up with to trump the embedded results.
Essentially this is normal behaviour:
Webpage > JavaScript Parses JSON for Initial Results
then
Webpage > Scroll > JavaScript Parses JSON for More Results
I'd like to insert something that will stop any JSON items that I don't like. I don't know how to represent that, I'd assume:
Worker in Extension/Add-On > Webpage > etc
I doubt this can be done with CSS ... but that'd be awesome, as I'd just put it in my personal.
If it was splice, I'd have a vague idea (but really I'm flying blind) of how to do it on a base level with splice, but I'm already struggling, and that would deepen for the insanely deeply embedded objects I'm trying to exclude.
So. There is lot of json data in the section I'm looking at.
I'm purely concentrated on the removing of the array here, but by end goal is two parts:
In the ' contents ' array in levelOneB's ' daContentShaper ' I would
like to remove any item from the array where in the sub-object '
content ' there is an element called ' contentTypeA '. There's another
object with the label ' ahThisIsTheBContent ', which I'd also like gone,
and that's dotted through the JSON. All other items (TypeB, TypeC, or
other) must stay.
Additionally, within said ' content ' object I would like to change any ' visible ' values that are " false " to " true ".
It's definitely possible, it's just working out how to ensure that the rest of the code (which may have similar - not the same - parts elsewhere) isn't affected by my splice of this array.
{
"levelOneA": {
"levelOneAArr": [ { "name": "me", "age": 1 }, { "name": "you", "age": 2 }, { "name": "them", "age": 3 } ],
"levelOneAText": "blah"
},
"levelOneB": {
"levelOneBDeepBro": {
"levelOneBDeepBroTabs": [
{
"levelOneBDeepBroTabsShaper": {
"isBlessed": true,
"daContent": {
"daContentShaper": {
"contents": [
{
"contentItem": {
"content": {
"contentTypeA": {
"bitA": "bitAText",
"bitB": [
{
"bitBText1": "cripes"
},
{
"bitBText1": "crikey"
},
{
"bitBText1": "crimeny"
}
],
"visible": true
}
},
"extraNonsense": "bingoBlah"
}
},
{
"contentItem": {
"content": {
"ahThisIsTheBContent": {
"bitA": "bitAText",
"bitB": [
{
"bitBText1": "cripes"
},
{
"bitBText1": "crikey"
},
{
"bitBText1": "crimeny"
}
],
"visible": false
}
},
"extraNonsense": "bingoBlahBlah"
}
},
{
"contentItem": {
"content": {
"contentTypeB": {
"bitA": "bitAText",
"bitB": [
{
"bitBText1": "jinkies"
},
{
"bitBText1": "ruh roh"
},
{
"bitBText1": "like, wow"
}
],
"visible": true
}
},
"extraNonsense": "bingoBlahBlah"
}
},
{
"contentItem": {
"content": {
"contentTypeC": {
"bitA": "bitAText",
"bitB": [
{
"bitBText1": "cripes"
},
{
"bitBText1": "crikey"
},
{
"bitBText1": "crimeny"
}
],
"visible": true
}
},
"extraNonsense": "bingoBlahBlahBlah"
}
}
],
"myDadIsBetter": "Go Faster Stripes, innit."
}
},
"tabId": "Bro"
}
}
]
}
},
"levelOneC": "CAAQhGciEwi0iqD5-ZbwAhUBPvEFHQMKAeo=",
"levelOneD": {
"iAmJustHappyToBeNominated": "innit",
"damnYourWholePopCultureSubsection": "flames abound"
}
}

This is how you could solve this using object-scan
Note that I used quite a few ** in the matching. You could write these out exactly, it depends on your requirement
// const objectScan = require('object-scan');
const data = { levelOneA: { levelOneAArr: [{ name: 'me', age: 1 }, { name: 'you', age: 2 }, { name: 'them', age: 3 }], levelOneAText: 'blah' }, levelOneB: { levelOneBDeepBro: { levelOneBDeepBroTabs: [ { levelOneBDeepBroTabsShaper: { isBlessed: true, daContent: { daContentShaper: { contents: [ { contentItem: { content: { contentTypeA: { bitA: 'bitAText', bitB: [ { bitBText1: 'cripes' }, { bitBText1: 'crikey' }, { bitBText1: 'crimeny' } ], visible: true } }, extraNonsense: 'bingoBlah' } }, { contentItem: { content: { ahThisIsTheBContent: { bitA: 'bitAText', bitB: [ { bitBText1: 'cripes' }, { bitBText1: 'crikey' }, { bitBText1: 'crimeny' } ], visible: false } }, extraNonsense: 'bingoBlahBlah' } }, { contentItem: { content: { contentTypeB: { bitA: 'bitAText', bitB: [ { bitBText1: 'jinkies' }, { bitBText1: 'ruh roh' }, { bitBText1: 'like, wow' } ], visible: false } }, extraNonsense: 'bingoBlahBlah' } }, { contentItem: { content: { contentTypeC: { bitA: 'bitAText', bitB: [ { bitBText1: 'cripes' }, { bitBText1: 'crikey' }, { bitBText1: 'crimeny' } ], visible: false } }, extraNonsense: 'bingoBlahBlahBlah' } } ], myDadIsBetter: 'Go Faster Stripes, innit.' } }, tabId: 'Bro' } } ] } }, levelOneC: 'CAAQhGciEwi0iqD5-ZbwAhUBPvEFHQMKAeo=', levelOneD: { iAmJustHappyToBeNominated: 'innit', damnYourWholePopCultureSubsection: 'flames abound' } };
const logic = {
'levelOneB.**.daContentShaper.contents[*].*.content.{contentTypeA,ahThisIsTheBContent}': ({ key, parents }) => {
parents[3].splice(key[key.length - 4], 1);
},
'levelOneB.**.daContentShaper.contents.**.visible': ({ value, parent, property }) => {
if (value === false) {
parent[property] = true;
}
}
};
const modify = objectScan(Object.keys(logic), {
rtn: 'count',
filterFn: ({ matchedBy, property, key, value, parent, parents }) => {
matchedBy.forEach((m) => logic[m]({ property, key, value, parent, parents }));
}
});
console.log(modify(data));
// => 6
console.log(data);
// => { levelOneA: { levelOneAArr: [ { name: 'me', age: 1 }, { name: 'you', age: 2 }, { name: 'them', age: 3 } ], levelOneAText: 'blah' }, levelOneB: { levelOneBDeepBro: { levelOneBDeepBroTabs: [ { levelOneBDeepBroTabsShaper: { isBlessed: true, daContent: { daContentShaper: { contents: [ { contentItem: { content: { contentTypeB: { bitA: 'bitAText', bitB: [ { bitBText1: 'jinkies' }, { bitBText1: 'ruh roh' }, { bitBText1: 'like, wow' } ], visible: true } }, extraNonsense: 'bingoBlahBlah' } }, { contentItem: { content: { contentTypeC: { bitA: 'bitAText', bitB: [ { bitBText1: 'cripes' }, { bitBText1: 'crikey' }, { bitBText1: 'crimeny' } ], visible: true } }, extraNonsense: 'bingoBlahBlahBlah' } } ], myDadIsBetter: 'Go Faster Stripes, innit.' } }, tabId: 'Bro' } } ] } }, levelOneC: 'CAAQhGciEwi0iqD5-ZbwAhUBPvEFHQMKAeo=', levelOneD: { iAmJustHappyToBeNominated: 'innit', damnYourWholePopCultureSubsection: 'flames abound' } }
.as-console-wrapper {max-height: 100% !important; top: 0}
<script src="https://bundle.run/object-scan#14.3.0"></script>
Disclaimer: I'm the author of object-scan

How do I extract only those elements from following dictionary which has some data in it?

From this array, i want to select only flipkart and create a new array which contains only flipkart.
json = [
{
"amazon": []
},
{
"flipkart": {
"product_store": "Flipkart",
"product_store_logo": "https://images-api.datayuge.in/image/ZmxpcGthcnRfc3RvcmUucG5n.png",
"product_store_url": "https://price-api.datayuge.com/redirect?id=aHR0cHM6Ly9kbC5mbGlwa2FydC5jb20vZGwvcmVhbG1lLTItZGlhbW9uZC1ibGFjay02NC1nYi9wL2l0bWY4NXNjeHlnaHh3Y2g_cGlkPU1PQkY4NVVZQ0RERlZFRE0mYWZmaWQ9YXJ1bmJhYnVs",
"product_price": "10990",
"product_mrp": "0",
"product_offer": "",
"product_color": "black",
"product_delivery": "3-4",
"product_delivery_cost": "0",
"is_emi": "1",
"is_cod": "1",
"return_time": "10 Days"
}
},
{ "snapdeal": [] },
{ "ebay": [] },
{ "paytm": [] },
{ "croma": [] },
{ "yebhi": [] },
{ "indiatimes": [] },
{ "homeshop18": [] },
{ "naaptol": [] },
{ "infibeam": [] },
{ "tatacliq": [] },
{ "shopclues": [] },
{ "paytmmall": [] },
{ "gadgets360": [] },
{ "mi": [] },
{ "2gud": [] }
];
edit:
above problem is solved, the solution was,
this.store_array.filter(el => {
if(Array.isArray(el[Object.keys(el)[0]])){
return el[Object.keys(el)[0]].length;
}
else if(typeof el[Object.keys(el)[0]]==="object"){
this.brands.push(el[Object.keys(el)[0]])
return el[Object.keys(el)[0]]
}
});
and https://stackoverflow.com/users/8802812/kullya was the one who answered it first but i can't find his answer, since i am new to stackoverflow, all credits goes to user. thank you very much.

You could have a function as below and pass on for which data you might need to find/filter (both works :) ):
var arr= [ { "amazon": [] }, { "flipkart": { "product_store": "Flipkart", "product_store_logo": "https://images-api.datayuge.in/image/ZmxpcGthcnRfc3RvcmUucG5n.png", "product_store_url": "https://price-api.datayuge.com/redirect?id=aHR0cHM6Ly9kbC5mbGlwa2FydC5jb20vZGwvcmVhbG1lLTItZGlhbW9uZC1ibGFjay02NC1nYi9wL2l0bWY4NXNjeHlnaHh3Y2g_cGlkPU1PQkY4NVVZQ0RERlZFRE0mYWZmaWQ9YXJ1bmJhYnVs", "product_price": "10990", "product_mrp": "0", "product_offer": "", "product_color": "black", "product_delivery": "3-4", "product_delivery_cost": "0", "is_emi": "1", "is_cod": "1", "return_time": "10 Days" } }, { "snapdeal": [] }, { "ebay": [] }, { "paytm": [] }, { "croma": [] }, { "yebhi": [] }, { "indiatimes": [] }, { "homeshop18": [] }, { "naaptol": [] }, { "infibeam": [] }, { "tatacliq": [] }, { "shopclues": [] }, { "paytmmall": [] }, { "gadgets360": [] }, { "mi": [] }, { "2gud": [] } ]
function getData (commerceName){
return arr.filter(x=>x[commerceName])
}
// using `find`
// function getData (commerceName){
// return arr.find(x=>x[commerceName])
//}
let res = getData('flipkart')
//let res1 = getData('snapdeal')
console.log(res)

const result = json.find(a => a.hasOwnProperty('flipkart'));
const flipkartData = result ? [result.flipkart] : [];

You can use the .find method of Array and look for the object whose keys contain "flipkart".
(If you actually want just the object instead of wrapping it in an array, you can just omit the [] in the last step.)
const
allData = getAllData(),
flipkart = allData.find(currentItem =>
Object.keys(currentItem).includes("flipkart"));
console.log([flipkart]);
function getAllData(){
return [
{
"amazon": []
},
{
"flipkart": {
"product_store": "Flipkart",
"product_store_logo": "https://images-api.datayuge.in/image/ZmxpcGthcnRfc3RvcmUucG5n.png",
"product_store_url": "https://price-api.datayuge.com/redirect?id=aHR0cHM6Ly9kbC5mbGlwa2FydC5jb20vZGwvcmVhbG1lLTItZGlhbW9uZC1ibGFjay02NC1nYi9wL2l0bWY4NXNjeHlnaHh3Y2g_cGlkPU1PQkY4NVVZQ0RERlZFRE0mYWZmaWQ9YXJ1bmJhYnVs",
"product_price": "10990",
"product_mrp": "0",
"product_offer": "",
"product_color": "black",
"product_delivery": "3-4",
"product_delivery_cost": "0",
"is_emi": "1",
"is_cod": "1",
"return_time": "10 Days"
}
},
{ "snapdeal": [] },
{ "ebay": [] },
{ "paytm": [] },
{ "croma": [] },
{ "yebhi": [] },
{ "indiatimes": [] },
{ "homeshop18": [] },
{ "naaptol": [] },
{ "infibeam": [] },
{ "tatacliq": [] },
{ "shopclues": [] },
{ "paytmmall": [] },
{ "gadgets360": [] },
{ "mi": [] },
{ "2gud": [] }
];
}

React Table - Show nested object fields

Hey so I cannot figure this out for the life of me. SOS.
I have a JSON with nested objects that looks like this:
[
{
"id": 1,
"internalToolName": "HP ALM",
"statuses": [
{
"id": 57,
"statusType": "Ok",
"date": "2018-12-17"
},
{
"id": 67,
"statusType": "Ok",
"date": "2018-12-23"
},
{
"id": 37,
"statusType": "Ok",
"date": "2018-01-06"
}
]
},
{
"id": 2,
"internalToolName": "Artifactory",
"appType": null,
"statuses": [
{
"id": 1652,
"statusType": "Ok",
"date": "2018-12-31"
},
{
"id": 119,
"statusType": "Ok",
"date": "2018-12-28"
}
]
}
]
I'm trying to populate a react-table like this
I was able to populate the tool name rows using the 'Internal Tools' header and populated the days of the current month. I'm having trouble figuring out the logic to populate the cells with the status on the given date field of the status object. Here is my code:
export default class ToolsIssue2 extends Component {
constructor(props) {
super(props);
this.state = {
month: moment().format('MMMM, YYYY'),
internalToolData: [{
internalToolName: '',
statuses: [{
date: '',
statusType: '',
}]
}],
}
}
componentDidMount() {
this.generateData();
}
generateData() {
axios.get('http://localhost:8080/internal_tool')
.then(response => {
this.setState({
internalToolData: response.data
});
console.log(this.state.internalToolData);
}).catch(error => alert(error));
}
setStatusSVG(statusType) {
switch (statusType) {
case 'Ok': return <img src={ok} className='OK' alt='ok-logo' />
case 'Warning': return <img src={warning} className='Warning' alt='warning-logo' />
case 'Unavailable': return <img src={unavailable} className='Unavailable' alt='unavailable-logo' />
}
}
getMonth() {
return moment().format('MMMM, YYYY');
}
getCurrentColumns() {
var daysInMonth = moment().daysInMonth();
var monthDaysColumn = [];
for (var i = 1; i <= daysInMonth; i++) {
monthDaysColumn.push(
{
// id: 'statusDate',
Header: i,
accessor: 'statuses',
Cell: (row) => {
if(moment(`${row.row.statuses.date}`).year() === moment().year() && moment(`${row.row.statuses.date}`).date() === i) {
this.setStatusSVG(row.row.statuses.statusType);
}
},
resizable: false,
sortable: false,
width: 35,
})
}
return monthDaysColumn;
}
render() {
const { internalToolData } = this.state;
return (
<div>
<ReactTable
data={internalToolData}
columns={[{
Header: 'Internal Tools',
columns: [{
accessor: 'internalToolName',
width: 150,
resizable: false,
}]
}, {
Header: this.getMonth(),
columns: this.getCurrentColumns(),
}
]}
defaultPageSize={15}
className="-striped -highlight"
/>
<br />
</div>
)
}
}

Highcharts - tooltip headerformat for 2 decimal places not working

I am trying to configure the tooltip of the so that it displays only 2 decimal places, but the headerformat does not seem to be wokring and it keeps showing the entire decimal places.
what is going wrong here?
{
"chart":{
"type":"line",
"height":40,
"width":40
},
"title":{
"text":null
},
"subtitle":{
"text":null
},
"xAxis":{
"categories":[
]
},
"yAxis":{
"title":{
"enabled":true,
"text":"Amount (Dollars)",
"style":{
"fontWeight":"normal"
}
},
"plotLines":[
{
"value":0,
"width":1,
"color":"#808080"
}
]
},
"options":{
"legend":{
"enabled":false
}
},
"plotOptions":{
},
"series":[
{
"name":"Total",
"data":[
{
"name":"Apr'2016",
"y":1372406438.2385998
},
{
"name":"May'2016",
"y":5301389724.7499
},
{
"name":"Jun'2016",
"y":549467904.6918
},
{
"name":"July'2016",
"y":549040695.1202999
},
{
"name":"Aug'2016",
"y":1160837116.1138
},
{
"name":"Sep'2016",
"y":22.7612
}
],
"color":"#008CE6",
"marker":{
"enabled":false
},
"id":"series-3"
},
{
"name":"Toal Timely",
"data":[
{
"name":"Apr'2016",
"y":427101358.1748,
"month":"Apr"
},
{
"name":"May'2016",
"y":5191919648.9571,
"month":"May"
},
{
"name":"Jun'2016",
"y":288691855.262,
"month":"Jun"
},
{
"name":"July'2016",
"y":264281732.18769997,
"month":"July"
},
{
"name":"Aug'2016",
"y":853641906.2942,
"month":"Aug"
},
{
"name":"Sep'2016",
"y":0,
"month":"Sep"
}
],
"color":"#4ca977",
"marker":{
"enabled":false
},
"id":"series-4"
},
{
"name":"Total Untimely",
"data":[
{
"name":"Apr'2016",
"y":945305080.0637999,
"month":"Apr"
},
{
"name":"May'2016",
"y":109470075.79279998,
"month":"May"
},
{
"name":"Jun'2016",
"y":260776049.4298,
"month":"Jun"
},
{
"name":"July'2016",
"y":284758962.93259996,
"month":"July"
},
{
"name":"Aug'2016",
"y":307195209.8196,
"month":"Aug"
},
{
"name":"Sep'2016",
"y":22.7612,
"month":"Sep"
}
],
"color":"#e54343",
"marker":{
"enabled":false
},
"id":"series-5"
}
],
"tooltip":{
"pointFormat":"<b>{point.y}</b>",
"shared":true
}
}

Add decimals to the point.y value.
"pointFormat": "<b>{point.y:.2f}</b><br>",
Example:
http://jsfiddle.net/78yqgzz4/

Develop Reference

JavaScript is the programming language of the Web.

How to handle dropouts in React JS - javascript

This problem got solved ..here just need to replace from onMouseOut to onMouseLeave.

Related

How to return a nested JSon object in a key value store object

Stop Deeply Nested JSON Array Items/Objects Based on Element Name

How do I extract only those elements from following dictionary which has some data in it?

React Table - Show nested object fields

Highcharts - tooltip headerformat for 2 decimal places not working

Categories

Resources