how to remove duplicates in js "reactnative picker" - react-native

Please find the below data. Here is I need only Id:1 data. Some Id's have no values and some Id's have another values.
Actual data:
data[
{Id: 1, Specialization: "General", ImageUrl: "http://122.175.55.55:8080/storage/loadfile/specialization/doctor.png", Description: "General", IsActive: true, …}
{Id: 2, Specialization: "Cardiology", ImageUrl: "http://122.175.55.55:8080/storage/loadfile/specialization/heartbeat.png", Description: "Hart Related", IsActive: true, …}
{Id: 3, Specialization: "Gynaecology", ImageUrl: "http://122.175.55.55:8080/storage/loadfile/specialization/nephrology.png", Description: "Gynaecology", IsActive: true, …}
{Id: 4, Specialization: "Orthopedic", ImageUrl: "http://122.175.55.55:8080/storage/loadfile/specialization/mental.png", Description: "Bones", IsActive: true, …}
{Id: 4, Specialization: "Orthopedic", ImageUrl: "http://122.175.55.55:8080/storage/loadfile/specialization/mental.png", Description: "Bones", IsActive: true, …}
{Id: 1, Specialization: "General", ImageUrl: "http://122.175.55.55:8080/storage/loadfile/specialization/doctor.png", Description: "General", IsActive: true, …}
{Id: 3, Specialization: "Gynaecology", ImageUrl: "http://122.175.55.55:8080/storage/loadfile/specialization/nephrology.png", Description: "Gynaecology", IsActive: true, …}
{Id: 3, Specialization: "Gynaecology", ImageUrl: "http://122.175.55.55:8080/storage/loadfile/specialization/nephrology.png", Description: "Gynaecology", IsActive: true, …}
{Id: 2, Specialization: "Cardiology", ImageUrl: "http://122.175.55.55:8080/storage/loadfile/specialization/heartbeat.png", Description: "Hart Related", IsActive: true, …}
]
i need like this
data[
{Id: 1, Specialization: "General", ImageUrl: "http://122.175.55.55:8080/storage/loadfile/specialization/doctor.png", Description: "General", IsActive: true, …}
{Id: 2, Specialization: "Cardiology", ImageUrl: "http://122.175.55.55:8080/storage/loadfile/specialization/heartbeat.png", Description: "Hart Related", IsActive: true, …}
{Id: 3, Specialization: "Gynaecology", ImageUrl: "http://122.175.55.55:8080/storage/loadfile/specialization/nephrology.png", Description: "Gynaecology", IsActive: true, …}
{Id: 4, Specialization: "Orthopedic", ImageUrl: "http://122.175.55.55:8080/storage/loadfile/specialization/mental.png", Description: "Bones", IsActive: true, …}
]


You can try like this:
const data = [
{Id: 1, Specialization: "General", ImageUrl: "http://122.175.55.55:8080/storage/loadfile/specialization/doctor.png", Description: "General", IsActive: true, …}
{Id: 2, Specialization: "Cardiology", ImageUrl: "http://122.175.55.55:8080/storage/loadfile/specialization/heartbeat.png", Description: "Hart Related", IsActive: true, …}
{Id: 3, Specialization: "Gynaecology", ImageUrl: "http://122.175.55.55:8080/storage/loadfile/specialization/nephrology.png", Description: "Gynaecology", IsActive: true, …}
{Id: 4, Specialization: "Orthopedic", ImageUrl: "http://122.175.55.55:8080/storage/loadfile/specialization/mental.png", Description: "Bones", IsActive: true, …}
{Id: 4, Specialization: "Orthopedic", ImageUrl: "http://122.175.55.55:8080/storage/loadfile/specialization/mental.png", Description: "Bones", IsActive: true, …}
{Id: 1, Specialization: "General", ImageUrl: "http://122.175.55.55:8080/storage/loadfile/specialization/doctor.png", Description: "General", IsActive: true, …}
{Id: 3, Specialization: "Gynaecology", ImageUrl: "http://122.175.55.55:8080/storage/loadfile/specialization/nephrology.png", Description: "Gynaecology", IsActive: true, …}
{Id: 3, Specialization: "Gynaecology", ImageUrl: "http://122.175.55.55:8080/storage/loadfile/specialization/nephrology.png", Description: "Gynaecology", IsActive: true, …}
{Id: 2, Specialization: "Cardiology", ImageUrl: "http://122.175.55.55:8080/storage/loadfile/specialization/heartbeat.png", Description: "Hart Related", IsActive: true, …}
]
const getUniqueData = (data) => {
const indexes = [];
const uniqueData = [];
for(let i = 0; i < data.length; i++){
if(indexes.contains(data[i].id)){
continue;
} else {
indexes.push(data[i].id);
uniqueData.push(data[i]);
}
}
return uniqueData;
}
const uniqueData = getUniqueData(data);
This is of course a primitive solution. You can try javascipt Sets or lodash library for cases like these.

Related

React Native VictoryPie from nested data

