Unable to output useState to imported chart - javascript

I have a simple form where i will add a task and add the amount of minutes that task has taken, i am having trouble trying to get the chart which i have imported from 'Recharts' to see the state, it looks like the state is returning an empty array and my chart is not seeing the data.
The Recharts chart takes an array with an object inside with two values, example shown below
const data = [
{ name: "Group A", data: 400 },
{ name: "Group B", data: 300 },
{ name: "Group C", data: 300 },
{ name: "Group D", data: 200 },
{ name: "Group E", data: 278 },
{ name: "Test Data", data: 189 }
];
However after i have moved my state as props to the component and mapped the result to take the same names as input the charts is not displaying anything
(my mapped props)
const activityData = [
...props.pieData.map(el => ({
name: el.title,
data: el.amount
}))
];
I have put a simplified version on codesandbox to make it a little bit easier if anyone wants to see the output i'm getting
https://codesandbox.io/s/hidden-dew-676xc

Found the issue as soon as i posted this, the 'data' value which i had mapped in my props was getting outputted as a string, when the object was expecting a number

Related

How to make api function dynamically in Reactjs

I am working with Reactjs/Nextjs and i am fetching data from "comments.js"
in this file right now data is statically displaying,Here is my current data
export const books = [
{
id: 1,
title: "Things fall apart",
},
{
id: 2,
title: "Fairy tails",
},
...
]
I want to know that how can i convert this "static" data to "dynamic"(from server or database/mysql) ?

vue3 blocks tree does not "reload" when changing the data

I am looking for a organization chart plugin for vue 3 and I have found only this one
https://github.com/megafetis/vue3-blocks-tree
The issue that I have is when changing the ref treeData variable the chart is not loading the new structure.
I want to dynamic load the chart. When fetch the data the chart to loads the new data and display it.
Here is the codesandbox example:
https://codesandbox.io/s/flamboyant-gwen-o8vp9?file=/src/App.vue
When press the Add ... the treeData reference variable should load the new data and the chart to display it ... but it doesn't.
Any ideas ?
Should I reload the component on every fetch ?
Try to use documented way make treeData reactive.
Replace ref to reactive for treeDate definition.
Change parts of treeData on onAddData instead replacing all object.
Full changed example:
import { reactive } from "vue";
import VueBlocksTree from "vue3-blocks-tree";
import "vue3-blocks-tree/dist/vue3-blocks-tree.css";
export default {
name: "Diagram",
components: { VueBlocksTree },
setup() {
let treeData = reactive({
label: "root",
children: [
{ label: "child 1" },
{ label: "child 2" },
{
label: "subparent 1",
children: [
{ label: "subchild 1" },
{
label: "subchild 2",
children: [{ label: "subchild 11" }, { label: "subchild 22" }],
},
],
},
],
});
// let treeData = ref({});
const onAddData = () => {
Object.assign(treeData, { label: "Test", children: [{ label: "Test 1" }, { label: "Test 2" }] });
};
return {
treeData,
onAddData,
};
},
};
UPD: Change code on onAddData by adding Object.assign.

React component not redraw when when props are updated

Quick info to describe the context.
I am working to a tree component that receives as prop this kind of data model:
workfolder: [{
label: "test",
folders: [
{ label: "label 1", id: 1 },
{ label: "label 2", id: 2 },
{ label: "label 3", id: 3 }
]
}];
All data are stored in a Redux store.
The initial value is:
state: { workfolder: [] }
On mount i fetch for default values and merge the results to workfolder in the reducer and i get my tree drawn.
return {
...state,
workfolder: results
}
When i click on one of the labels ( label 3 ) i fetch again for the sub-folders using the id and i get:
[{ label: "label 5", id: 5 },{ label: "label 5", id: 5 }]
At this point in the reducer i use a library to loop deep into the state till i find the property matching the id of the element i clicked ( label 3 in this case ) and want to merge the sub-folders into a new folder attribute.
let newState = JSON.parse(JSON.stringify(state.workfolder));
deepForEach( newState, (value, key, subject, path) => {
const isParentFolder = value === action.payload.parent;
const hasNotFolders = !subject.folders;
if( isParentFolder && hasNotFolders ) {
subject.folders = action.payload.node
}
} );
then i merge the new state in the store:
return {
...state,
workfolder: newState
}
Following this way i get the store updated, but the component won't redraw.
NOTE: this is a dummy example. In real life i have to deal with a multi level nested object having only the id and a string containing the path of the attribute i want to modify in the store.
The example that i found in the redux documentation shows how to do that writing statically the merge...

