Merge pull request #43 from nzzdev/release-1.4.0

Release 1.4.0

.dockerignore

@@ -0,0 +1,2 @@
+node_modules
+jspm_packages

.gitignore

@@ -4,4 +4,7 @@ jspm_packages
 .DS_STORE
 .env.json
 scripts
-styles
+styles
+resources/fixtures
+resources/fonts/*.otf
+resources/fonts/*.ttf

.nvmrc

@@ -1 +1 @@
-8.8
+9.2

.travis.yml

@@ -4,8 +4,9 @@ services:
 - docker
 language: node_js
 node_js:
-- '8.8'
+- '9.2'
 install:
+- sudo apt-key update && sudo apt-get update && sudo apt-get -y install libcairo2-dev libjpeg-dev libpango1.0-dev libgif-dev build-essential g++
 - npm install -g jspm
 - npm install
 - jspm install

.vscode/launch.json

@@ -4,12 +4,15 @@
   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
   "version": "0.2.0",
   "configurations": [
-
     {
       "type": "node",
       "request": "launch",
       "name": "Launch Program",
+      "env": {
+        "DEBUG": true,
+        "FONTS": "[{\"url\": \"https://assets.static-nzz.ch/nzz-niobe/assets/fonts/GT-America-Standard-Regular.otf\",\"name\": \"nzz-sans-serif\",\"filename\": \"nzz-sans-serif.otf\"}]"
+      },
       "program": "${workspaceRoot}/index.js"
     }
   ]
-}
+}

Dockerfile

@@ -1,12 +1,18 @@
 # Use following version of Node as the base image
-FROM node:8.8
+FROM node:9.2
 
 # Set work directory for run/cmd
 WORKDIR /app
 
+RUN apt-key update && apt-get update && apt-get -y install libcairo2-dev libjpeg-dev libpango1.0-dev libgif-dev build-essential g++
+
 # Copy package.json into work directory and install dependencies
 COPY package.json /app/package.json
-RUN npm install
+RUN npm install --production
+RUN npm install -g jspm
+
+COPY jspm.config.js /app/jspm.config.js
+RUN jspm install
 
 # Copy everthing else in work directory
 COPY . /app
@@ -15,4 +21,4 @@ COPY . /app
 EXPOSE 3000
 
 # Run node
-CMD ["node", "/app/index.js"]
+CMD node index.js

README.md

@@ -1,6 +1,77 @@
 # NZZ Storytelling Q Chart
 
-This is Q Chart. It is a hack taking the old Q-chart code and making it work as a service with some server side logic.
+This is Q Chart. It is currently a mixture of the "old" (based on chartist) and the "new" Q Chart Tool based on vega.
 
-## Implementation details
-The tool structure follows the general structure of each Q tool. Further information can be found in [Q server documentation - Developing tools](https://nzzdev.github.io/Q-server/developing-tools.html).
+## Deployment / Configuration
+You can set the following env variables
+- `FONTS` set this to a JSON array like this to make the service download the font files on start
+```
+[
+  {
+    "name": "nzz-sans-serif",
+    "filename": "nzz-sans-serif.otf",
+    "url": "https://storytelling.nzz.ch/nzz-fonts/GT-America-Standard-Regular.otf"
+  }
+]
+```
+- `FEAT_VEGA_RENDERER` set this to true to actually use the new renderer if possible.
+
+## toolRuntimeConfig
+There is various runtime configuration that can be passed to the rendering-info endpoints. pass a JSON object in the payload:
+```
+{
+  "toolRuntimeConfig": {
+    "colorSchemes": {
+      "category": {
+        "default": [
+          "#191D63",
+          "#D6B222",
+          "#656565",
+          "#E08B63",
+          "#2E6E71",
+          "#DD5B6C",
+          "#1EAFC7",
+          "#9A8700",
+          "#1F9877",
+          "#A3A189",
+          "#B37490",
+          "#B23C39"
+        ],
+        "light": [
+          "#DCDDE7",
+          "#FDF4D1",
+          "#C7C7C7",
+          "#F7E2D9",
+          "#A3CFD1",
+          "#F5CED3",
+          "#CBECF2",
+          "#E7DA7C",
+          "#B5E1D5",
+          "#E7E7E0",
+          "#F0E3E9",
+          "#F5B8B7"
+        ]
+      }
+    }
+  },
+  "axis": {
+    "gridColor": "#e9e9ee",
+    "domainColor": "#e9e9ee",
+    "tickColor": "#e9e9ee",
+    "labelFont": "nzz-sans-serif",
+    "labelColor": "#05032d",
+    "labelFontSize": 11,
+    "labelFontWeight": 100,
+    "ticks": true,
+    "tickExtra": false,
+    "tickOffset": 0,
+    "tickRound": true,
+    "tickSize": 4,
+    "tickWidth": 1,
+    "titleFont": "nzz-sans-serif",
+    "titleFontSize": 11,
+    "titleColor": "#05032d",
+    "titleFontWeight": 100
+  }
+}
+```

chartTypes/bar/mapping.js

@@ -0,0 +1,95 @@
+const clone = require('clone');
+const objectPath = require('object-path');
+
+const getLongestDataLabel = require('../../helpers/data.js').getLongestDataLabel;
+const textMetrics = require('vega').textMetrics;
+
+let labelsOnTopOfBars;
+
+function shouldHaveLabelsOnTopOfBar(itemData, config) {
+  if (labelsOnTopOfBars !== undefined) {
+    return labelsOnTopOfBars;
+  }
+
+  const longestLabel = getLongestDataLabel(itemData, true);
+  const item = {
+    text: longestLabel
+  };
+  const longestLabelWidth = textMetrics.width(item);
+
+  if (config.width / 3 < longestLabelWidth) {
+    labelsOnTopOfBars = true;
+  } else {
+    labelsOnTopOfBars = false;
+  }
+
+  return labelsOnTopOfBars;
+}
+
+module.exports = function getMapping(config = {}) {
+  // reset
+  labelsOnTopOfBars = undefined;
+  return [
+    {
+      path: 'data',
+      mapToSpec: function(itemData, spec) {
+        spec.data = {
+          name: 'table',
+          values: clone(itemData)
+            .slice(1)                     // take the header row out of the array
+            .map((row, rowIndex) => {
+              const y = row.shift();      // take the y axis value out of the row
+              return row
+                .map((val, index) => {    // generate one array entry for every data category on the same y value
+                  return {
+                    xValue: val,
+                    xIndex: rowIndex,
+                    yValue: y,
+                    cValue: index
+                  }
+                })
+            })
+            .reduce(( acc, cur ) => {     // flatten the array
+              return acc.concat(cur);
+            })
+        }
+      }
+    },
+    {
+      path: 'data',
+      mapToSpec: function(itemData, spec) {
+        const numberOfCategories = itemData[1].length;
+        const numberOfGroups = itemData.length - 1; // minus the header row
+        // minimum 10px height for bars
+        let height = (numberOfCategories * numberOfGroups * 10);
+        // add the padding
+        height += height / (numberOfGroups) * spec.scales[1].paddingInner * (numberOfGroups - 1);
+
+        // add some space for the labels and axis title if any
+        height += 40;
+
+        spec.height = height;
+      }
+    },
+    {
+      path: 'data.0.0',
+      mapToSpec: function(firstColumnFirstRow, spec) {
+        objectPath.set(spec, 'axes.0.title', firstColumnFirstRow);
+      }
+    },
+    {
+      path: 'data',
+      mapToSpec: function(itemData) {
+        // return !shouldHaveLabelsOnTopOfBar(itemData, config);
+      }
+    },
+    {
+      path: 'data',
+      mapToSpec: function(itemData) {
+        // if (shouldHaveLabelsOnTopOfBar(itemData, config)) {
+          // todo: adjust spec to have labels on top of bar group
+        // };
+      }
+    }
+  ]
+};