-
Notifications
You must be signed in to change notification settings - Fork 0
/
examples.json
515 lines (515 loc) · 50.4 KB
/
examples.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
[
{
"id": 0,
"title": "Example 0: Get Authorization Token",
"description": "Step-by-step instructions on how to get go-api access token",
"guide": "## Generating a Token\n### What You’ll Need\n- **An API tool**: For this walkthrough, we will be using Postman, a popular service with a free account option. There are many others, and the basic steps outlined here should work with them as well.\n- **GO Login Credentials**: In order to generate a token, you need to have a GO account with Red Cross Red Crescent permissions. \n\n#### What are Authentication Tokens?\nInformation in GO is segregated by audience. Some pieces of information are fine for the general public to access, while other pieces are limited to only members of the Red Cross Red Crescent Movement. When you create a user profile on GO as a member of a national society, your account is given access to that more private level of information, and when we access that data via the API, the system needs a way to verify that we are permitted to see it. That’s where tokens come in. \n\nA token is passed to the server along with whatever your search request is, as a way to tell it that we’re allowed to see what we’re requesting. Think of it like a secret handshake to get into the members-only club. \n\n#### How Do I Get An Authentication Token?\nFrom the API Basics article, you’ll remember that the four key elements of interacting with an API are: \n* The endpoint\n* The method\n* The headers\n* The data (or body)\n\n##### Endpoint\nThe endpoint here is:\n\n`https://prddsgocdnapi.azureedge.net/get_auth_token`\n\nThe base URL is telling the request to ping the GO server. The `/get_auth_token` is accessing the token generator. \n\n##### Method\nWe need to generate one with a special API call. There are a number of methods for interacting with APIs, depending on what you’re trying to do with the data in the server. Most of the time, we’re just reading data, and that means using the `GET` method. But in some scenarios, including this step of generating a token, we need to use `POST`. That’s because we’re sending a request to the server to actually create a new resource (in this case, our token). \n\n##### Headers\nThis isn’t a query in the same sense as other interactions with the GO server, so we don’t have any parameters to include. However, there is one header that is a good idea to add here: \n\nKey (Header Name): `Content-Type`\nValue (Header Value): `application/json`\n\nUnderstanding the reason for this specification isn’t vital to your understanding of this process, but if you’re interested, the short explanation is that this header tells the server what media type it is dealing with, and then that the data should be formatted as JSON. Other media types include: \n\n* audio\n* font\n* example\n* image\n* message\n* model\n* multipart\n* text\n* video\n\n##### Data\nHere is where the actual request to the server is being stored. As we’re dealing with JSON formatting, our data here needs to be formatted as such. We’re going to include the following in the body: \n\n```javascript\n{\n\"username\": \"myusername\", \n\"password\": \"mypassword\"\n}\n```\n\nYou would update the text above with your own GO username (case-sensitive) and password, while _keeping the quotes around all of the elements_. So as an example, my own snippet would look like this: \n\n```javascript\n{\n\"username\": \"Jonathan\", \n\"password\": \"This_is_my_secret_password\"\n}\n```\n\n#### Putting It All Together\n1. Log into Postman. At the top left of the window, click `New`\n2. In the window that pops up, click on `Request`\n\n\n\n3. In the main window that appears, click `GET` and from the dropdown, select `POST`\n4. In the field labeled `Enter request URL` type `https://prddsgocdnapi.azureedge.net/get_auth_token`\n5. Click `Headers` below the URL bar, and enter: \n1. Key: `Content-Type`\n2. Value: `application/json`\n3. Make sure the checkbox to the left of `Content-Type` is checked\n\n\n\n6. Click `Body`, then select `raw` from the menu below. The last element should say `JSON` - if not, select it. Then enter `{\"username\": \"your-username\", \"password\": \"your-password\"}`, changing where you see \"your-username\" and \"your-password\" to match the credentials you use to log into GO. Remember to keep quotes around all of those elements!\n\n\n\n7. Click `Send` at the top right. If everything was entered correctly, you should get a response from the server with the following:\n\n```javascript\n{\n\"token\": \"redacted, but you would see a long string of characters here!\",\n\"username\": \"Jonathan\",\n\"first\": \"Jonathan\",\n\"last\": \"Garro\",\n\"expires\": \"2021-02-23T19:33:04.456Z\",\n\"id\": 1316\n}\n```\n",
"code": {
"JavaScript": "const postBody = {\n\tusername: 'Jonathan',\n\tpassword: 'This_is_my_secret_password',\n};\n\nfetch('https://goadmin.ifrc.org/get_auth_token', {\n\tmethod: 'POST',\n\tbody: JSON.stringify(postBody),\n\theaders: {\n\t\t'Content-Type': 'application/json',\n\t},\n})\n\t.then((response) => response.json())\n\t.then((data) => {\n\t\tconsole.log(`GO_API_AUTHORIZATION_TOKEN=${data.token}`);\n\t});\n"
}
},
{
"id": 1,
"title": "Example 1: Projects per Sector",
"description": "Number of projects per sector in Nepal",
"code": {
"Power BI": "### Get Your Data Into PowerBI\r\n\r\n1. Open PowerBI and select \u201CGet Data\u201D from the top ribbon, then select \u201CWeb\u201D.\r\n2. Type your URL into the window that appears and click OK.\r\n3. This will open a new window called Power Query Editor where you can organize\r\n the data that is returned in preparation for visualization.\r\n4. First give your query a name. When you start bringing in lots of different\r\n queries, it can be hard to remember what each one is doing. So on the left\r\n pane with the query selected, look at the right side of the window and rename\r\n it to something like \u201CNepal Projects\u201D.\r\n5. The data comes into PowerBI in JSON format, which makes transferring the data\r\n easy, but can be difficult to easily interpret. Our Nepal Projects query\r\n returned 15 lines (note that if you\u2019re following along this number might\r\n change based on activity within GO), but we can\u2019t see much about those\r\n projects. Click on the \u201CList\u201D link next to results. Now each result from GO\r\n is listed as a distinct record.\r\n6. Having a list with \u201CRecord\u201D doesn\u2019t tell us much. Converting it to a table\r\n will make it easier to read, so click the \u201CConvert to Table\u201D in the\r\n \u201CTransform\u201D section of the ribbon at the top of the window. In the window\r\n that pops up, select \u201CNone\u201D and \u201CShow as errors\u201D for the two options.\r\n7. Right now, our table has an index column (numbering the rows) and \u201CColumn1\u201D,\r\n which is just a placeholder for the data for that particular result. Use the\r\n button at the top right of the table and you\u2019ll see all the columns that\r\n we\u2019ve pulled from GO. These should all be selected by default. Click OK. Now\r\n we\u2019re able to see what data this query is actually providing us! We\u2019re ready\r\n to start building our visuals, so click Close and Apply at the top of your\r\n Power Query Editor window.\r\n\r\n### Set Up Your Visualization\r\n\r\nThe three icons to the far left of your screen include, in descending order:\r\n\r\n- Report: A preview and editor pane for your dashboard. This is where we\u2019ll\r\n build the actual visualization.\r\n- Data: A way to more easily view the data that you have connected. In this\r\n example, you\u2019ll see the Nepal Projects data we pulled into PowerBI in the\r\n previous section of this walkthrough. As you get more comfortable with\r\n PowerBI, you might bring in additional data sources.\r\n- Model: This allows you to view your various data sources and create\r\n relationships between fields. In this simple example, we won\u2019t be using this\r\n tab, but in cases where you have multiple data sources, this is an important\r\n tab.\r\n\r\n1. Start by selecting the Report tab. Along the right side of your window, you\r\n should see three sections: Filters, Visualizations, and Fields. (These may be\r\n collapsed. If so, use the arrow to expand them). For this example, we\u2019re\r\n going to be working with bar charts to visualize the relative proportion of\r\n projects by sector, so select either the vertical or horizontal bar chart.\r\n We\u2019re only working with a single column of data, so a stacked bar chart will\r\n work for our purposes.\r\n2. After clicking on the chart type, a blank placeholder should appear in the\r\n preview pane. To populate the chart with your data, we need to drag the\r\n relevant fields from the far right pane into the fields below the\r\n visualizations. In this simple example, we only need to worry about the\r\n column that has the sector data. GO has several fields that contain the word\r\n \u201Csector\u201D, so we might want to refresh our memory and make sure we\u2019re using\r\n the right column from the data source. Pop over into the Data tab and scroll\r\n to the right to find the right one. It looks like \u201Cprimary_sector_display\u201D is\r\n the right one. Go back to the Report tab.\r\n3. From the fields pane on the far right, find \u201Cprimary_sector_display\u201D, and\r\n drag it over into the Axis field. Then repeat for the Legend and Values\r\n fields. For the Values field, PowerBI is smart enough to understand what\r\n we\u2019re doing, so it counts the frequency each unique value appears in that\r\n list and generates that bar chart!\r\n",
"JavaScript": "import React, { useEffect, useState } from \"react\";\nimport { Bar } from \"react-chartjs-2\";\n\ninterface Project {\n\tid: number;\n\tname: string;\n\tprimary_sector_display: string;\n}\n\ninterface Dataset {\n\tlabel: string;\n\tdata: number[];\n\tbackgroundColor: string[];\n\tborderColor: string[];\n\tborderWidth: number;\n}\n\ninterface Data {\n\tlabels: string[];\n\tdatasets: Dataset[];\n}\n\nexport const Chart: React.FC = () => {\n\tconst [projects, setProjects] = useState([]);\n\tconst [data, setData] = useState({});\n\n\tconst backgroundColors = [\n\t\t\"rgba(255, 99, 132, 0.2)\",\n\t\t\"rgba(54, 162, 235, 0.2)\",\n\t\t\"rgba(255, 206, 86, 0.2)\",\n\t\t\"rgba(75, 192, 192, 0.2)\",\n\t\t\"rgba(153, 102, 255, 0.2)\",\n\t\t\"rgba(255, 159, 64, 0.2)\",\n\t];\n\n\tconst borderColors = [\n\t\t\"rgba(255, 99, 132, 1)\",\n\t\t\"rgba(54, 162, 235, 1)\",\n\t\t\"rgba(255, 206, 86, 1)\",\n\t\t\"rgba(75, 192, 192, 1)\",\n\t\t\"rgba(153, 102, 255, 1)\",\n\t\t\"rgba(255, 159, 64, 1)\",\n\t];\n\n\tconst options = {\n\t\tscales: {\n\t\t\tyAxes: [\n\t\t\t\t{\n\t\t\t\t\tticks: {\n\t\t\t\t\t\tbeginAtZero: true,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t};\n\n\tconst fetchProjects = () => {\n\t\tfetch(\"https://goadmin.ifrc.org/api/v2/project/?country=NPL\")\n\t\t\t.then(response => response.json())\n\t\t\t.then(data => {\n\t\t\t\tsetProjects(data.results);\n\t\t\t\tsetData(getChartDataFromProjects(projects));\n\t\t\t});\n\t};\n\n\tuseEffect(fetchProjects, [projects.length]);\n\n\tconst getChartDataFromProjects = (projects: Project[]) => {\n\t\tconst data: Data = {\n\t\t\tlabels: [],\n\t\t\tdatasets: [\n\t\t\t\t{\n\t\t\t\t\tlabel: \"# of Projects\",\n\t\t\t\t\tdata: [],\n\t\t\t\t\tbackgroundColor: [],\n\t\t\t\t\tborderColor: [],\n\t\t\t\t\tborderWidth: 1,\n\t\t\t\t},\n\t\t\t],\n\t\t};\n\n\t\tprojects.forEach(project => {\n\t\t\tconst dataIndex = data.labels.indexOf(\n\t\t\t\tproject.primary_sector_display\n\t\t\t);\n\n\t\t\tif (dataIndex >= 0) {\n\t\t\t\tdata.datasets[0].data[dataIndex] += 1;\n\t\t\t} else {\n\t\t\t\tdata.labels.push(project.primary_sector_display);\n\t\t\t\tdata.datasets[0].data.push(1);\n\t\t\t\tdata.datasets[0].backgroundColor = backgroundColors.slice(\n\t\t\t\t\t0,\n\t\t\t\t\tdata.datasets[0].data.length\n\t\t\t\t);\n\t\t\t\tdata.datasets[0].borderColor = borderColors.slice(\n\t\t\t\t\t0,\n\t\t\t\t\tdata.datasets[0].data.length\n\t\t\t\t);\n\t\t\t}\n\t\t});\n\n\t\treturn data;\n\t};\n\n\treturn (\n\t\t<div className=\"chart-container\">\n\t\t\t<Bar data={data} options={options} />\n\t\t</div>\n\t);\n};\n\n",
"Python": "import matplotlib.pyplot as plt\nimport requests\nfrom collections import Counter\nimport numpy as np\n\n\n\ndef fetchProjects():\n\treturn requests.get(\"https://goadmin.ifrc.org/api/v2/project/?country=NPL\").json()['results']\n\n\n\ndef getDataFromProjects(projects):\n\tcounter = Counter()\n\tfor project in projects:\n\t\tcounter[project['primary_sector_display']] += 1\n\treturn counter\n\n\n\ndef generateChart(data):\n\tlabels, values = zip(*data.items())\n\n\n\tindexes = np.arange(len(labels))\n\n\n\tfig, ax = plt.subplots()\n\n\n\tplt.bar(indexes, values)\n\tplt.xticks(indexes * 1.0, labels)\n\n\n\tplt.show()\n\n\n\nif __name__ == \"__main__\":\n\tprojects = fetchProjects()\n\tdata = getDataFromProjects(projects)\n\tgenerateChart(data)\n\n"
},
"chart": {
"Power BI": "/how-to-use-the-go-api/assets/images/example1_powerbi_chart.png",
"JavaScript": {
"label": "# of Projects",
"key": "primary_sector_display",
"options": {
"scales": {
"yAxes": [
{
"ticks": {
"beginAtZero": true
}
}
]
}
}
},
"Python": {
"data": {
"data01": [
[-0.4, 0.0, 1.6],
[0.4, 0.0, 2.4],
[0.4, 2.0, 2.4],
[-0.4, 2.0, 1.6]
],
"data03": [
[2.6, 0.0],
[3.4, 0.0],
[3.4, 1.0],
[2.6, 1.0]
],
"data02": [
[0.6, 0.0],
[1.4, 0.0],
[1.4, 10.0],
[0.6, 10.0]
]
},
"axes": [
{
"images": [],
"sharey": [],
"texts": [],
"zoomable": true,
"markers": [],
"collections": [],
"bbox": [0.125, 0.11, 0.775, 0.77],
"xlim": [-0.59, 3.59],
"paths": [
{
"pathcodes": ["M", "L", "L", "L", "Z"],
"xindex": 0,
"yindex": 1,
"facecolor": "rgba(255, 99, 132, 0.2)",
"data": "data01",
"alpha": 1,
"edgewidth": 1.0,
"id": "el45167140343872475880",
"edgecolor": "rgba(255, 99, 132, 1)",
"dasharray": "none",
"coordinates": "data",
"zorder": 1
},
{
"pathcodes": ["M", "L", "L", "L", "Z"],
"xindex": 0,
"yindex": 1,
"facecolor": "rgba(54, 162, 235, 0.2)",
"data": "data02",
"alpha": 1,
"edgewidth": 1.0,
"id": "el45167140343872475320",
"edgecolor": "rgba(54, 162, 235, 1)",
"dasharray": "none",
"coordinates": "data",
"zorder": 1
},
{
"pathcodes": ["M", "L", "L", "L", "Z"],
"xindex": 2,
"yindex": 1,
"facecolor": "rgba(255, 206, 86, 0.2)",
"data": "data01",
"alpha": 1,
"edgewidth": 1.0,
"id": "el45167140343872476720",
"edgecolor": "rgba(255, 206, 86, 1)",
"dasharray": "none",
"coordinates": "data",
"zorder": 1
},
{
"pathcodes": ["M", "L", "L", "L", "Z"],
"xindex": 0,
"yindex": 1,
"facecolor": "rgba(75, 192, 192, 0.2)",
"data": "data03",
"alpha": 1,
"edgewidth": 1.0,
"id": "el45167140343872477560",
"edgecolor": "rgba(75, 192, 192, 1)",
"dasharray": "none",
"coordinates": "data",
"zorder": 1
}
],
"xdomain": [-0.59, 3.59],
"axesbgalpha": null,
"axes": [
{
"fontsize": 10.0,
"grid": {
"gridOn": false
},
"tickvalues": [0.0, 1.0, 2.0, 3.0],
"tickformat": [
"CEA",
"Health",
"WASH",
"NS Strengthening"
],
"fontcolor": "#ff0000",
"axiscolor": "#ff0000",
"visible": true,
"nticks": 4,
"position": "bottom",
"tickformat_formatter": "fixed",
"scale": "linear"
},
{
"fontsize": 10.0,
"grid": {
"gridOn": false
},
"tickvalues": null,
"tickformat": null,
"fontcolor": "#ffff00",
"axiscolor": "#ffff00",
"visible": true,
"nticks": 7,
"position": "left",
"tickformat_formatter": "",
"scale": "linear"
}
],
"yscale": "linear",
"lines": [],
"axesbg": "transparent",
"sharex": [],
"ydomain": [0.0, 10.5],
"xscale": "linear",
"id": "el45167140343846732296",
"ylim": [0.0, 10.5]
}
]
}
},
"api": {
"url": "https://goadmin.ifrc.org/api/v2/project/?country=NPL"
},
"guide": "### Building Your Query\r\n\r\nThe API can be accessed by building a URL query. We start with the base URL to\r\naccess the database, then set parameters to select just the data that we need.\r\nIn this example, we need to access _Projects_ and then set the _Country_\r\nparameter to Nepal. Note that to select countries, you\u2019ll need to use the\r\nassociated ISO code (specifically,\r\n[the Alpha-3 code](https://www.iso.org/obp/ui/#search/code/)).\r\n\r\nSo our URL for this particular search would look like this:\r\n\r\n[https://goadmin.ifrc.org/api/v2/project/?country=NPL](https://goadmin.ifrc.org/api/v2/project/?country=NPL)\r\n\r\n\r\n\r\n"
},
{
"id": 2,
"title": "Example 2: Projects per Status",
"description": "Number of projects per status in Nepal",
"code": {
"JavaScript": "import React, { useEffect, useState } from \"react\";\nimport { Bar } from \"react-chartjs-2\";\n\ninterface Project {\n\tid: number;\n\tname: string;\n\tstatus_display: string;\n}\n\ninterface Dataset {\n\tlabel: string;\n\tdata: number[];\n\tbackgroundColor: string[];\n\tborderColor: string[];\n\tborderWidth: number;\n}\n\ninterface Data {\n\tlabels: string[];\n\tdatasets: Dataset[];\n}\n\nexport const Chart: React.FC = () => {\n\tconst [projects, setProjects] = useState([]);\n\tconst [data, setData] = useState({});\n\n\tconst backgroundColors = [\n\t\t\"rgba(255, 99, 132, 0.2)\",\n\t\t\"rgba(54, 162, 235, 0.2)\",\n\t\t\"rgba(255, 206, 86, 0.2)\",\n\t\t\"rgba(75, 192, 192, 0.2)\",\n\t\t\"rgba(153, 102, 255, 0.2)\",\n\t\t\"rgba(255, 159, 64, 0.2)\",\n\t];\n\n\tconst borderColors = [\n\t\t\"rgba(255, 99, 132, 1)\",\n\t\t\"rgba(54, 162, 235, 1)\",\n\t\t\"rgba(255, 206, 86, 1)\",\n\t\t\"rgba(75, 192, 192, 1)\",\n\t\t\"rgba(153, 102, 255, 1)\",\n\t\t\"rgba(255, 159, 64, 1)\",\n\t];\n\n\tconst options = {\n\t\tscales: {\n\t\t\tyAxes: [\n\t\t\t\t{\n\t\t\t\t\tticks: {\n\t\t\t\t\t\tbeginAtZero: true,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t};\n\n\tconst fetchProjects = () => {\n\t\tfetch(\"https://goadmin.ifrc.org/api/v2/project/?country=NPL\")\n\t\t\t.then(response => response.json())\n\t\t\t.then(data => {\n\t\t\t\tsetProjects(data.results);\n\t\t\t\tsetData(getChartDataFromProjects(projects));\n\t\t\t});\n\t};\n\n\tuseEffect(fetchProjects, [projects.length]);\n\n\tconst getChartDataFromProjects = (projects: Project[]) => {\n\t\tconst data: Data = {\n\t\t\tlabels: [],\n\t\t\tdatasets: [\n\t\t\t\t{\n\t\t\t\t\tlabel: \"# of Projects\",\n\t\t\t\t\tdata: [],\n\t\t\t\t\tbackgroundColor: [],\n\t\t\t\t\tborderColor: [],\n\t\t\t\t\tborderWidth: 1,\n\t\t\t\t},\n\t\t\t],\n\t\t};\n\n\t\tprojects.forEach(project => {\n\t\t\tconst dataIndex = data.labels.indexOf(\n\t\t\t\tproject.status_display\n\t\t\t);\n\n\t\t\tif (dataIndex >= 0) {\n\t\t\t\tdata.datasets[0].data[dataIndex] += 1;\n\t\t\t} else {\n\t\t\t\tdata.labels.push(project.status_display);\n\t\t\t\tdata.datasets[0].data.push(1);\n\t\t\t\tdata.datasets[0].backgroundColor = backgroundColors.slice(\n\t\t\t\t\t0,\n\t\t\t\t\tdata.datasets[0].data.length\n\t\t\t\t);\n\t\t\t\tdata.datasets[0].borderColor = borderColors.slice(\n\t\t\t\t\t0,\n\t\t\t\t\tdata.datasets[0].data.length\n\t\t\t\t);\n\t\t\t}\n\t\t});\n\n\t\treturn data;\n\t};\n\n\treturn (\n\t\t<div className=\"chart-container\">\n\t\t\t<Bar data={data} options={options} />\n\t\t</div>\n\t);\n};\n\n",
"Python": "import matplotlib.pyplot as plt\nimport requests\nfrom collections import Counter\nimport numpy as np\n\n\n\ndef fetchProjects():\n\treturn requests.get(\"https://goadmin.ifrc.org/api/v2/project/?country=NPL\").json()['results']\n\n\n\ndef getDataFromProjects(projects):\n\tcounter = Counter()\n\tfor project in projects:\n\t\tcounter[project['status_display']] += 1\n\treturn counter\n\n\n\ndef generateChart(data):\n\tlabels, values = zip(*data.items())\n\n\n\tindexes = np.arange(len(labels))\n\n\n\tfig, ax = plt.subplots()\n\n\n\tplt.bar(indexes, values)\n\tplt.xticks(indexes * 1.0, labels)\n\n\n\tplt.show()\n\n\n\nif __name__ == \"__main__\":\n\tprojects = fetchProjects()\n\tdata = getDataFromProjects(projects)\n\tgenerateChart(data)\n\n"
},
"chart": {
"JavaScript": {
"label": "# of Projects",
"key": "status_display",
"options": {
"scales": {
"yAxes": [
{
"ticks": {
"beginAtZero": true
}
}
]
}
}
},
"Python": {
"data": {
"data01": [
[-0.4, 0.0],
[0.4, 0.0],
[0.4, 1.0],
[-0.4, 1.0]
],
"data02": [
[0.6, 0.0],
[1.4, 0.0],
[1.4, 14.0],
[0.6, 14.0]
]
},
"axes": [
{
"axesbgalpha": null,
"ylim": [0.0, 14.7],
"yscale": "linear",
"collections": [],
"ydomain": [0.0, 14.7],
"zoomable": true,
"xscale": "linear",
"sharex": [],
"axes": [
{
"tickformat": ["Planned", "Ongoing"],
"fontsize": 10.0,
"grid": { "gridOn": false },
"tickformat_formatter": "fixed",
"tickvalues": [0.0, 1.0],
"scale": "linear",
"nticks": 2,
"visible": true,
"position": "bottom"
},
{
"tickformat": null,
"fontsize": 10.0,
"grid": { "gridOn": false },
"tickformat_formatter": "",
"tickvalues": null,
"scale": "linear",
"nticks": 9,
"visible": true,
"position": "left"
}
],
"markers": [],
"id": "el14901140505881076400",
"xdomain": [-0.49, 1.49],
"paths": [
{
"edgecolor": "rgba(255, 99, 132, 1)",
"id": "el14901140505904732592",
"pathcodes": ["M", "L", "L", "L", "Z"],
"alpha": 1,
"coordinates": "data",
"zorder": 1,
"data": "data01",
"yindex": 1,
"edgewidth": 1.0,
"xindex": 0,
"facecolor": "rgba(255, 99, 132, 0.2)",
"dasharray": "none"
},
{
"edgecolor": "rgba(54, 162, 235, 1)",
"id": "el14901140505904732032",
"pathcodes": ["M", "L", "L", "L", "Z"],
"alpha": 1,
"coordinates": "data",
"zorder": 1,
"data": "data02",
"yindex": 1,
"edgewidth": 1.0,
"xindex": 0,
"facecolor": "rgba(54, 162, 235, 0.2)",
"dasharray": "none"
}
],
"bbox": [0.125, 0.11, 0.775, 0.77],
"images": [],
"texts": [],
"axesbg": "transparent",
"lines": [],
"xlim": [-0.49, 1.49],
"sharey": []
}
]
}
},
"api": {
"url": "https://goadmin.ifrc.org/api/v2/project/?country=NPL"
}
},
{
"id": 3,
"title": "Example 3: Surge Alerts grouped by Deployment Needed",
"description": "Number of surge alerts for which deployment is needed",
"code": {
"JavaScript": "import React, { useEffect, useState } from 'react';\nimport { Bar } from 'react-chartjs-2';\n\ninterface SurgeAlert {\n\tid: number;\n\tdeployment_needed: string;\n}\n\ninterface Dataset {\n\tlabel: string;\n\tdata: number[];\n\tbackgroundColor: string[];\n\tborderColor: string[];\n\tborderWidth: number;\n}\n\ninterface Data {\n\tlabels: string[];\n\tdatasets: Dataset[];\n}\n\nexport const Chart: React.FC = () => {\n\tconst [surgeAlerts, setSurgeAlerts] = useState([]);\n\tconst [data, setData] = useState({});\n\n\tconst backgroundColors = [\n\t\t'rgba(255, 99, 132, 0.2)',\n\t\t'rgba(54, 162, 235, 0.2)',\n\t\t'rgba(255, 206, 86, 0.2)',\n\t\t'rgba(75, 192, 192, 0.2)',\n\t\t'rgba(153, 102, 255, 0.2)',\n\t\t'rgba(255, 159, 64, 0.2)',\n\t];\n\n\tconst borderColors = [\n\t\t'rgba(255, 99, 132, 1)',\n\t\t'rgba(54, 162, 235, 1)',\n\t\t'rgba(255, 206, 86, 1)',\n\t\t'rgba(75, 192, 192, 1)',\n\t\t'rgba(153, 102, 255, 1)',\n\t\t'rgba(255, 159, 64, 1)',\n\t];\n\n\tconst options = {\n\t\tscales: {\n\t\t\tyAxes: [\n\t\t\t\t{\n\t\t\t\t\tticks: {\n\t\t\t\t\t\tbeginAtZero: true,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t};\n\n\tconst fetchSurgeAlerts = () => {\n\t\tfetch('https://goadmin.ifrc.org/api/v2/surge_alert/?limit=1000', {\n\t\t\theaders: {\n\t\t\t\tAuthorization: 'Token GO_API_AUTHORIZATION_TOKEN',\n\t\t\t},\n\t\t})\n\t\t\t.then((response) => response.json())\n\t\t\t.then((data) => {\n\t\t\t\tsetSurgeAlerts(data.results);\n\t\t\t\tsetData(getChartDataFromSurgeAlerts(surgeAlerts));\n\t\t\t});\n\t};\n\n\tuseEffect(fetchSurgeAlerts, [surgeAlerts.length]);\n\n\tconst getChartDataFromSurgeAlerts = (surgeAlerts: SurgeAlert[]) => {\n\t\tconst data: Data = {\n\t\t\tlabels: [],\n\t\t\tdatasets: [\n\t\t\t\t{\n\t\t\t\t\tlabel: '# of Surge Alerts',\n\t\t\t\t\tdata: [],\n\t\t\t\t\tbackgroundColor: [],\n\t\t\t\t\tborderColor: [],\n\t\t\t\t\tborderWidth: 1,\n\t\t\t\t},\n\t\t\t],\n\t\t};\n\n\t\tsurgeAlerts.forEach((surgeAlert) => {\n\t\t\tconst dataIndex = data.labels.indexOf(surgeAlert.deployment_needed);\n\n\t\t\tif (dataIndex >= 0) {\n\t\t\t\tdata.datasets[0].data[dataIndex] += 1;\n\t\t\t} else {\n\t\t\t\tdata.labels.push(surgeAlert.deployment_needed);\n\t\t\t\tdata.datasets[0].data.push(1);\n\t\t\t\tdata.datasets[0].backgroundColor = backgroundColors.slice(\n\t\t\t\t\t0,\n\t\t\t\t\tdata.datasets[0].data.length\n\t\t\t\t);\n\t\t\t\tdata.datasets[0].borderColor = borderColors.slice(\n\t\t\t\t\t0,\n\t\t\t\t\tdata.datasets[0].data.length\n\t\t\t\t);\n\t\t\t}\n\t\t});\n\n\t\treturn data;\n\t};\n\n\treturn (\n\t\t<div className='chart-container'>\n\t\t\t<Bar data={data} options={options} />\n\t\t</div>\n\t);\n};\n"
},
"chart": {
"JavaScript": {
"label": "# of Surge Requests vs Deployment Needed",
"key": "deployment_needed",
"options": {
"scales": {
"yAxes": [
{
"ticks": {
"beginAtZero": true
}
}
]
}
}
}
},
"api": {
"url": "https://goadmin.ifrc.org/api/v2/surge_alert/?limit=1000"
}
},
{
"id": 4,
"title": "Example 4: Get Appeal Documents by Appeal Code",
"description": "Search for appeal documents by an appeal code",
"code": {
"JavaScript": "const getAppealDocumentsByAppealCode = (appealCode: string) => {\n\tfetch(`https://goadmin.ifrc.org/api/v2/appeal/?limit=1&code=${appealCode}`)\n\t\t.then((response) => response.json())\n\t\t.then((response) => {\n\t\t\tconst appealId = response.results[0].aid;\n\t\t\tfetch(\n\t\t\t\t`https://goadmin.ifrc.org/api/v2/appeal_document/?limit=10&appeal=${appealId}`\n\t\t\t)\n\t\t\t\t.then((response) => response.json())\n\t\t\t\t.then((response) => {\n\t\t\t\t\tconsole.log(JSON.stringify(response.results));\n\t\t\t\t});\n\t\t});\n};\n\ngetAppealDocumentsByAppealCode('MDRCM002');\n\n/*\n[\n\t{\n\t\t\"created_at\": \"2021-02-20T00:00:00Z\",\n\t\t\"document\": null,\n\t\t\"document_url\": \"https://www.ifrc.org/docs/appeals/Active/MDRGN012.pdf\",\n\t\t\"appeal\": 3388,\n\t\t\"id\": 2699,\n\t\t\"name\": \"Donor Response\"\n\t},\n\t{\n\t\t\"created_at\": \"2021-02-18T00:00:00Z\",\n\t\t\"document\": null,\n\t\t\"document_url\": \"https://www.ifrc.org/docs/Appeals/21/IB%20Guinea_Ebola%20Virus%20Disease.pdf\",\n\t\t\"appeal\": 3388,\n\t\t\"id\": 2697,\n\t\t\"name\": \"IB Guinea_Ebola Virus Disease\"\n\t},\n\t{\n\t\t\"created_at\": \"2021-02-17T00:00:00Z\",\n\t\t\"document\": null,\n\t\t\"document_url\": \"https://adore.ifrc.org/Download.aspx?FileId=386727\",\n\t\t\"appeal\": 3388,\n\t\t\"id\": 2696,\n\t\t\"name\": \"DREF Operation\"\n\t}\n]\n*/\n"
}
},
{
"id": 5,
"title": "Example 5: Events in Countries",
"description": "Number of events in India, Indonesia, Suriname, Nepal and Bangladesh",
"code": {
"JavaScript": "import React, { useCallback, useEffect, useState } from 'react';\nimport { Bar } from 'react-chartjs-2';\n\ninterface Dataset {\n\tlabel: string;\n\tdata: number[];\n\tbackgroundColor: string[];\n\tborderColor: string[];\n\tborderWidth: number;\n}\n\ninterface Data {\n\tlabels: string[];\n\tdatasets: Dataset[];\n}\n\ninterface GoAPIResponse {\n\tcount: number;\n\tnext: string;\n\tprevious: string;\n\tresults: GoAPIResponseResult[];\n}\n\ninterface ReliefWebAPIResponse {\n\tcount: number;\n\tnext: string;\n\tprevious: string;\n\tresults: GoAPIResponseResult[];\n\tdata: ReliefWebAPIResponseData[];\n\tembedded: ReliefWebAPIResponseEmbedded;\n\thref: string;\n\ttime: number;\n\ttook: number;\n\ttotalCount: number;\n}\n\ninterface GoAPIResponseResult {\n\t[key: string]: string;\n}\n\ninterface ReliefWebAPIResponseData {\n\t[key: string]: string;\n}\n\ninterface ReliefWebAPIResponseEmbedded {\n\tfacets: ReliefWebAPIResponseFacets;\n}\n\ninterface ReliefWebAPIResponseFacets {\n\t[key: string]: ReliefWebAPIResponseFacet;\n}\n\ninterface ReliefWebAPIResponseFacet {\n\tdata: ReliefWebAPIResponseFacetData[];\n\tmissing: number;\n\tmore: boolean;\n\ttype: string;\n}\n\ninterface ReliefWebAPIResponseFacetData {\n\tvalue: string;\n\tcount: number;\n}\n\nfunction ObjectByString(o: any, s: string) {\n\ts = s.replace(/[(w+)]/g, '.$1'); // convert indexes to properties\n\ts = s.replace(/^./, ''); // strip a leading dot\n\tconst a = s.split('.');\n\tfor (var i = 0, n = a.length; i < n; ++i) {\n\t\tconst k = a[i];\n\t\tif (k in o) {\n\t\t\to = o[k];\n\t\t} else {\n\t\t\treturn;\n\t\t}\n\t}\n\treturn o;\n}\n\nexport const Chart: React.FC = () => {\n\tconst [data, setData] = useState({} as Data);\n\n\tconst goAPIUrl =\n\t\t'https://goadmin.ifrc.org/api/v2/event/?countries__in=123%2C84%2C85%2C180&format=json&limit=1000';\n\tconst goAPILabel = '# of Events in Go';\n\tconst goAPIKey = 'countries.0.iso3';\n\n\tconst reliefWebFacet = 'primary_country.iso3';\n\tconst reliefWebLabel = '# of Events in ReliefWeb';\n\tconst reliefWebFacetValues = ['IND', 'NPL', 'SUR', 'IDN', 'BGD'];\n\tconst reliefWebUrl =\n\t\t'https://api.reliefweb.int/v1/disasters?appname=how-to-use-the-go-api&appname=how-to-use-the-go-api';\n\n\tconst backgroundColors = [\n\t\t'rgba(255, 99, 132, 0.2)',\n\t\t'rgba(54, 162, 235, 0.2)',\n\t\t'rgba(255, 206, 86, 0.2)',\n\t\t'rgba(75, 192, 192, 0.2)',\n\t\t'rgba(153, 102, 255, 0.2)',\n\t\t'rgba(255, 159, 64, 0.2)',\n\t];\n\n\tconst borderColors = [\n\t\t'rgba(255, 99, 132, 1)',\n\t\t'rgba(54, 162, 235, 1)',\n\t\t'rgba(255, 206, 86, 1)',\n\t\t'rgba(75, 192, 192, 1)',\n\t\t'rgba(153, 102, 255, 1)',\n\t\t'rgba(255, 159, 64, 1)',\n\t];\n\n\tconst options = {\n\t\tscales: {\n\t\t\tyAxes: [\n\t\t\t\t{\n\t\t\t\t\tticks: {\n\t\t\t\t\t\tbeginAtZero: true,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t};\n\n\tconst reliefWeb = useCallback(() => {\n\t\tconst callReliefWebAPIBody = {\n\t\t\tlimit: 1000,\n\t\t\tpreset: 'latest',\n\t\t\tfacets: [\n\t\t\t\t{\n\t\t\t\t\tfield: reliefWebFacet,\n\t\t\t\t},\n\t\t\t],\n\t\t\tfilter: {\n\t\t\t\tconditions: [\n\t\t\t\t\t{\n\t\t\t\t\t\tfield: reliefWebFacet,\n\t\t\t\t\t\tvalue: reliefWebFacetValues,\n\t\t\t\t\t\toperator: 'OR',\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t},\n\t\t};\n\n\t\treturn fetch(reliefWebUrl, {\n\t\t\tbody: JSON.stringify(callReliefWebAPIBody),\n\t\t\tmethod: 'POST',\n\t\t})\n\t\t\t.then((response) => response.json())\n\t\t\t.then((reliefWebResponse: ReliefWebAPIResponse): void => {\n\t\t\t\tconst parsedReliefWebAPIResponse = reliefWebResponse.embedded.facets[\n\t\t\t\t\treliefWebFacet\n\t\t\t\t].data.map(\n\t\t\t\t\t(\n\t\t\t\t\t\treliefWebAPIResponseFacetData: ReliefWebAPIResponseFacetData\n\t\t\t\t\t) => reliefWebAPIResponseFacetData.count\n\t\t\t\t);\n\n\t\t\t\tif (data.datasets[0] && data.datasets.length < 2) {\n\t\t\t\t\tconst reliefWebDataset: Dataset = {\n\t\t\t\t\t\tlabel: reliefWebLabel,\n\t\t\t\t\t\tdata: parsedReliefWebAPIResponse,\n\t\t\t\t\t\tbackgroundColor: Array(data.labels.length).fill(\n\t\t\t\t\t\t\tbackgroundColors[1]\n\t\t\t\t\t\t),\n\t\t\t\t\t\tborderColor: Array(data.labels.length).fill(\n\t\t\t\t\t\t\tborderColors[1]\n\t\t\t\t\t\t),\n\t\t\t\t\t\tborderWidth: 1,\n\t\t\t\t\t};\n\t\t\t\t\tconst newDatasets = data.datasets.concat(reliefWebDataset);\n\t\t\t\t\tconst newData = { ...data };\n\t\t\t\t\tnewData.datasets = newDatasets;\n\t\t\t\t\tnewData.datasets[0].backgroundColor = Array(\n\t\t\t\t\t\tdata.labels.length\n\t\t\t\t\t).fill(backgroundColors[0]);\n\t\t\t\t\tnewData.datasets[0].borderColor = Array(\n\t\t\t\t\t\tdata.labels.length\n\t\t\t\t\t).fill(borderColors[0]);\n\t\t\t\t\tsetData(newData);\n\t\t\t\t}\n\t\t\t});\n\t}, [\n\t\treliefWebFacet,\n\t\treliefWebFacetValues,\n\t\treliefWebUrl,\n\t\tdata,\n\t\tbackgroundColors,\n\t\tborderColors,\n\t]);\n\n\tuseEffect(() => {\n\t\treliefWeb();\n\t}, [reliefWeb]);\n\n\tconst callGoAPI = () => {\n\t\tfetch(goAPIUrl)\n\t\t\t.then((response) => response.json())\n\t\t\t.then((goAPIResponse: GoAPIResponse): void => {\n\t\t\t\tconst parsedGoAPIResponse = getDataFromResponseResults(\n\t\t\t\t\tgoAPIResponse.results,\n\t\t\t\t\tgoAPILabel,\n\t\t\t\t\tgoAPIKey\n\t\t\t\t);\n\t\t\t\tsetData(parsedGoAPIResponse);\n\t\t\t});\n\t};\n\n\tuseEffect(callGoAPI, [data]);\n\n\tconst getDataFromResponseResults = (\n\t\tresponseResults: GoAPIResponseResult[],\n\t\tresponseResultLabel: string,\n\t\tresponseResultKey: string\n\t) => {\n\t\tconst data: Data = {\n\t\t\tlabels: [],\n\t\t\tdatasets: [\n\t\t\t\t{\n\t\t\t\t\tlabel: responseResultLabel,\n\t\t\t\t\tdata: [],\n\t\t\t\t\tbackgroundColor: [],\n\t\t\t\t\tborderColor: [],\n\t\t\t\t\tborderWidth: 1,\n\t\t\t\t},\n\t\t\t],\n\t\t};\n\n\t\tresponseResults.forEach((responseResult) => {\n\t\t\tconst responseResultValue = ObjectByString(\n\t\t\t\tresponseResult,\n\t\t\t\tresponseResultKey\n\t\t\t);\n\n\t\t\tconst dataIndex = data.labels.indexOf(responseResultValue);\n\n\t\t\tif (dataIndex >= 0) {\n\t\t\t\tdata.datasets[0].data[dataIndex] += 1;\n\t\t\t} else {\n\t\t\t\tdata.labels.push(responseResultValue);\n\t\t\t\tdata.datasets[0].data.push(1);\n\t\t\t\tdata.datasets[0].backgroundColor = backgroundColors.slice(\n\t\t\t\t\t0,\n\t\t\t\t\tdata.datasets[0].data.length\n\t\t\t\t);\n\t\t\t\tdata.datasets[0].borderColor = borderColors.slice(\n\t\t\t\t\t0,\n\t\t\t\t\tdata.datasets[0].data.length\n\t\t\t\t);\n\t\t\t}\n\t\t});\n\n\t\treturn data;\n\t};\n\n\treturn <Bar data={data} options={options} />;\n};\n"
},
"chart": {
"JavaScript": {
"label": "# of Events in Go",
"key": "countries.0.iso3",
"options": {
"scales": {
"yAxes": [
{
"ticks": {
"beginAtZero": true
}
}
]
}
}
}
},
"api": {
"url": "https://goadmin.ifrc.org/api/v2/event/?countries__in=123%2C84%2C85%2C180&format=json&limit=1000",
"reliefWeb": {
"url": "https://api.reliefweb.int/v1/disasters?appname=how-to-use-the-go-api&appname=how-to-use-the-go-api",
"key": "primary_country.iso3",
"label": "# of Events in ReliefWeb",
"body": {
"limit": 1000,
"preset": "latest",
"facets": [
{
"field": "primary_country.iso3"
}
],
"filter": {
"conditions": [
{
"field": "primary_country.iso3",
"value": ["IND", "NPL", "SUR", "IDN", "BGD"],
"operator": "OR"
}
]
}
}
}
}
},
{
"id": 6,
"title": "Example 6: Get API response in a supported language",
"description": "Number of projects per status in Nepal, same as example 2, but the API response is in Spanish",
"code": {
"JavaScript": "import React, { useEffect, useState } from \"react\";\nimport { Bar } from \"react-chartjs-2\";\n\ninterface Project {\n\tid: number;\n\tname: string;\n\tstatus_display: string;\n}\n\ninterface Dataset {\n\tlabel: string;\n\tdata: number[];\n\tbackgroundColor: string[];\n\tborderColor: string[];\n\tborderWidth: number;\n}\n\ninterface Data {\n\tlabels: string[];\n\tdatasets: Dataset[];\n}\n\nexport const Chart: React.FC = () => {\n\tconst [projects, setProjects] = useState([]);\n\tconst [data, setData] = useState({});\n\n\tconst backgroundColors = [\n\t\t\"rgba(255, 99, 132, 0.2)\",\n\t\t\"rgba(54, 162, 235, 0.2)\",\n\t\t\"rgba(255, 206, 86, 0.2)\",\n\t\t\"rgba(75, 192, 192, 0.2)\",\n\t\t\"rgba(153, 102, 255, 0.2)\",\n\t\t\"rgba(255, 159, 64, 0.2)\",\n\t];\n\n\tconst borderColors = [\n\t\t\"rgba(255, 99, 132, 1)\",\n\t\t\"rgba(54, 162, 235, 1)\",\n\t\t\"rgba(255, 206, 86, 1)\",\n\t\t\"rgba(75, 192, 192, 1)\",\n\t\t\"rgba(153, 102, 255, 1)\",\n\t\t\"rgba(255, 159, 64, 1)\",\n\t];\n\n\tconst options = {\n\t\tscales: {\n\t\t\tyAxes: [\n\t\t\t\t{\n\t\t\t\t\tticks: {\n\t\t\t\t\t\tbeginAtZero: true,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t};\n\n\tconst fetchProjects = () => {\n\t\tfetch(\"https://goadmin.ifrc.org/api/v2/project/?country=NPL\", {\n\t\t\t\theaders: {\n\t\t\t\t\t\"Accept-Language\": \"es\"\n\t\t\t\t},\n\t\t\t})\n\t\t\t.then(response => response.json())\n\t\t\t.then(data => {\n\t\t\t\tsetProjects(data.results);\n\t\t\t\tsetData(getChartDataFromProjects(projects));\n\t\t\t});\n\t};\n\n\tuseEffect(fetchProjects, [projects.length]);\n\n\tconst getChartDataFromProjects = (projects: Project[]) => {\n\t\tconst data: Data = {\n\t\t\tlabels: [],\n\t\t\tdatasets: [\n\t\t\t\t{\n\t\t\t\t\tlabel: \"# of Proyectos\",\n\t\t\t\t\tdata: [],\n\t\t\t\t\tbackgroundColor: [],\n\t\t\t\t\tborderColor: [],\n\t\t\t\t\tborderWidth: 1,\n\t\t\t\t},\n\t\t\t],\n\t\t};\n\n\t\tprojects.forEach(project => {\n\t\t\tconst dataIndex = data.labels.indexOf(\n\t\t\t\tproject.status_display\n\t\t\t);\n\n\t\t\tif (dataIndex >= 0) {\n\t\t\t\tdata.datasets[0].data[dataIndex] += 1;\n\t\t\t} else {\n\t\t\t\tdata.labels.push(project.status_display);\n\t\t\t\tdata.datasets[0].data.push(1);\n\t\t\t\tdata.datasets[0].backgroundColor = backgroundColors.slice(\n\t\t\t\t\t0,\n\t\t\t\t\tdata.datasets[0].data.length\n\t\t\t\t);\n\t\t\t\tdata.datasets[0].borderColor = borderColors.slice(\n\t\t\t\t\t0,\n\t\t\t\t\tdata.datasets[0].data.length\n\t\t\t\t);\n\t\t\t}\n\t\t});\n\n\t\treturn data;\n\t};\n\n\treturn (\n\t\t<div className=\"chart-container\">\n\t\t\t<Bar data={data} options={options} />\n\t\t</div>\n\t);\n};\n\n",
"Python": "import matplotlib.pyplot as plt\nimport requests\nfrom collections import Counter\nimport numpy as np\n\n\n\ndef fetchProjects():\n\treturn requests.get(\"https://goadmin.ifrc.org/api/v2/project/?country=NPL\", headers={ \"Accept-Language\": \"es\" }).json()['results']\n\n\n\ndef getDataFromProjects(projects):\n\tcounter = Counter()\n\tfor project in projects:\n\t\tcounter[project['status_display']] += 1\n\treturn counter\n\n\n\ndef generateChart(data):\n\tlabels, values = zip(*data.items())\n\n\n\tindexes = np.arange(len(labels))\n\n\n\tfig, ax = plt.subplots()\n\n\n\tplt.bar(indexes, values)\n\tplt.xticks(indexes * 1.0, labels)\n\n\n\tplt.show()\n\n\n\nif __name__ == \"__main__\":\n\tprojects = fetchProjects()\n\tdata = getDataFromProjects(projects)\n\tgenerateChart(data)\n\n"
},
"chart": {
"JavaScript": {
"label": "# of Proyectos",
"key": "status_display",
"options": {
"scales": {
"yAxes": [
{
"ticks": {
"beginAtZero": true
}
}
]
}
}
},
"Python": {
"data": {
"data01": [
[-0.4, 0.0],
[0.4, 0.0],
[0.4, 1.0],
[-0.4, 1.0]
],
"data02": [
[0.6, 0.0],
[1.4, 0.0],
[1.4, 14.0],
[0.6, 14.0]
]
},
"axes": [
{
"axesbgalpha": null,
"ylim": [0.0, 14.7],
"yscale": "linear",
"collections": [],
"ydomain": [0.0, 14.7],
"zoomable": true,
"xscale": "linear",
"sharex": [],
"axes": [
{
"tickformat": ["Completado", "En marcha"],
"fontsize": 10.0,
"grid": { "gridOn": false },
"tickformat_formatter": "fixed",
"tickvalues": [0.0, 1.0],
"scale": "linear",
"nticks": 2,
"visible": true,
"position": "bottom"
},
{
"tickformat": null,
"fontsize": 10.0,
"grid": { "gridOn": false },
"tickformat_formatter": "",
"tickvalues": null,
"scale": "linear",
"nticks": 9,
"visible": true,
"position": "left"
}
],
"markers": [],
"id": "el14901140505881076400",
"xdomain": [-0.49, 1.49],
"paths": [
{
"edgecolor": "rgba(255, 99, 132, 1)",
"id": "el14901140505904732592",
"pathcodes": ["M", "L", "L", "L", "Z"],
"alpha": 1,
"coordinates": "data",
"zorder": 1,
"data": "data01",
"yindex": 1,
"edgewidth": 1.0,
"xindex": 0,
"facecolor": "rgba(255, 99, 132, 0.2)",
"dasharray": "none"
},
{
"edgecolor": "rgba(54, 162, 235, 1)",
"id": "el14901140505904732032",
"pathcodes": ["M", "L", "L", "L", "Z"],
"alpha": 1,
"coordinates": "data",
"zorder": 1,
"data": "data02",
"yindex": 1,
"edgewidth": 1.0,
"xindex": 0,
"facecolor": "rgba(54, 162, 235, 0.2)",
"dasharray": "none"
}
],
"bbox": [0.125, 0.11, 0.775, 0.77],
"images": [],
"texts": [],
"axesbg": "transparent",
"lines": [],
"xlim": [-0.49, 1.49],
"sharey": []
}
]
}
},
"api": {
"url": "https://goadmin.ifrc.org/api/v2/project/?country=NPL",
"headers": {
"Accept-Language": "es"
}
},
"guide": "This is accomplished by setting an `Accept-Language` request header in the request.\n\nThe value should be the two letter language code you want responses in,\n* `en` for English\n* `fr` for French\n* `es` for Spanish\n* `ar` for Arabic"
}
]