Related
I am using Apache Ecarts stacked line chart. This chart is also available, there is a type date option. For example, like 'Mon,Tue,Wed..' I want to give the month to the user as a second option in the same table. When you click a button, months should be listed instead of days. I made several additions to the sample code below, but it did not see any of the tables.
How can I solve this?
import * as echarts from 'echarts';
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: 'Stacked Line'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
option && myChart.setOption(option);
I'm trying to count how many hr_checked = false by specific user on a nested array inside an array in an Vue.js. Here's a snippet of array code:
userlistes: [
{
id: 2,
username: "Larry",
department_id: 3,
department: {
department_name: "IT",
id: 3,
},
worklists: [
{
id: 278,
user_id: 2,
task_id: 1,
date: "2021-07-30",
hour: 2,
description: "A",
is_overtime: false,
overtime_hour: 0,
task: {
taskname: "Task A",
},
hr_checked: false,
},
{
id: 277,
user_id: 2,
task_id: 1,
date: "2021-07-30",
hour: 3,
description: "B",
is_overtime: false,
overtime_hour: 0,
task: {
taskname: "Task B",
},
hr_checked: false,
},
],
},
{
id: 4,
username: "Tom",
department_id: 2,
department: {
department_name: "Business",
id: 2,
},
worklists: [
{
id: 259,
user_id: 4,
task_id: 7,
date: "2021-07-27",
hour: 6.5,
description:
"A",
is_overtime: false,
overtime_hour: 0,
task: {
taskname: "Task A",
},
hr_checked: false,
},
{
id: 260,
user_id: 4,
task_id: 7,
date: "2021-07-27",
hour: 0.5,
description: "B",
is_overtime: false,
overtime_hour: 0,
task: {
taskname: "Task B",
},
hr_checked: false,
},
],
},
],
And i tried to used Vue computed property to implement this:
computed: {
countCheck() {
return this.userlistes.filter((userliste) => {
return userliste.workhours.reduce((sum, workhour) => {
if (workhour.hr_checked === false) {
sum++;
}
return sum;
}, 0);
});
}
I want to get the count of the values inside the nested array's 'hr_checked'.
the returning result should be like:
Larry: unchecked 2
Tom: unchecked 2
Is there any way to do this in Vue.js? or i'm use wrong function??
Try to map the wrapping array then reduce the nested one :
return this.userlistes.map((item)=>({username:item.username,
unchecked :item.worklists.reduce((sum, workhour) => {
if (workhour.hr_checked === false) {
sum++;
}
return sum;
}, 0)}))
let userlistes = [{
id: 2,
username: "Larry",
department_id: 3,
department: {
department_name: "IT",
id: 3,
},
worklists: [{
id: 278,
user_id: 2,
task_id: 1,
date: "2021-07-30",
hour: 2,
description: "A",
is_overtime: false,
overtime_hour: 0,
task: {
taskname: "Task A",
},
hr_checked: false,
},
{
id: 277,
user_id: 2,
task_id: 1,
date: "2021-07-30",
hour: 3,
description: "B",
is_overtime: false,
overtime_hour: 0,
task: {
taskname: "Task B",
},
hr_checked: false,
},
],
},
{
id: 4,
username: "Tom",
department_id: 2,
department: {
department_name: "Business",
id: 2,
},
worklists: [{
id: 259,
user_id: 4,
task_id: 7,
date: "2021-07-27",
hour: 6.5,
description: "A",
is_overtime: false,
overtime_hour: 0,
task: {
taskname: "Task A",
},
hr_checked: false,
},
{
id: 260,
user_id: 4,
task_id: 7,
date: "2021-07-27",
hour: 0.5,
description: "B",
is_overtime: false,
overtime_hour: 0,
task: {
taskname: "Task B",
},
hr_checked: false,
},
],
},
]
let mapped = userlistes.map((item) => ({
username: item.username,
unchecked: item.worklists.reduce((sum, workhour) => {
if (workhour.hr_checked === false) {
sum++;
}
return sum;
}, 0)
}))
console.log(mapped)
Here is another solution:
link to codesandbox example
Code in computed props:
computed: {
getHRByUser() {
let res = [];
let reducer = (sum, workitem) => {
if (workitem.hr_checked === false) {
sum++;
}
return sum;
};
for (const i in this.userlistes) {
let inactiveHRCount = this.userlistes[i].worklists.reduce(reducer, 0);
res.push({
username: this.userlistes[i].username,
inactiveHRCount: inactiveHRCount,
});
}
return res;
},
}
But Boussadjra Brahim proposed a bit more elegant solution in this case.
computed is fine as your data are dynamic and the function would run everytime the data changes. I would use the above example
countCheck() {
let count = 0
this.userlistes.filter((userliste) => {
if (userliste.workhours && userliste.workhours.hr_checked) {
count++
}
})
return count
}
What I need is to group by project, that for each project I am grouped by the stories that are in those projects, and that for each story I show the tasks. When executing the example, we will see that the history 41 that corresponds to the "barney" project is not shown. It groups the stories but does not show the history corresponding to a barney that is not grouped.
This is an example of how it should look
[
{
"proyecto": "barney",
"historia": 42,
"tarea": [
"dog",
"lion",
"cat"
],
"historia": 41,
"tarea": [
"cat"
]
},
{
"proyecto": "fred",
"historia": 35,
"tarea": [
"dog",
"goldfish"
]
}
]
group();
function group()
{
var characters = [
{ 'proyecto': 'barney', 'historia': 42, 'tarea': 'dog' },
{ 'proyecto': 'barney', 'historia': 42, 'tarea': 'lion' },
{ 'proyecto': 'fred', 'historia': 35, 'tarea': 'dog' },
{ 'proyecto': 'barney', 'historia': 41, 'tarea': 'cat' },
{ 'proyecto': 'fred', 'historia': 35, 'tarea': 'goldfish' }
];
var result=_.chain(characters).groupBy("proyecto").map(function(v, i) {
return {
proyecto: i,
historia: _.get(_.find(v, 'historia'), 'historia'),
tarea: _.map(v, 'tarea')
}
}).value();
document.body.innerHTML = '<pre>' + JSON.stringify(result, null, ' ') + '</pre>';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
Since you already have the lodash answer here is the ES6 implementation of this via single Array.reduce just so you have to to compare:
var data = [ { 'proyecto': 'barney', 'historia': 42, 'tarea': 'dog' }, { 'proyecto': 'barney', 'historia': 42, 'tarea': 'lion' }, { 'proyecto': 'fred', 'historia': 35, 'tarea': 'dog' }, { 'proyecto': 'barney', 'historia': 41, 'tarea': 'cat' }, { 'proyecto': 'fred', 'historia': 35, 'tarea': 'goldfish' } ];
const result = data.reduce((r, {proyecto, historia, tarea}) => {
r[proyecto] = r[proyecto] || {proyecto, historia: [], tarea: []}
r[proyecto].historia.push(historia)
r[proyecto].tarea.push(tarea)
return r
}, {})
console.log(Object.values(result))
Since you are using reduce there is no need for the 2nd _.map loop and all can be done in one "shot".
If ES6 is an issue here is the same implementation with _.reduce:
var data = [ { 'proyecto': 'barney', 'historia': 42, 'tarea': 'dog' }, { 'proyecto': 'barney', 'historia': 42, 'tarea': 'lion' }, { 'proyecto': 'fred', 'historia': 35, 'tarea': 'dog' }, { 'proyecto': 'barney', 'historia': 41, 'tarea': 'cat' }, { 'proyecto': 'fred', 'historia': 35, 'tarea': 'goldfish' } ];
const result = _.reduce(data, function(r,c) {
r[c.proyecto] = r[c.proyecto] || {proyecto: c.proyecto, historia: [], tarea: []}
r[c.proyecto].tarea.push(c.tarea)
r[c.proyecto].historia.push(c.historia)
return r
}, {})
console.log(_.values(result))
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
Use _.map() to extract the historia (like you do for tarea):
var characters = [
{ 'proyecto': 'barney', 'historia': 42, 'tarea': 'dog' },
{ 'proyecto': 'barney', 'historia': 42, 'tarea': 'lion' },
{ 'proyecto': 'fred', 'historia': 35, 'tarea': 'dog' },
{ 'proyecto': 'barney', 'historia': 41, 'tarea': 'cat' },
{ 'proyecto': 'fred', 'historia': 35, 'tarea': 'goldfish' }
];
var result= _(characters)
.groupBy("proyecto")
.map(function(v, i) {
return {
proyecto: i,
historia: _.map(v, 'historia'),
tarea: _.map(v, 'tarea')
}
})
.value();
console.log(result);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
My object looks like this:
const features = [{
'name': 'feature1', 'tags':
[{'weight':10, 'tagName': 't1'},{'weight':20, 'tagName': 't2'}, {'weight':30, 'tagName': 't3'}]
},
{
'name': 'feature2', 'tags':
[{'weight':40, 'tagName': 't1'}, {'weight':5, 'tagName':'t2'}, {'weight':70, 'tagName':'t3'}]
},
{
'name': 'feature3', 'tags':[
{'weight':50, 'tagName': 't1'}, {'weight':2, 'tagName': 't2'}, {'weight':80, 'tagName': 't3'}]
}]
I would like my output to look something like this:
const features = [{'name':'feature1', 'weight':10, 'tagName':'t1'},
{'name':'feature1', 'weight':20, 'tagName':'t2'}, ...
{'name':'feature3', 'weight':80, 'tagName':'t3'}]
I tried to merge and the flatten but it does not work.
Update 1
I tried this:
let feat = features;
results = []
_.each(feat, (item) => {
console.log(item);
results.push(_.flatten(_.pick(item.tags, 'weight'))); // pick for certain keys.
}
Update 2
This solved my problem
_.each(features, (item) => {
_.each(item.tags, (itemTag) => {
results.push({'name':item.name, 'weight':itemTag.weight, 'tagName':itemTag.tagName})})})
But I want to know if there is a more lodash way to do this!
The approach below uses flatMap to flatten tags acquired through map. Finally, use the spread operator to assign the values from tag and the feature's name.
const result = _.flatMap(features, ({ name, tags }) =>
_.map(tags, tag => ({ name, ...tag }))
);
const features = [{
'name': 'feature1',
'tags': [{
'weight': 10,
'tagName': 't1'
}, {
'weight': 20,
'tagName': 't2'
}, {
'weight': 30,
'tagName': 't3'
}]
},
{
'name': 'feature2',
'tags': [{
'weight': 40,
'tagName': 't1'
}, {
'weight': 5,
'tagName': 't2'
}, {
'weight': 70,
'tagName': 't3'
}]
},
{
'name': 'feature3',
'tags': [{
'weight': 50,
'tagName': 't1'
}, {
'weight': 2,
'tagName': 't2'
}, {
'weight': 80,
'tagName': 't3'
}]
}
];
const result = _.flatMap(features, ({ name, tags }) =>
_.map(tags, tag => ({ name, ...tag }))
);
console.log(result);
.as-console-wrapper{min-height:100%;top:0}
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
Here's a plain javascript solution that uses Array#reduce and Array#map with the help of Array#concat to flatten the array.
const result = features.reduce(
(result, { name, tags }) => result
.concat(tags.map(tag => ({ name, ...tag }))),
[]
);
const features = [{
'name': 'feature1',
'tags': [{
'weight': 10,
'tagName': 't1'
}, {
'weight': 20,
'tagName': 't2'
}, {
'weight': 30,
'tagName': 't3'
}]
},
{
'name': 'feature2',
'tags': [{
'weight': 40,
'tagName': 't1'
}, {
'weight': 5,
'tagName': 't2'
}, {
'weight': 70,
'tagName': 't3'
}]
},
{
'name': 'feature3',
'tags': [{
'weight': 50,
'tagName': 't1'
}, {
'weight': 2,
'tagName': 't2'
}, {
'weight': 80,
'tagName': 't3'
}]
}
];
const result = features.reduce(
(result, { name, tags }) => result
.concat(tags.map(tag => ({ name, ...tag }))),
[]
);
console.log(result);
.as-console-wrapper{min-height:100%;top:0}
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
I have problem rendering Line Chart in EXTJS 4. I have Viewport that contain accordion Layout. In that layout, I create very simple Chart.
Here is my code:
var chartBox = Ext.create('Ext.chart.Chart', {
width: 500,
height: 300,
style: 'background:#fff',
animate: true,
store: Ext.data.Store({
fields: ['active'],
data: [
{ 'name': 'Jan 2011', 'active': 10},
{ 'name': 'Feb 2011', 'active': 9},
{ 'name': 'Mar 2011', 'active': 13},
{ 'name': 'Apr 2011', 'active': 5},
{ 'name': 'Mei 2011', 'active': 17},
]
}),
theme: 'Category1',
legend: {
position: 'right'
},
axes: [{
type: 'Numeric',
position: 'left',
fields: ['active'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Total',
grid: true,
minimum: 0
},{
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Month and Year'
}],
series: [{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
xField: 'name',
yField: 'active',
markerConfig: {
type: 'cross',
size: 4,
radius: 4,
'stroke-width': 0
}
}]
})
Then, it is work. See this screenshot.
But after I change this part of code:
store: Ext.data.Store({
fields: ['active'],
data: [
{ 'name': 'Jan 2011', 'active': 10},
{ 'name': 'Jan 2011', 'active': 10},
{ 'name': 'Jan 2011', 'active': 10},
{ 'name': 'Jan 2011', 'active': 10},
{ 'name': 'Jan 2011', 'active': 10},
]
}),
with this:
store: Ext.data.Store({
fields: ['active'],
autoLoad: true,
proxy: {
type: 'ajax',
url : 'data/statexample_noroot.json',
reader: {
type: 'json'
}
}
}),
to load data from Server, it is not work. See this screenshot.
This is the content from "statexample_noroot.json" :
[
{ 'name': 'Jan 2011', 'active': 10},
{ 'name': 'Feb 2011', 'active': 9},
{ 'name': 'Mar 2011', 'active': 13},
{ 'name': 'Apr 2011', 'active': 5},
{ 'name': 'Mei 2011', 'active': 17},
]
I only get false rendering Line Chart with warning "Unexpected value NaN parsing x attribute.", "Unexpected value NaN parsing width attribute.", "Unexpected value matrix(NaN,0,NaN,1,NaN,0) parsing transform attribute." etc....
I have set axes with Numeric. I try everything include using Ext.data.Model, Ext.data.JsonStore, but still didn't work.
What is the difference?? What I am missing here? Anyone know why this thing happen? I am stuck for plenty of hours.
you forgot the other field "name"
fields: ['active'], => fields: ['active','name'],