When passing data in VictoryPie, it returns repeated data from the category,
how to sum value of each category, and how to show summed values ​​per category
import React from "react";
import { VictoryPie } from "victory";
const data = [
{
cardId: 5,
category: "Boleto/Faturas mensais",
created_at: "2023-01-08T01:59:41.000Z",
date: "28/12/2022",
id: "D6Bd6AAFtT39Yp8F6Rep",
name: "Manutenção aparelho ",
type: "Gastos",
value: 90,
},
{
cardId: 5,
category: "Pix",
created_at: "2023-01-08T01:58:06.000Z",
date: "28/12/2022",
id: "K08FSo6YvK1PmYfZXSJ1",
name: "Pix mônica ",
type: "Entrada",
value: 15,
},
{
cardId: 5,
category: "Pix",
created_at: "2023-01-08T01:57:44.000Z",
date: "28/12/2022",
id: "Y8TywDu2RMaUqCHNXVEG",
name: "Anderson pix",
type: "Entrada",
value: 10,
},
{
cardId: 5,
category: "Viagens",
created_at: "2023-01-08T01:56:59.000Z",
date: "28/12/2022",
id: "MY1AqVWG3mEbi9z9FANt",
name: "Pix Anderson ",
type: "Gastos",
value: 50,
},
{
cardId: 5,
category: "Pix",
created_at: "2023-01-08T01:56:26.000Z",
date: "28/12/2022",
id: "DsrJeggShwEqIBN9V2EK",
name: "Pix valdileide ",
type: "Gastos",
value: 20,
},
{
cardId: 5,
category: "Alimentação",
created_at: "2023-01-08T01:55:44.000Z",
date: "27/12/2022",
id: "QIQ0zo5XTSOsz0CfrIeJ",
name: "Poliana salgado ",
type: "Gastos",
value: 16,
},
{
cardId: 5,
category: "Alimentação",
created_at: "2023-01-08T01:55:15.000Z",
date: "27/12/2022",
id: "OBDUivk9eNAFRYMJPJHT",
name: "Pix Gilmario ",
type: "Gastos",
value: 10,
},
{
cardId: 5,
category: "Alimentação",
created_at: "2023-01-08T01:54:54.000Z",
date: "27/12/2022",
id: "UItLQVcNCyAeqbNYZBNW",
name: "Pix Gilmario",
type: "Gastos",
value: 20,
},
{
cardId: 5,
category: "Pix",
created_at: "2023-01-08T01:54:00.000Z",
date: "27/12/2022",
id: "UUsqUnwLFZQvudw7983k",
name: "Pix Jean",
type: "Entrada",
value: 20,
},
{
cardId: 5,
category: "Supermercado",
created_at: "2023-01-08T01:52:42.000Z",
date: "27/12/2022",
id: "ijEMYT9lkJIXx1Df7mSB",
name: "Mercado oliveira ",
type: "Gastos",
value: 24.59,
},
{
cardId: 5,
category: "Renda extra",
created_at: "2023-01-08T01:51:16.000Z",
date: "27/12/2022",
id: "xSBdQPat26UUfFzy9879",
name: "Aula extra ",
type: "Entrada",
value: 140,
},
{
cardId: 5,
category: "Alimentação",
created_at: "2023-01-08T01:50:02.000Z",
date: "27/12/2022",
id: "bXyz7M9eJpNKc1l0tgDm",
name: "Benzinho ",
type: "Gastos",
value: 3,
},
{
cardId: 5,
category: "Alimentação",
created_at: "2023-01-08T01:49:31.000Z",
date: "27/12/2022",
id: "kBPjgaagcUAlTWVLxAvl",
name: "Água ",
type: "Gastos",
value: 10,
},
{
cardId: 5,
category: "Boleto/Faturas mensais",
created_at: "2023-01-08T01:48:40.000Z",
date: "26/12/2022",
id: "MMi2PYfuNY4AqSCoEiww",
name: "Mercado oliveira ",
type: "Gastos",
value: 20.95,
},
{
cardId: 1,
category: "Boleto/Faturas mensais",
created_at: "2023-01-08T01:48:08.000Z",
date: "26/12/2022",
id: "oNFui1IowfgmDVXESQj5",
name: "Fatura Iti",
type: "Gastos",
value: 257.12,
},
{
cardId: 5,
category: "Pix",
created_at: "2023-01-08T01:46:47.000Z",
date: "26/12/2022",
id: "MwjVCLSLVbHERQ4vRRkv",
name: "Pix Gabriela Ribeiro ",
type: "Gastos",
value: 17.97,
},
{
cardId: 5,
category: "Pix",
created_at: "2023-01-08T01:45:53.000Z",
date: "26/12/2022",
id: "iAeYOIAsmm0vDvp7faZG",
name: "Pix valdileide ",
type: "Gastos",
value: 10,
},
{
cardId: 5,
category: "Pix",
created_at: "2023-01-08T01:44:39.000Z",
date: "26/12/2022",
id: "YKgqnFhymhVFGLWy4EDz",
name: "Pix Lidiane ",
type: "Entrada",
value: 10,
},
{
cardId: 2,
category: "Boleto/Faturas mensais",
created_at: "2023-01-08T01:42:31.000Z",
date: "25/12/2025",
id: "upOr8FdFYtCboeVEVGyx",
name: "Fatura Neon Maria ",
type: "Gastos",
value: 605.87,
},
{
cardId: 5,
category: "Alimentação",
created_at: "2023-01-08T01:38:56.000Z",
date: "25/12/2022",
id: "mkzMJLflCWsUTVRbyjV9",
name: "Espetinho ",
type: "Gastos",
value: 31,
},
{
cardId: 5,
category: "Alimentação",
created_at: "2023-01-08T01:38:40.000Z",
date: "25/12/022",
id: "BX7uFo9aujeedViZIOmO",
name: "Poliana",
type: "Gastos",
value: 6,
},
{
cardId: 5,
category: "Alimentação",
created_at: "2023-01-08T01:38:21.000Z",
date: "25/12/2022",
id: "dr1OaICXaRmdZtytcIRf",
name: "Salgados ",
type: "Gastos",
value: 10,
},
{
cardId: 5,
category: "Boleto/Faturas mensais",
created_at: "2023-01-08T01:37:47.000Z",
date: "25/12/2022",
id: "YAypWKLB8xJzxRGoDob6",
name: "Fatura Ame",
type: "Gastos",
value: 133.86,
},
{
cardId: 2,
category: "Boleto/Faturas mensais",
created_at: "2023-01-08T01:36:07.000Z",
date: "25/12/2022",
id: "d9CnfQKR2psd06yKIIHA",
name: "Fatura Neon ",
type: "Gastos",
value: 112.31,
},
{
cardId: 3,
category: "Boleto/Faturas mensais",
created_at: "2023-01-08T01:35:35.000Z",
date: "25/12/2022",
id: "5lZ5hLkUqHkmxRdT6qrB",
name: "Fatura Next ",
type: "Gastos",
value: 119.83,
},
{
cardId: 5,
category: "Boleto/Faturas mensais",
created_at: "2023-01-08T01:34:50.000Z",
date: "25/12/2022",
id: "FAE4LxB4nQ6EZCnqI7zN",
name: "Fatura Picpay ",
type: "Gastos",
value: 40.96,
},
{
cardId: 5,
category: "Supermercado",
created_at: "2023-01-08T01:33:31.000Z",
date: "25/12/2022",
id: "Fmg8PfcY1HGC9hHZP254",
name: "Mercado oliveira ",
type: "Gastos",
value: 34.06,
},
{
cardId: 5,
category: "Bebidas",
created_at: "2023-01-08T01:32:58.000Z",
date: "24/12/2022",
id: "WE93WOs9XWtBZCI4orQQ",
name: "Bar da Lia ",
type: "Gastos",
value: 13.5,
},
{
cardId: 5,
category: "Bebidas",
created_at: "2023-01-08T01:32:14.000Z",
date: "24/12/2022",
id: "XejN535LjmeMNodn4YxA",
name: "Bar da Lia ",
type: "Gastos",
value: 10,
},
{
cardId: 5,
category: "Supermercado",
created_at: "2023-01-08T01:30:55.000Z",
date: "24/12/2022",
id: "LHMhnjN5STVMrdCgBjIq",
name: "Mercado oliveira ",
type: "Gastos",
value: 30.98,
},
{
cardId: 5,
category: "Supermercado",
created_at: "2023-01-08T01:30:16.000Z",
date: "24/12/2022",
id: "zGDqEgA1WEBud2YJbpbh",
name: "Mercado oliveira ",
type: "Gastos",
value: 5,
},
{
cardId: 5,
category: "Viagens",
created_at: "2023-01-08T01:29:39.000Z",
date: "23/12/2022",
id: "jR5azFQCpij47SXwIi0F",
name: "99 ",
type: "Gastos",
value: 6.8,
},
{
cardId: 5,
category: "Renda extra",
created_at: "2023-01-08T01:27:55.000Z",
date: "23/12/2022",
id: "CWsUoCi3opH1VM859aet",
name: "Cabelo Julieta ",
type: "Entrada",
value: 50,
},
{
cardId: 5,
category: "Supermercado",
created_at: "2023-01-08T01:22:35.000Z",
date: "23/12/2022",
id: "HwtEjH3kenPtya0IuKa8",
name: "Supermercado Gabrielle ",
type: "Gastos",
value: 39.78,
},
{
cardId: 5,
category: "Alimentação",
created_at: "2023-01-08T01:22:02.000Z",
date: "23/12/2022",
id: "eJ80QcIhCUNVRsU5Dt0S",
name: "Luane Salgado ",
type: "Gastos",
value: 3.84,
},
{
cardId: 5,
category: "Supermercado",
created_at: "2023-01-08T01:21:22.000Z",
date: "23/12/2022",
id: "nFNNXTpNxZh9QoOcq3xd",
name: "Supermercado Gabrielle ",
type: "Gastos",
value: 52.9,
},
{
cardId: 5,
category: "Salário",
created_at: "2023-01-08T01:19:46.000Z",
date: "23/12/2022",
id: "VWorJCYonhNHAZYYkRnj",
name: "Salário María ",
type: "Entrada",
value: 1210,
},
{
cardId: 5,
category: "Alimentação",
created_at: "2023-01-08T01:18:57.000Z",
date: "20/12/2022",
id: "hgcTYR7hjn64qCI71uN9",
name: "Açougue ",
type: "Gastos",
value: 9.23,
},
{
cardId: 5,
category: "Boleto/Faturas mensais",
created_at: "2023-01-08T01:17:22.000Z",
date: "20/12/2022",
id: "fN7FSvj1c1VSNu06EvMN",
name: "Shorts",
type: "Gastos",
value: 50,
},
{
cardId: 5,
category: "Boleto/Faturas mensais",
created_at: "2023-01-08T01:16:18.000Z",
date: "20/12/2022",
id: "SsND7Go07oJFUVyF7yjl",
name: "Fatura Nubank Maria ",
type: "Gastos",
value: 347,
},
{
cardId: 5,
category: "Renda extra",
created_at: "2023-01-08T01:14:38.000Z",
date: "20/12/2022",
id: "yErgr6DylGMSRhzUDpDn",
name: "Décimo terceiro Maria ",
type: "Entrada",
value: 840.93,
},
{
cardId: 5,
category: "Estética",
created_at: "2023-01-08T01:13:09.000Z",
date: "20/12/2022",
id: "HJW4gyR2mpw7PqAommOX",
name: "Cabeleireiro ",
type: "Gastos",
value: 15,
},
{
cardId: 5,
category: "Supermercado",
created_at: "2023-01-08T01:12:16.000Z",
date: "17/12/2022",
id: "d0yTsiSCjTZE56i6VAui",
name: "Mercado ",
type: "Gastos",
value: 46.56,
},
{
cardId: 5,
category: "Alimentação",
created_at: "2023-01-08T01:11:08.000Z",
date: "17/12/2022",
id: "ESWOY8EFZ20kUiCa1Kl2",
name: "Poliana salgado ",
type: "Gastos",
value: 16,
},
{
cardId: 5,
category: "Alimentação",
created_at: "2023-01-08T01:10:36.000Z",
date: "16/12/2022",
id: "bHK2624f9TVgrjN8qYcQ",
name: "Água ",
type: "Gastos",
value: 10,
},
{
cardId: 5,
category: "Estética",
created_at: "2023-01-08T01:09:31.000Z",
date: "16/12/2022",
id: "245DFd4Br3d9cAsLmwBf",
name: "Unha e sombrancelha ",
type: "Gastos",
value: 34,
},
{
cardId: 5,
category: "Alimentação",
created_at: "2023-01-08T01:08:20.000Z",
date: "15/12/2022",
id: "3SSd0YCxkh9qBJMcanrZ",
name: "Espetinho ",
type: "Gastos",
value: 26,
},
{
cardId: 5,
category: "Supermercado",
created_at: "2023-01-08T01:07:23.000Z",
date: "15/12/2022",
id: "LbWn4Lu4EPSGG1bkE5sF",
name: "Mercado oliveira ",
type: "Gastos",
value: 11.47,
},
{
cardId: 5,
category: "Boleto/Faturas mensais",
created_at: "2023-01-08T01:06:52.000Z",
date: "14/12/2022",
id: "6yFUNtamujqt8MUib8k7",
name: "Fatura Cenconsud ",
type: "Gastos",
value: 73.76,
},
{
cardId: 5,
category: "Boleto/Faturas mensais",
created_at: "2023-01-08T01:06:00.000Z",
date: "14/12/2022",
id: "7UIFcP6nbfOIAWDyGvYV",
name: "Fatura Nubank Daniel ",
type: "Gastos",
value: 192.89,
},
{
cardId: 5,
category: "Alimentação",
created_at: "2023-01-08T01:04:59.000Z",
date: "13/12/2022",
id: "7ZYEanQlVrX0xJsvxKHY",
name: "Açougue ",
type: "Gastos",
value: 30,
},
{
cardId: 5,
category: "Boleto/Faturas mensais",
created_at: "2023-01-08T01:03:56.000Z",
date: "13/12/2022",
id: "MoOIZj6enES42pAXQKs0",
name: "Aluguel ",
type: "Gastos",
value: 400,
},
{
cardId: 5,
category: "Alimentação",
created_at: "2023-01-08T01:02:57.000Z",
date: "12/12/2022",
id: "zhixc95WQTAf7hvfGIeN",
name: "Espetinho ",
type: "Gastos",
value: 19,
},
{
cardId: 5,
category: "Boleto/Faturas mensais",
created_at: "2023-01-08T01:02:26.000Z",
date: "12/12/2022",
id: "u1kWfpY6UwBp7K2n5dur",
name: "Internet ",
type: "Gastos",
value: 61.23,
},
{
cardId: 5,
category: "Boleto/Faturas mensais",
created_at: "2023-01-08T01:01:36.000Z",
date: "12/12/2022",
id: "P5mBOZ2bHwZo1q8ZseAg",
name: "Perfume",
type: "Gastos",
value: 50,
},
{
cardId: 2,
category: "Boleto/Faturas mensais",
created_at: "2023-01-08T01:01:07.000Z",
date: "12/12/2022",
id: "J2fJ6kf0wr8JY1L9pV8S",
name: "Fatura Neon Maria",
type: "Gastos",
value: 605.85,
},
{
cardId: 5,
category: "Boleto/Faturas mensais",
created_at: "2023-01-08T00:59:17.000Z",
date: "12/12/2022",
id: "TXoc99oCPoUh9mW6xN6r",
name: "Faculdade Maria ",
type: "Gastos",
value: 210.8,
},
{
cardId: 5,
category: "Supermercado",
created_at: "2023-01-08T00:58:30.000Z",
date: "12/12/2022",
id: "2mHa4ILBKF8AD6vDBN81",
name: "Mercado oliveira ",
type: "Gastos",
value: 15.5,
},
{
cardId: 5,
category: "Alimentação",
created_at: "2023-01-08T00:57:48.000Z",
date: "12/12/2022",
id: "ijYfwHhPufCq3bE4zzXN",
name: "Água ",
type: "Gastos",
value: 10,
},
{
cardId: 5,
category: "Salário",
created_at: "2023-01-08T00:56:57.000Z",
date: "12/12/2022",
id: "CvlPaTtD5LrKQHhOQHEg",
name: "Salário Daniel ",
type: "Entrada",
value: 1917.6,
},
{
cardId: 5,
category: "Pix",
created_at: "2023-01-08T00:56:31.000Z",
date: "09/12/2022",
id: "nHU5Q9QdacjbhQT9tmfX",
name: "Pix valdileide",
type: "Entrada",
value: 22,
},
{
cardId: 5,
category: "Pix",
created_at: "2023-01-08T00:55:41.000Z",
date: "09/12/2022",
id: "3TXu72s4edUHJAxpIfLl",
name: "Pix Anderson ",
type: "Entrada",
value: 10,
},
{
cardId: 5,
category: "Boleto/Faturas mensais",
created_at: "2023-01-08T00:54:41.000Z",
date: "08/12/2052",
id: "XaVslEmkGWUVk2j53JF7",
name: "Parcela celular ",
type: "Gastos",
value: 149.45,
},
{
cardId: 5,
category: "Alimentação",
created_at: "2023-01-08T00:53:07.000Z",
date: "06/12/2022",
id: "QQ8ucSqpQqmmMBTyWkFY",
name: "Dona Belita ",
type: "Gastos",
value: 6,
},
{
cardId: 5,
category: "Supermercado",
created_at: "2023-01-08T00:52:38.000Z",
date: "06/12/2022",
id: "gdTgX7rCQvssO6sOuBCm",
name: "Imperial embalagens ",
type: "Gastos",
value: 52,
},
{
cardId: 5,
category: "Viagens",
created_at: "2023-01-08T00:51:55.000Z",
date: "06/12/2022",
id: "4FnSpDCkhlAG5yu4M1en",
name: "José dilton",
type: "Gastos",
value: 25,
},
{
cardId: 5,
category: "Boleto/Faturas mensais",
created_at: "2023-01-08T00:49:24.000Z",
date: "05/12/2022",
id: "D8SGKirTbQYM4p3zeBwF",
name: "Faculdade Daniel ",
type: "Gastos",
value: 193.1,
},
{
cardId: 5,
category: "Alimentação",
created_at: "2023-01-08T00:48:47.000Z",
date: "05/12/2022",
id: "v9hvhXcFAVk70q0FQJly",
name: "Água ",
type: "Gastos",
value: 10,
},
{
cardId: 5,
category: "Alimentação",
created_at: "2023-01-08T00:48:13.000Z",
date: "03/12/2022",
id: "bMOBzGUeKFudgv5V73GD",
name: "Espetinho ",
type: "Gastos",
value: 17,
},
{
cardId: 5,
category: "Alimentação",
created_at: "2023-01-08T00:46:39.000Z",
date: "03/12/2022",
id: "NECaduQT8hN2U5LuMXVr",
name: "Picolé ",
type: "Gastos",
value: 4,
},
{
cardId: 5,
category: "Supermercado",
created_at: "2023-01-08T00:46:10.000Z",
date: "03/12/2022",
id: "JbkKR5mowEBB1NVfxCJl",
name: "Mercearia El Shaday ",
type: "Gastos",
value: 9.55,
},
{
cardId: 5,
category: "Alimentação",
created_at: "2023-01-08T00:44:55.000Z",
date: "02/12/2022",
id: "aNBOFDx61CxE3dSXZ2ei",
name: "Poliana salgado ",
type: "Gastos",
value: 36,
},
{
cardId: 5,
category: "Renda extra",
created_at: "2023-01-08T00:44:24.000Z",
date: "01/12/2022",
id: "JWOUrsO3BBEt2hE1D3aS",
name: "Pix Bruno ",
type: "Entrada",
value: 60,
},
{
cardId: 5,
category: "Supermercado",
created_at: "2023-01-08T00:43:26.000Z",
date: "01/12/2022",
id: "hb8V1xaQx8b71R5BiXqs",
name: "Mercado oliveira ",
type: "Gastos",
value: 57.05,
},
{
cardId: 5,
category: "Alimentação",
created_at: "2023-01-08T00:37:35.000Z",
date: "01/12/2022",
id: "by94oJIWlXJpV0gSSd2y",
name: "Joisse Bolo",
type: "Gastos",
value: 20,
},
];
class App extends React.Component {
render() {
return (
<VictoryPie
data={data}
startAngle={130}
endAngle={600}
x="category"
y={(data) => data.value }
/>
);
}
}
export default App;
enter image description here
esperava exibir cada categoria e grafico prenchido com seus valores de categoria

