Make the graphs/panels more generic

[ezio-melotti]

The content of each panel depends on three things:

• the type of panel
• the type of graph
• the data being used

We already have separation between panels and graphs, and we merged some panels by adding a dropdown that lets you select the data being plotted, however we can generalize this further.

Currently we do something like this:

• In e.g. the ProductionConsumption.vue panel, we include the VersusGraph and we pass the currency being plotted: https://github.com/overthesun/simoc-web/blob/ee0153b0408b48f5aaca4dfccf1e1cb6be825d96/src/components/panels/ProductionConsumption.vue#L12
• In VersusGraph.vue we just pick the selected currency from the hardcoded totalProduction/totalConsumption: https://github.com/overthesun/simoc-web/blob/ee0153b0408b48f5aaca4dfccf1e1cb6be825d96/src/components/graphs/VersusGraph.vue#L142-L143

This means that the VersusGraph (which is just a line plot with two lines) can only be used to plot values from totalProduction/totalConsumption.

---

Instead of doing this, we should have generic panels and graphs that accept a path (as a string) that can be used by the graph to retrieve the data. For example, the above example could be rewritten to:

<LineGraph :datasets="datasets" />

where datasets could be defined as:

datasets = [`state.dashboard.totalConsumption.${currency}`,
            `state.dashboard.totalProduction.${currency}`]

with currency being the value selected from the dropdown.

The graph can then use the paths specified in datasets and plot a line for each dataset.

To retrieve the actual values from the path, we can use lodash.get or object-path.

[ezio-melotti]

See #334.