React Native VictoryPie from nested data - react-native
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
Related
Filtering array and display only filtered items
I am working on my website which will have my CV.
So I have an array of objects with hard and soft skills
skills: [
{ id: "1", type: "hard", title: "Technical skills" },
{ id: "2", type: "hard", title: "Computer skills" },
{ id: "3", type: "hard", title: "Microsoft Office skills" },
{ id: "4", type: "hard", title: "Analytical skills" },
{ id: "5", type: "hard", title: "Marketing skills" },
{ id: "6", type: "hard", title: "Presentation skills" },
{ id: "7", type: "hard", title: "Management skills" },
{ id: "8", type: "hard", title: "Project management skills" },
{ id: "9", type: "hard", title: "Writing skills" },
{ id: "10", type: "hard", title: "Language skills" },
{ id: "11", type: "hard", title: "Design skills" },
{ id: "12", type: "soft", title: "Leadership Skills" },
{ id: "13", type: "soft", title: "Teamwork" },
{ id: "14", type: "soft", title: "Communication Skills" },
{ id: "15", type: "soft", title: "Problem-Solving Skills" },
{ id: "16", type: "soft", title: "Work Ethic" },
{ id: "17", type: "soft", title: "Flexibility/Adaptability" },
{ id: "18", type: "soft", title: "Interpersonal Skills" },
],
And so I have two li's. So I need to display only hard skills in the first li and only soft skills in the second li.
Yes I know it'd be much easier if I just make 2 arrays and cycle through them for each one of li's, but I want to kinda challenge myself and filter the array. Obviously filter by the "type". So the return has to be an array, so I can cycle through it to display the data.
You can for example use two computed:
computed: {
hardSkills() {
return this.skills.filter(skill => skill.type === 'hard');
},
softSkills() {
return this.skills.filter(skill => skill.type === 'soft');
}
}
You could create the 2 arrays with a simple filter like this const hardSkills = skills.filter(skill => skill.type === 'hard') const softSkills = skills.filter(skill => skill.type === 'soft') Then, go to your template and loop on those in your template.
how to remove duplicates in js "reactnative picker"
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.
GraphQL schema with nested objects
How to write schema for this kind of response.
{
"adult": false,
"backdrop_path": "/dnaitaoCh8MftfYEVnprcuYExZp.jpg",
"belongs_to_collection": {
"id": 256322,
"name": "The Purge Collection",
"poster_path": "/nP3c8mTSxlis4vfg0UjlkK8LRG9.jpg",
"backdrop_path": "/quFWGOA4I5KCTsyDbvLh6PHNZwv.jpg"
},
"budget": 13000000,
"genres": [
{
"id": 28,
"name": "Action"
},
{
"id": 27,
"name": "Horror"
},
{
"id": 878,
"name": "Science Fiction"
},
{
"id": 53,
"name": "Thriller"
}
]
}
const typeDefs = `
type BelongsToCollectionType {
id: ID!
name: String
poster_path: String
backdrop_path: String
}
type GenreType {
id: ID!
name: String
}
type SomeType {
adult: Boolean
backdrop_path: String
belongs_to_collection: BelongsToCollectionType
budget: Int
genres: [GenreType]!
}
`;
Soon after I asked this question I figured it out. Here is the schema:
const MovieType = new GraphQLObjectType({
name: 'Movie',
fields: () => ({
id: { type: GraphQLString },
adult: { type: GraphQLBoolean },
backdrop_path: { type: GraphQLString },
belongs_to_collection: { type: BelongsToCollection },
budget: { type: GraphQLInt },
overview: { type: GraphQLString },
popularity: { type: GraphQLInt },
poster_path: { type: GraphQLString },
production_companies: {
type: new GraphQLList(CompaniesType)
},
genres: {
type: new GraphQLList(GenreType)
},
release_date: { type: GraphQLString },
tagline: { type: GraphQLString },
title: { type: GraphQLString },
vote_average: { type: GraphQLInt },
vote_count: { type: GraphQLInt }
})
});
const CompaniesType = new GraphQLObjectType({
name: 'ProductionCompanies',
fields: {
id: { type: GraphQLInt },
name: { type: GraphQLString },
logo_path: { type: GraphQLString },
original_country: { type: GraphQLString }
}
});
const GenreType = new GraphQLObjectType({
name: 'Genre',
fields: () => ({
id: { type: GraphQLInt },
name: { type: GraphQLString }
})
})
const BelongsToCollection = new GraphQLObjectType({
name: 'BelongsToCollection',
fields: () => ({
id: { type: GraphQLInt },
name: { type: GraphQLString },
poster_path: { type: GraphQLString },
backdrop_path: { type: GraphQLString }
})
});
Creating google chart from database in ASP.NET MVC [duplicate]
This question already has an answer here:
Displaying Data on Google Chart Using SQL Database in MVC Application
(1 answer)
Closed 4 years ago.
I have an ASP.NET MVC 5 application that uses a SQL database to store data. I want to extract two datetime columns from this database, and I want to use these values instead of the hard coded date values in the view below to display the chart for the values stored in the database table.
View
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<script type="text/javascript">
google.charts.load('current', { 'packages': ['timeline'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable({
cols: [
{ id: 'Session', label: 'Session', type: 'int' },
{ id: 'start', label: 'Season Start Date', type: 'date' },
{ id: 'end', label: 'Season End Date', type: 'date' }
],
rows: [
{ c: [{ v: 'Baltimore Ravens' }, { v: 'Date(2000, 8, 5)' }, { v: 'Date(2001, 1, 5)' }] },
{ c: [{ v: 'New England Patriots' }, { v: 'Date(2001, 8, 5)' }, { v: 'Date(2002, 1, 5)' }] },
{ c: [{ v: 'Tampa Bay Buccaneers' }, { v: 'Date(2002, 8, 5)' }, { v: 'Date(2003, 1, 5)' }] },
{ c: [{ v: 'New England Patriots' }, { v: 'Date(2003, 8, 5)' }, { v: 'Date(2004, 1, 5)' }] },
{ c: [{ v: 'New England Patriots' }, { v: 'Date(2004, 8, 5)' }, { v: 'Date(2005, 1, 5)' }] },
{ c: [{ v: 'Pittsburgh Steelers' }, { v: 'Date(2005, 8, 5)' }, { v: 'Date(2006, 1, 5)' }] },
{ c: [{ v: 'Indianapolis Colts' }, { v: 'Date(2006, 8, 5)' }, { v: 'Date(2007, 1, 5)' }] },
{ c: [{ v: 'New York Giants' }, { v: 'Date(2007, 8, 5)' }, { v: 'Date(2008, 1, 5)' }] },
{ c: [{ v: 'Pittsburgh Steelers' }, { v: 'Date(2008, 8, 5)' }, { v: 'Date(2009, 1, 5)' }] },
{ c: [{ v: 'New Orleans Saints' }, { v: 'Date(2009, 8, 5)' }, { v: 'Date(2010, 1, 5)' }] },
{ c: [{ v: 'Green Bay Packers' }, { v: 'Date(2010, 8, 5)' }, { v: 'Date(2011, 1, 5)' }] },
{ c: [{ v: 'New York Giants' }, { v: 'Date(2011, 8, 5)' }, { v: 'Date(2012, 1, 5)' }] },
{ c: [{ v: 'Baltimore Ravens' }, { v: 'Date(2012, 8, 5)' }, { v: 'Date(2013, 1, 5)' }] },
{ c: [{ v: 'Seattle Seahawks' }, { v: 'Date(2013, 8, 5)' }, { v: 'Date(2014, 1, 5)' }] }
]
});
var options = {
height: 450,
timeline: {
groupByRowLabel: true
}
};
var chart = new google.visualization.Timeline(document.getElementById('chart_div'));
chart.draw(data, options);
}
using Select2 with Durandal
Hi I am trying to use Select2 (multiselect) with Durandal (http://jsfiddle.net/anasnakawa/6XvqX/381/),
but the popup does not work below is part of my VM and HTML, here I am trying to bind a list of states to an input it should work as an auto complete but there seems to a issue showing the selection popup, can someone please help
define(['durandal/app', 'services/datacontext', 'plugins/router', 'services/bindinghandlers'],
function (app, datacontext, router) {
var withs = ko.observableArray(),
states = [
{ id: "AL", text: "Alabama" },
{ id: "AK", text: "Alaska" },
{ id: "AZ", text: "Arizona" },
{ id: "AR", text: "Arkansas" },
{ id: "CA", text: "California" },
{ id: "CO", text: "Colorado" },
{ id: "CT", text: "Connecticut" },
{ id: "DE", text: "Delaware" },
{ id: "FL", text: "Florida" },
{ id: "GA", text: "Georgia" },
{ id: "HI", text: "Hawaii" },
{ id: "ID", text: "Idaho" },
{ id: "IL", text: "Illinois" },
{ id: "IN", text: "Indiana" },
{ id: "IA", text: "Iowa" },
{ id: "KS", text: "Kansas" },
{ id: "KY", text: "Kentucky" },
{ id: "LA", text: "Louisiana" },
{ id: "ME", text: "Maine" },
{ id: "MD", text: "Maryland" },
{ id: "MA", text: "Massachusetts" },
{ id: "MI", text: "Michigan" },
{ id: "MN", text: "Minnesota" },
{ id: "MS", text: "Mississippi" },
{ id: "MO", text: "Missouri" },
{ id: "MT", text: "Montana" },
{ id: "NE", text: "Nebraska" },
{ id: "NV", text: "Nevada" },
{ id: "NH", text: "New Hampshire" },
{ id: "NJ", text: "New Jersey" },
{ id: "NM", text: "New Mexico" },
{ id: "NY", text: "New York" },
{ id: "NC", text: "North Carolina" },
{ id: "ND", text: "North Dakota" },
{ id: "OH", text: "Ohio" },
{ id: "OK", text: "Oklahoma" },
{ id: "OR", text: "Oregon" },
{ id: "PA", text: "Pennsylvania" },
{ id: "RI", text: "Rhode Island" },
{ id: "SC", text: "South Carolina" },
{ id: "SD", text: "South Dakota" },
{ id: "TN", text: "Tennessee" },
{ id: "TX", text: "Texas" },
{ id: "UT", text: "Utah" },
{ id: "VT", text: "Vermont" },
{ id: "VA", text: "Virginia" },
{ id: "WA", text: "Washington" },
{ id: "WV", text: "West Virginia" },
{ id: "WI", text: "Wisconsin" },
{ id: "WY", text: "Wyoming" }
];
var vm = {
withs: withs,
states: states,
};
return vm;
});
<select multiple="true" data-bind="options: states, optionsValue: 'id', optionsText: 'text', selectedOptions: withs, select2: {}" style="width: 300px"></select>
Register select2 in the Require.js configuration inside main.js:
requirejs.config({
paths: {
'select2': 'path/to/select2'
}
});
Define it in your view model:
define(['select2'], function (select2) {
// ...
});
Don't forget to declare it. You'll have to use the attached callback:
var vm = {
withs: withs,
states: states,
attached: function() {
$('select').select2();
}
};