How Can save JSON generated from Form Builder in the process user task?

I'm creating process have usertask contain form created from Form Builder , How can keep this JSON in the process ?
it's should create property in extension tab, and when start process the form should be reload JSON propery value ?
there are example can me follow up ?
Process Diagram
Form Created
JSON generated :
{
components: [
{
input: true,
tableView: true,
inputType: "text",
inputMask: "",
label: "First Name",
key: "firstName",
placeholder: "Enter your first name",
prefix: "",
suffix: "",
multiple: false,
defaultValue: "",
protected: false,
unique: false,
persistent: true,
validate: {
required: false,
minLength: "",
maxLength: "",
pattern: "",
custom: "",
customPrivate: false
},
conditional: {
show: false,
when: null,
eq: ""
},
type: "textfield",
$$hashKey: "object:14",
autofocus: false,
hidden: false,
clearOnHide: true,
spellcheck: true
},
{
input: true,
tableView: true,
inputType: "text",
inputMask: "",
label: "Last Name",
key: "lastName",
placeholder: "Enter your last name",
prefix: "",
suffix: "",
multiple: false,
defaultValue: "",
protected: false,
unique: false,
persistent: true,
validate: {
required: false,
minLength: "",
maxLength: "",
pattern: "",
custom: "",
customPrivate: false
},
conditional: {
show: false,
when: null,
eq: ""
},
type: "textfield",
$$hashKey: "object:15",
autofocus: false,
hidden: false,
clearOnHide: true,
spellcheck: true
},
{
type: "button",
theme: "primary",
disableOnInvalid: true,
action: "submit",
block: false,
rightIcon: "",
leftIcon: "",
size: "md",
key: "submit",
tableView: false,
label: "Submit",
input: true,
$$hashKey: "object:18",
autofocus: false
}],
display: "form",
page: 0
}
);