How to represent a tree of models with Ember Data?

I am looking for a way to generate a D3.js data structure from an Ember model, to convert my existing app to Ember. The goal is to display a tree of tasks, each task having 0 or more subtasks.
Here is the result I want to feed to D3.js :
[
{
"parent": 429,
"name": "Parent task 1",
"id": 428
"children": [
{
"parent": 428,
"name": "Sub task 1",
"id": 425
},
{
"parent": 428,
"name": "Sub task 2",
"id": 426
}
]
},
...
]
I tried to define my model like this :
Minp.Task = DS.Model.extend({
name: DS.attr(),
subtasks: DS.hasMany('task'),
data: Ember.computed(function () {
return {
id: this.get('id'),
name: this.get('name'),
type: 'task',
children: this.get('subtasks').map(function (task) {
return task.get('data');
})
};
}).property()
});
But I am getting a "Maximum call stack size exceeded" error. It seems that calling this from the data attributes causes it to be called again, in an infinite loop.
If i return an empty array for children, all works fine.
Do you have any idea why I am getting this ? Is it another way to do it ?
I think you're better off using associations, aren't you? Try using a self-referring data structure.
Minp.Task = DS.Model.extend({
parent: DS.belongsTo('task', inverse: 'children');
children: DS.hasMany('task', async: true, inverse: 'parent');
});
Hopefully that helps. Kind of depends what you want to do with these things, but that's what I generally use when I'm building tree-based data structures.
data is already a property on a DS.Model, and presumably it's getting invoked via the gets... which are now going into your redefinition of data, and causing your loop.

Kendo ListView search doesn't work properly with filtered data

I have a datasource with a filter applied to it. When I enable filterable search for the listview, it wipes out the original filter on the datasource. How can I get it to search WITHIN the filtered data subset?
Here is the issue in action: http://jsfiddle.net/KS7dB/. It is filtered by {b: "2B"}. Start entering "ds" in the search and it wipes out the filter and starts searching everything instead of only the filtered subset. Any idea on how to fix this behavior?
var ds1 = new kendo.data.DataSource({
data: [{
stagename: "ds1 A",
b: "1b"
}, {
stagename: "ds1 B",
b: "2b"
}, {
stagename: "ds1 C",
b: "2b"
}, {
stagename: "ds1 D",
b: "2c"
}, {
stagename: "ds1 E",
b: "2c"
}],
filter: {
field: 'b',
operator: 'eq',
value: '2b'
}
});
$("#stages_listview").kendoMobileListView({
dataSource: ds1,
template: $("#stages_listview_template1").html(),
filterable: {
field: 'stagename',
operator: 'contains',
ignoreCase: true
}
});
I did spent some time digging into this and the problem is that as soon as you create filter on your listview, in practice that is a filter on the underlining data source, they are not two separate cumulative filters . Therefore behaviour you observed seems to be correct.
Work around options:
override the filter function on the data source so it takes argument
passed to it via listview and always append the default data source
filter. Something alongside these lines. I have to admit I didn't
manage to craft final and functional solution.
lw.dataSource.filter = function() {
arguments[arguments.length]= { field: "b", operator: "eq", value: "2b" };
arguments.length += 1;
var result = lw.dataSource.originalfilter.apply(this, arguments);
return result;
}
filter server side

Categories