Merge pull request #54 from developmentseed/develop

Version 0.4

content/study/posts/kenya.yml

@@ -8,6 +8,44 @@ study:
   period: 2017-2018
   scope: National Least-cost geospatial plan identifying least-cost supply solutions and investment requirements to achieve universal electricity access by 2022 and maintain through 2027.
   summary: The geospatial electrification planning platform populated with the latest available census data, satellite imagery, consumption estimates as well as capital and operating cost data was used to evaluate expansion options.  The data used for this report was collected/provided in 2016 and projected over succeeding years to evaluate connection expansion by  technology including expansion of medium voltage service (grid expansion); connection of consumers in close proximity to existing KPLC service (grid densification/intensification); expansion of mini-grid service; and off-grid stand-alone solar home system service. For the target year 2022, the geospatial planning projects indicate that the following connection thresholds can be met.
+charts:
+  - name: Modelled Electricity demand (GWh/year)
+    type: donut
+    data:
+      - name: Residential
+        value: 90
+      - name: Social (HF, EF, public)
+        value: 60
+      - name: Commercial
+        value: 60
+      - name: Productive
+        value: 60
+      - name: Other
+        value: 30
+  - name: Total additional capacity (MW)
+    type: donut
+    data:
+      - name: Grid
+        value: 1500
+      - name: Mini-grid
+        value: 150
+      - name: Stand-alone
+        value: 600
+  - name: Total lengh of T&D
+    type: number
+    datum: 
+      value: 60
+      unit: km
+  - name: Mini-grids
+    type: number
+    datum: 
+      value: 65
+      unit:
+  - name: Stand-alone systems
+    type: number
+    datum: 
+      value: 3000
+      unit:
 platform:
   title: Kenya Energy Planning
   url: https://kenya-energy-planning-geowb.hub.arcgis.com/

docs/README.md

@@ -1,17 +1,3 @@
-# Managing studies
-
-* [Anatomy of a study](#anatomy-of-a-study)
-  * [Study configuration](#study-configuration)
-  * [Map configuration](#map-configuration)
-  * [Validating configuration](#validating-configuration)
-* [Howto](#hotwo)
-  * [Add a new study](#add-a-new-study)
-  * [Add a layer](#add-a-layer)
-* [AEP Map Style](#aep-map-style)
-  * [Default styles](#default-styles)
-  * [Custom markers](#custom-markers)
-* [Troubleshooting](#troubleshooting)
-
 # Anatomy of a study
 The study configuration consists of two files:
 
@@ -174,6 +160,51 @@ New icons can be added to [`/content/icons`](/content/icons). They should be in
 
 [To top](#managing-studies)
 
+# Charts
+The charts on the Summary page are configured and managed through the `yml` file with study configuration. They are included on the right side of the summary page and ordered using the order in the study configuration file.
+
+## Donut
+The donut has a chart title (`name`) and a data array that consists of entries with a `name` and `value`.
+
+![](media/donut.png)
+
+Configuration:
+
+```yml
+charts:
+  - name: Modelled Electricity demand (GWh/year)
+    type: donut
+    data:
+      - name: Residential
+        value: 90
+      - name: Social (HF, EF, public)
+        value: 60
+      - name: Commercial
+        value: 60
+      - name: Productive
+        value: 60
+      - name: Other
+        value: 30
+```
+
+## Big number
+The big number consists of a title (`name`), a `value` and an optional `unit`.
+
+![](media/big-number.png)
+_Big number with and without the `unit`_
+
+Configuration:
+
+```yml
+charts:
+  - name: Total lengh of T&D
+    type: number
+    datum:
+      value: 60
+      unit: km
+```
+
+[To top](#managing-studies)
 
 # Legends
 Broadly speaking, AEP supports two types of legends: symbology for features on the map like circles and lines and gradient legends for raster data like the Global Wind Atlas.
@@ -197,7 +228,7 @@ legendData:
 ``` yml
 legendData:
   type: symbol
-  color: 'electricity'
+  icon: 'electricity'
 ```
 
 ## Defining raster legends
@@ -223,6 +254,11 @@ legendData:
 
 [To top](#managing-studies)
 
+# Popups
+The popups in the application show all the attributes that are available in the source data. To adjust the label or the value, you can update the original GeoJSON or Vector Tiles.
+
+![](media/popup.png)
+
 # Troubleshooting
 ## Map shows an unexpected layer
 If the map loads with a layer that can't be managed through the layer switcher, it's likely that you added a layer in the Mapbox Style that isn't referenced in the layer configuration of the `yml`. This is by design. It allows you to overlay a contextual layer on the map that the user don't have control over. A use case could be a layer that adds a disputed border.

gatsby-node.js

@@ -32,6 +32,13 @@ exports.createSchemaCustomization = ({ actions, schema }) => {
         legendData: LayerLegend
       }
 
+      type ChartDefinition {
+        name: String
+        type: String
+        data: JSON
+        datum: JSON
+      }
+
       type Platform {
         title: String
         url: String
@@ -54,6 +61,7 @@ exports.createSchemaCustomization = ({ actions, schema }) => {
         platform: 'Platform',
         study: 'StudyInfo',
         layers: '[PanelLayer]',
+        charts: '[ChartDefinition]',
         mapConfig: {
           type: 'JSON',
           resolve: async (source, args, context) => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "aep-frontend",
-  "version": "1.0.0",
+  "version": "0.4.0",
   "description": "Africa Electrification Platform",
   "repository": {
     "type": "git",
@@ -61,6 +61,9 @@
     "@devseed-ui/theme-provider": "^3.0.0",
     "@devseed-ui/toolbar": "^2.0.1",
     "@devseed-ui/typography": "^1.0.0",
+    "@nivo/core": "^0.67.0",
+    "@nivo/pie": "^0.67.0",
+    "babel-plugin-styled-components": "^1.12.0",
     "clipboard": "^2.0.8",
     "deepmerge": "^4.2.2",
     "element-resize-event": "^3.0.3",

schema/validate.js

@@ -34,6 +34,22 @@ const studySchema = new Schema({
     title: { type: String },
     url: { type: String }
   },
+  charts: [
+    {
+      name: { type: String },
+      type: { type: String, enum: ['donut', 'number'] },
+      datum: {
+        value: { type: Number },
+        unit: { type: String }
+      },
+      data: [
+        {
+          name: { type: String },
+          value: { type: Number, required: true }
+        }
+      ]
+    }
+  ],
   layers: [
     {
       id: { type: String, required: true },
@@ -111,7 +127,7 @@ function printResult(fn, fileErrors) {
     console.log('\nValidating YML\n===');
     ymlFiles.forEach((fn) => {
       const fileContent = yml.load(fs.readFileSync(fn));
-      const fileErrors = studySchema.validate(fileContent);
+      const fileErrors = studySchema.validate(fileContent, { strip: false });
 
       if (fileErrors.length) {
         errors = true;
@@ -123,6 +139,7 @@ function printResult(fn, fileErrors) {
     if (errors) throw new Error();
     process.exit(0);
   } catch (error) {
+    console.log(error);
     process.exit(1);
   }
 })();