Display a pdf in a form in ExtJS 3.4

I would like to create a form with fields at top and a pdf in the middle with ExtJS 3.4.
Displaying a pdf is no problem, a form with fields is no problem but putting both together did not work yet.
Displaying a pdf works with a panel, a form with fields is a Ext.form.FormPanel.
How can I embed the pdf in the form?
Here is what I tried:
var pdfForm = new Ext.form.FormPanel({
id: 'pdfForm',
width: 700,
cloasable: false,
waitMsgTarget: true,
items: [{
region: 'north',
autoHeight: true,
layout: 'column',
border: false,
defaults: {
bodyStyle: 'padding:10px'
},
items: [{
columnWidth: 0.5,
layout: 'form',
border: false,
items: [{
xtype: 'textfield',
fieldLabel: 'Z',
id: 'Z',
name: 'Z',
readOnly: true,
anchor: '95%'
}, {
xtype: 'textfield',
fieldLabel: 'X',
name: 'X',
readOnly: true,
anchor: '95%'
}]
}, {
columnWidth: 0.5,
layout: 'form',
border: false,
items: [{
xtype: 'textfield',
fieldLabel: 'Y',
name: 'y',
readOnly: true,
anchor: '95%'
}, {
xtype: 'textfield',
fieldLabel: 'M',
name: 'M',
readOnly: true,
anchor: '95%'
}]
}]
}, {
region: 'center',
xtype: 'tabpanel',
id: 'tabs',
plain: true,
activeTab: 4,
activeItem: 4,
layoutOnTabChange: true,
defaults: {
bodyStyle: 'padding:0px'
},
deferredRender: false
}, {
region: 'south',
xtype: 'tabpanel',
items: [{
xtype: 'box',
autoEl: {
tag: 'iframe',
id: 'samplePDF',
name: 'samplePDF',
style: 'height: 100%; width: 100%',
src: 'http://' + serverIP + '/documents/18/bc1bca0a-d437-4505-aee4-9cbe63553a6d'
}
}]
}]
});
The decisive code is in the last few lines. "autoel" does not match with the Ext.form.FormPanel.
Are there any alternatives?

