Documentation: how to add a new graph / contribute

[extua]

Following on from #52

• [ ] Describe the file structure
• [ ] Link to MongoDB query documentation
• [ ] Create a PR to contribute back to this repo

[charanbhatia]

@extua can i work on this ?

[extua]

Thank you, yes of course.

@extua can i work on this ?

[extua]

Very briefly, this needs to be expanded, but:

Connect to the database

Try this connection

mongosh mongodb+srv://databaseReader:freifunkfreifunk@freifunktest.zsfzlav.mongodb.net/
> use communities
> db.hourly_snapshot.aggregate([<QUERY HERE>])

Or, for an easier time, try MongoDB Compass. The connection string above is not permanent and will change when this is moved to production. Or, run MongoDB locally.

Here is the documentation on creating an aggregation.

Add your query to graphql_server/mongodb_queries

In the following format:

const query = [ <QUERY HERE> ];
module.exports = query;

See latest_nodes_per_community.js for an example.

Add it to /graphql_server/mongodb_queries with a name which describes what the query does.

Add resolver to graphql_server/server.js

Under resolvers, add an item for the query, see for example:

grouped_nodes_timeseries: async (args, context) => {
    const db = await context();
    const pipeline = require('./mongodb_queries/grouped_nodes_timeseries.js');
    return db.collection('hourly_snapshot').aggregate(pipeline).toArray();
  }

Add it to the GraphQL schema

See the schema file here graphql_server/schema.js

If your query involves creating a new schema object, add it to this file. Documentation here.

Add the query to webpage

In visualisations/index.html

Add the query in the format:

const query_nodes_timeseries = JSON.stringify({ query: "{ grouped_nodes_timeseries { date avgNodes } }" });

And add a graph element like this:

<h2>Graph 2</h2>
<figure>
    <svg id="graph2_container" width="640" height="480"></svg>
    <figcaption>Nodes over time</figcaption>
</figure>

Create the graph in visualisations/graphs

See for example graph1.js, using the d3.js library.

Add a graph caller to the page

Along the following lines:

import { createGraph2 } from './graphs/graph2.js';
createGraph2(query_nodes_timeseries).then(
    (graph2) => {
        graph2_container.replaceWith(graph2.node());
        console.log("graph2 appended to DOM");
    }
);

Ok, so, when I write it all out it doesn't look like such a simple process. I'm open to suggestions on how to improve this!

[charanbhatia]

@extua so basically, I need to rewrite and expand this documentation by doing the following: Describe the file structure. Link to the MongoDB query documentation. Create a PR to contribute back to this repo.

Am I right?