I have an api that returns data in the following format:
{
"Information Technology": {
"Name": "Information Technology",
"Change": "0.82%"
},
"Consumer Staples": {
"Name": "Consumer Staples",
"Change": "0.19%"
}
}
I want to convert it to the following format inside my d3plus visualizations:
[
{
"Name": "Information Technology",
"Change": "0.82%"
},
{
"Name": "Consumer Staples",
"Change": "0.19%"
}
]
How do I do this. Here's my React component that uses d3plus:
function Chart() {
const methods = {
groupBy: 'Name',
data: 'https://example.com/api/sectors-performance',
size: d => d.Change
};
return <Treemap config={methods} />;
}
There was a small hint in the docs which helped me come up with this solution:
function Chart() {
const methods = {
groupBy: 'id',
data: 'https://example.com/api/sectors-performance',
size: d => d.value
};
const formatter = d =>
Object.keys(d).map(key => ({
id: d[key].Name,
value: numeral(d[key].Change).value()
}));
return <Treemap config={methods} dataFormat={formatter} />;
}
The trick is to send a formatter as a property!
Related
Hi it's my first post on StackOverflow.
I'm working on for translating dynamically a website. I'm using the package vuejs-localization.
How can I switch language directly?
I'm working with the latest version of VueJS and Laravel.
This is my code on my language selector:
export default {
name: "LanguageDropDown",
data() {
return {
languages: [
{
lang: "fr",
text: "Français",
icon: "fr",
},
{
lang: "gb",
text: "English",
icon: "gb",
},
{
lang: "us",
text: "US",
icon: "us"
},
],
};
},
computed: {
getCurrentLang: function() {
return this.$lang.getLang();
},
},
methods: {
setLanguage(lang) {
this.$root.$emit("setLang", lang);
},
setLang(lang, index) {
this.$root.$emit("setLang", this.languages[index].languages[lang], index);
},
},
};
And this is what is in my App.js :
const app = new Vue({
el: '#app',
router,
data() {
return {
lang: 'fr'
};
},
created() {
this.$lang.setLang( this.lang );
},
mounted() {
let _this = this;
this.$root.$on( 'setLang', function( lang ){
_this.lang = lang ;
console.log(_this.lang);
});
},
watch: {
lang :{
handler(val){
this.lang = val;
console.log('changed to :' + this.lang);
},
},
},
})
I expect a translation by changing the variable 'fr' to 'us' or 'gb' but the log says that the lang is switching but nothing happened ...
Thanks for your help.
To make language changes, you need to call this.$lang.setLang. You can do it in watch
watch: {
lang :{
handler(val){
this.lang = val;
this.$lang.setLang(val)
console.log('changed to :' + this.lang);
},
},
},
I'm starting with Apollo GraphQL (Using Axios), and i'm facing a problem when an external API send an ARRAY.
I can't get the variables inside the objects.
I've already tried in several ways, and can't find help anywhere.
const axios = require ('axios');
const {GraphQLObjectType, GraphQLSchema, GraphQLInt,
GraphQLList, GraphQLString } = require('graphql');
const FeedingType = new GraphQLObjectType({
name: 'Feeding',
fields: () => ({
sentry_objects : {type : new GraphQLList(SentryType)},
})
})
//Sentry Objects
const SentryType = new GraphQLObjectType({
name: 'Sentry',
fields: () => ({
designation : {type : GraphQLString},
})
})
//Root Query
const RootQuery = new GraphQLObjectType({
name: 'RootQueryType',
fields: {
sentry: {
type: new GraphQLList(SentryType),
resolve(parent, args){
return axios
.get('https://api.nasa.gov/neo/rest/v1/neo/sentry?is_active=true&page=0&size=50&api_key=DEMO_KEY')
.then(res => res.data);
}
},
And that's the JSON from API:
{
"links": {
"next": "https://api.nasa.gov/neo/rest/v1/neo/sentry?is_active=true&page=1&size=50&api_key=DEMO_KEY",
"self": "https://api.nasa.gov/neo/rest/v1/neo/sentry?is_active=true&page=0&size=50&api_key=DEMO_KEY"
},
"page": {
"size": 50,
"total_elements": 908,
"total_pages": 19,
"number": 0
},
"sentry_objects": [
{
"links": {
"near_earth_object_parent": "https://api.nasa.gov/neo/rest/v1/neo/3012393?api_key=DEMO_KEY",
"self": "https://api.nasa.gov/neo/rest/v1/neo/sentry/3012393?api_key=DEMO_KEY"
},
"spkId": "3012393",
"designation": "1979 XB",
"sentryId": "bJ79X00B",
"fullname": "(1979 XB)",
"year_range_min": "2056",
"year_range_max": "2113",
"potential_impacts": "2",
"impact_probability": "7.36e-07",
"v_infinity": "23.9194972826087",
"absolute_magnitude": "18.53",
"estimated_diameter": "0.662",
"palermo_scale_ave": "-2.82",
"Palermo_scale_max": "-3.12",
"torino_scale": "0",
"last_obs": "1979-Dec-15.42951",
"last_obs_jd": "2444222.92951",
"url_nasa_details": "https://cneos.jpl.nasa.gov/sentry/details.html#?des=1979+XB",
"url_orbital_elements": "http://ssd.jpl.nasa.gov/sbdb.cgi?sstr=3012393;orb=1",
"is_active_sentry_object": true,
"average_lunar_distance": 14.2337865829
},
}
Trying to get that "sentry_objects" variables, testing with "designation", but i'm just getting errors like:
{
"errors": [
{
"message": "Expected Iterable, but did not find one for field RootQueryType.sentry.",
"locations": [
{
"line": 2,
"column": 3
}
],
"path": [
"sentry"
]
}
],
"data": {
"sentry": null
}
}
Thank you for reading :)
In your RootQuery resolver you are only returning from the promise res.data object, but you should return the res.data.sentry_object object.
Something like:
const RootQuery = new GraphQLObjectType({
name: 'RootQueryType',
fields: {
sentry: {
type: new GraphQLList(SentryType),
resolve(parent, args) {
return axios
.get('https://api.nasa.gov/neo/rest/v1/neo/sentry?is_active=true&page=0&size=50&api_key=DEMO_KEY')
.then(res => {
// HERE: return the sentry_objects
console.log(res.data.sentry_objects)
return res.data.sentry_objects
});
}
},
}
})
I want to hide a record on Grid that returns from server.
I've setted a filter on store and can reach that specific data but how I'll handle to hide/ignore this record?
fooStore: {
....
filters: [
function(item) {
let me = this;
let theRecord = item.data.status === MyApp.STATUS; //true
if (theRecord) {
console.log(theRecord); //True
console.log("So filter is here!!")
//How to hide/ignore/avoid to load this specific data record to load Grid??
}
}
]
},
Returned JSON;
{
"success": true,
"msg": "OK",
"count": 3,
"data": [
{
//Filter achives to this record and aim to hide this one; avoid to load this record.
"id": 102913410,
"status": "P"
},
{
"id": 98713410,
"status": "I"
},
{
"id": 563423410,
"status": "A"
}
]
}
I can't save my fiddle cause i don't have sencha forum's account so i give you my code :
Ext.application({
name : 'Fiddle',
launch : function() {
var model = Ext.create('Ext.data.Model', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'status', type: 'string'},
]
});
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
model: model,
proxy: {
type: 'ajax',
url: 'data.json',
reader: {
type: 'json',
rootProperty: 'data'
}
},
filters: [function(item) {
if (item.data.status === "P") {
return true;
}
else {
return false;
}
}],
listeners: {
load: {
fn: function() {
console.log(this.getRange());
}
}
}
});
}
});
Also i create data.json like this :
{
"success": true,
"msg": "OK",
"count": 3,
"data": [{
"id": 102913410,
"status": "P"
}, {
"id": 98713410,
"status": "I"
}, {
"id": 563423410,
"status": "A"
}]
}
I thinks it's near to you'r code and after the loading of the store the filter work as you can this :
Here is sencha fiddle link : https://fiddle.sencha.com/#view/editor
If this can't work, i don't understand what the fuck doing...
My sampleJSON -
{
"entries": [
{
"fields":{
"title":"My test title"
}
},
{
"fields":{
"description":"My test description"
}
}
]
}
Schema.js -
const rootQuery = new GraphQLObjectType({
name: 'testQuery',
fields: {
Articles: {
type: articleItem,
resolve(parentValue) {
return axios.get(`/getArticles`).then(resp => resp.data);
}
}
}
});
const articleItem = new GraphQLObjectType({
name: 'articleItem',
fields: () => ({
entries: {type: new GraphQLList(entry)}
})
});
const entry = new GraphQLObjectType({
name: 'entry',
fields: () => ({
fields: {type: fields}
})
});
const fields = new GraphQLObjectType({
name: 'fields',
fields: () => ({
title: {type: GraphQLString},
description: {type: GraphQLString}
})
});
GraphQL query i am using to query the data in the above JSON -
query articles{
Articles {
entries{
fields{
title,
description
}
}
}
}
I am wondering why the query returns "title" even though it is null in the second object and likewise with description in the first object. Is there a way to just return " title " or " description " only if it not null?
Current result of the query -
{
"data" : {
"entries" [
{
"fields": {
"title": "My test title",
"description": null
}
},
{
"fields": {
"title": null,
"description" : "My test description"
}
}
]
}
}
Required result -
{
"data" : {
"entries" [
{
"fields": {
"title": "My test title"
}
},
{
"fields": {
"description" : "My test description"
}
}
]
}
}
Appreciate any help with this !, thanks.
Way too late to answer, but if you stumble upon this, you can make non-nullable (!) by using GraphQLNonNull().
Here is the example for non-nullable integer
random: {
type: new GraphQLNonNull(GraphQLInt)
}
this is the mutation I want to perform:
const GraphQLAddPlayerResponseMutation = mutationWithClientMutationId({
name: 'AddPlayerResponse',
inputFields: {
cdx: { type: new GraphQLNonNull(GraphQLInt) },
},
mutateAndGetPayload: ({cdx}) => {
var cdxAdded = addplayerResponse(cdx);
console.log("cdxAdded = ",cdxAdded)
return cdxAdded;
}, // what u return on mutateAndGetPayload is available on outputFields
outputFields: {
playerResponse: {
type: GraphQLInt,
resolve: ({cdxAdded}) => {
console.log("outputFields cdxAdded = ",cdxAdded)
return cdxAdded
},
},
viewer: {
type: GraphQLUser,
resolve: () => getViewer(),
},
},
});
Can't figure out what's wrong with the code, it logs on the mutateAndPayload:
mutateAndGetPayload: ({cdx}) => {
var cdxAdded = addplayerResponse(cdx);
console.log("cdxAdded = ",cdxAdded)
return cdxAdded;
},
but I think the outputFields is not evaluated since it's not logging in the console and I get this error:
{
"data": {
"addPlayerResponse": null
},
"errors": [
{
"message": "Cannot create property 'clientMutationId' on number '3'",
"locations": [
{
"line": 4,
"column": 3
}
],
"path": [
"addPlayerResponse"
]
}
]
}
Help?
Replace return cdxAdded; by return { cdxAdded }; (wild guess)