I found the solution.
The main step is to use an Ext.Panel instead of a form.
var formPanel = new Ext.Panel({
frame: true,
renderTo: 'formPanel',
scrollable: 'true',
title: '',
id: 'mainPanel',
autoHeight: true,
autoWidth: true,
layout: 'form',
items: [{
region: 'north',
autoHeight: true,
layout: 'column',
border: false,
defaults: {
bodyStyle: 'padding:10px'
},
items: [{
columnWidth: 0.5,
layout: 'form',
border: false,
items: [{
xtype: 'textfield',
fieldLabel: '1',
id: '1',
name: '1',
readOnly: true,
anchor: '95%'
}]
}, {
columnWidth: 0.5,
layout: 'form',
border: false,
items: [{
xtype: 'textfield',
fieldLabel: '2',
name: '2',
readOnly: true,
anchor: '95%'
}]
}]
}, {
region: 'center',
xtype: 'tabpanel',
id: 'tabs',
plain: true,
activeTab: 4,
activeItem: 4,
layoutOnTabChange: true,
defaults: {
bodyStyle: 'padding:0px'
},
deferredRender: false
}, {
region: 'south',
xtype: 'box',
autoEl: {
tag: 'embed',
id: '3',
name: '3',
style: 'height: 100%; width: 100%',
type: 'application/pdf',
src: 'http://<ip>/<path>.pdf'
}
}]
});
var pdfDlg = new Ext.Window({
id: 'pdfDialog',
title: 'PDF',
layout: 'fit',
width: 1000,
height: 700,
minWidth: 1000,
minHeight: 500,
closeAction: 'hide',
closable: true,
resizable: false,
plain: true,
modal: true,
items: 'mainPanel',
constrainHeader: true
});

Sencha Touch 2 pie chart has no labels

I am attempting to follow this example for creating a pie chart but my chart does not display labels for the sections. I copied and used the exact code from the example linked above.
The chart display complete with color sections but there are no labels like in the example.
My code is pasted below:
Ext.define('RevivalTimes.view.Chart', {
extend: 'Ext.chart.PolarChart',
xtype: 'chart',
requires: [
'Ext.chart.series.Pie',
'Ext.chart.interactions.Rotate'
],
config: {
title: 'Statistics',
iconCls: 'settings',
layout: 'fit',
animate: true,
interactions: ['rotate'],
colors: ['#115fa6', '#94ae0a', '#a61120', '#ff8809', '#ffd13e'],
store: {
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
data: [
{name: 'metric one', data1: 10, data2: 12, data3: 14, data4: 8, data5: 13},
{name: 'metric two', data1: 7, data2: 8, data3: 16, data4: 10, data5: 3},
{name: 'metric three', data1: 5, data2: 2, data3: 14, data4: 12, data5: 7},
{name: 'metric four', data1: 2, data2: 14, data3: 6, data4: 1, data5: 23},
{name: 'metric five', data1: 27, data2: 38, data3: 36, data4: 13, data5: 33}
]
},
series: [{
type: 'pie',
label: {
field: 'name',
display: 'rotate'
},
xField: 'data3',
donut: 30
}]
} //config
});

The labels show with the inclusion of labelField as shown in the code below:
series: [{
type: 'pie',
label: {
field: 'name',
display: 'rotate'
},
xField: 'data1',
donut: 30,
labelField: 'name',
showInLegend: true,
}],

Sencha touch nested list with number field and button for list items?

I have this following code and i want to display images and other html elements as items of the nested list.
Can this be achieved?
My code is
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icons/logo4_1.png',
glossOnIcon: false,
title: 'Item List',
fullscree: true,
onReady: function() {
var data = {
title: 'Item List',
text: 'Groceries',
items: [{
text: 'Beverages',
imgURL: '\images\beverage\colas.jpg',
items: [{
text: 'Water',
imgURL: '\images\beverage\colas.jpg',
items: [{
text: 'Sparkling',
imgURL: '\images\beverage\colas.jpg',
leaf: true
}, {
text: 'Still',
imgURL: '\images\beverage\colas.jpg',
leaf: true
}]
}, {
text: 'Coffee',
imgURL: '\images\beverage\colas.jpg',
leaf: true
}, {
text: 'Espresso',
imgURL: '\images\beverage\colas.jpg',
leaf: true
}, {
text: 'Redbull',
imgURL: '\images\beverage\colas.jpg',
leaf: true
}, {
text: 'Coke',
imgURL: '\images\beverage\colas.jpg',
leaf: true
}, {
text: 'Diet Coke',
imgURL: '\images\beverage\colas.jpg',
leaf: true
}]
}, {
text: 'Fruits',
imgURL: '\images\beverage\colas.jpg',
items: [{
text: 'Bananas',
imgURL: '\images\beverage\colas.jpg',
leaf: true
}, {
text: 'Watermelon',
imgURL: '\images\beverage\colas.jpg',
leaf: true
}, {
text: 'Grapes',
imgURL: '\images\beverage\colas.jpg',
items: [{
text: 'Black Grapes',
leaf: true
}, {
text: 'Green Grapes',
leaf: true
}]
}, {
text: 'Pear',
imgURL: '\images\beverage\colas.jpg',
leaf: true
}, {
text: 'Apple',
imgURL: '\images\beverage\colas.jpg',
leaf: true
}]
}, {
text: 'Bread and Bakery',
imgURL: '\images\beverage\colas.jpg',
items: [{
text: 'Bread',
imgURL: '\images\beverage\colas.jpg',
items: [{
text: 'White Bread',
imgURL: '\images\beverage\colas.jpg',
leaf: true,
}, {
text: 'Brown Bread',
imgURL: '\images\beverage\colas.jpg',
leaf: true,
}, {
text: 'Sandwich Bread',
imgURL: '\images\beverage\colas.jpg',
leaf: true,
}]
}, {
text: 'Pretzels',
imgURL: '\images\beverage\colas.jpg',
leaf: true
}, {
text: 'Cup Cakes',
imgURL: '\images\beverage\colas.jpg',
leaf: true
}]
}, {
text: 'Personal Care',
imgURL: '\images\beverage\colas.jpg',
items: [{
text: 'Shampoo',
imgURL: '\images\beverage\colas.jpg',
items: [{
text: 'Dove',
imgURL: '\images\beverage\colas.jpg',
leaf: true,
}, {
text: 'Sunsilk',
imgURL: '\images\beverage\colas.jpg',
leaf: true,
}, {
text: 'Garnier',
imgURL: '\images\beverage\colas.jpg',
leaf: true,
}]
}, {
text: 'Soaps',
imgURL: '\images\beverage\colas.jpg',
items: [{
text: 'Dove',
imgURL: '\images\beverage\colas.jpg',
leaf: true,
}, {
text: 'Pears',
imgURL: '\images\beverage\colas.jpg',
leaf: true,
}, {
text: 'Lux',
imgURL: '\images\beverage\colas.jpg',
leaf: true,
}]
}, {
text: 'Hair Oil',
imgURL: '\images\beverage\colas.jpg',
items: [{
text: 'Vatika',
imgURL: '\images\beverage\colas.jpg',
leaf: true,
}, {
text: 'Almond Oil',
imgURL: '\images\beverage\colas.jpg',
leaf: true,
}, {
text: 'Parachute Coconut oil',
imgURL: '\images\beverage\colas.jpg',
leaf: true,
}]
}, {
text: 'Body Lotions',
imgURL: '\images\beverage\colas.jpg',
items: [{
text: 'Dove',
imgURL: '\images\beverage\colas.jpg',
leaf: true,
}, {
text: 'Ponds',
imgURL: '\images\beverage\colas.jpg',
leaf: true,
}, {
text: 'Nivea',
imgURL: '\images\beverage\colas.jpg',
leaf: true,
}]
}]
}]
};
Ext.regModel('ListItem', {
fields: ['text', 'imgURL'],
//fields: [{name: 'text', type: 'string'},{name: 'imageURL', type: 'string'}],
});
var store = new Ext.data.TreeStore({
model: 'ListItem',
root: data,
proxy: {
type: 'ajax',
reader: {
type: 'tree',
root: 'items'
}
}
});
var leftNav = new Ext.NestedList({
fullscreen: true,
dock: 'left',
useTitleAsBackText: true,
title: 'Item List',
icon: 'icons/logo4_1.png',
itemTpl: '<img src="{imgURL}" width="100" heigh="100"></img><span>{text}</span> <span><button>Add to Cart</button>',
width: '350',
image: 'image',
dockedItems: [{
html: '<img src="icons/logo4_1.png" width="100" height="40"/>',
dock: 'top',
}],
store: store,
});
new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
dockedItems: [leftNav]
});
if (Ext.is.Phone) {
fullscreen: true;
}
}
});
Though am using the imgURl field its not working.
Plz help.. Answers appreciated..!

You need to set the template of your nested list items. You can do it by adding a getItemTextTpl attribute to you nested list config
getItemTextTpl: function(node){
return '{imgURL} - {text}';
}
You can take a look at how I used getItemTextTpl in this question

The accepted answer does not work for me -- what worked was setting the itemTpl inside the listConfig config item in the NestedList:
Ext.define('project.view.FooList', {
extend: 'Ext.dataview.NestedList',
config: {
fullscreen: true,
title: 'Foo, bro',
listConfig: {
itemTpl: new Ext.XTemplate('{text}, bro')
},
store: 'FooStore'
}
});