Merge pull request #206 from nzzdev/release-3.5.0

Release 3.5.0

chartTypes/bar-stacked/mapping.js

@@ -2,6 +2,10 @@ const objectPath = require("object-path");
 const Decimal = require("decimal.js");
 const clone = require("clone");
 const dataHelpers = require("../../helpers/data.js");
+const d3config = require("../../config/d3.js");
+const d3format = require("d3-format");
+const locale = d3format.formatLocale(d3config.formatLocale);
+const format = locale.format(d3config.specifier);
 
 const intervals = require("../../helpers/dateSeries.js").intervals;
 
@@ -66,7 +70,10 @@ module.exports = function getMapping() {
         }
 
         // check if we need to shorten the number labels
-        const divisor = dataHelpers.getDivisor(itemData, mappingData.item.options.largeNumbers);
+        const divisor = dataHelpers.getDivisor(
+          itemData,
+          mappingData.item.options.largeNumbers
+        );
 
         spec.data[0].values = clone(itemData)
           .slice(1) // take the header row out of the array
@@ -83,6 +90,10 @@ module.exports = function getMapping() {
                 xIndex: rowIndex,
                 yValue: value,
                 cValue: index,
+                labelWidth: textMeasure.getLabelTextWidth(
+                  format(value),
+                  mappingData.toolRuntimeConfig
+                ),
               };
             });
           })
@@ -181,6 +192,109 @@ module.exports = function getMapping() {
         objectPath.set(spec, "axes.0.values", [0, 25, 50, 75, 100]);
       },
     },
+    {
+      path: "item.options.annotations.valuesOnBars",
+      mapToSpec: function (valuesOnBars, spec, mappingData) {
+        if (!valuesOnBars) {
+          return;
+        }
+
+        const valuePadding = 4;
+        const tests = {
+          zeroValue: "datum.datum.yValue == 0",
+          positiveValue: "datum.datum.yValue > 0",
+          negativeValue: "datum.datum.yValue < 0",
+          labelTooBig: `datum.width < datum.datum.labelWidth + ${
+            valuePadding * 2
+          }`,
+          contrastFineForDark: `contrast('${mappingData.toolRuntimeConfig.text.fill}', datum.fill) > contrast('white', datum.fill)`,
+        };
+
+        const valueLabelMark = {
+          type: "text",
+          from: {
+            data: "bar",
+          },
+          encode: {
+            enter: {
+              y: {
+                field: "y",
+              },
+              dy: {
+                signal: "barWidth / 2",
+              },
+              baseline: {
+                value: "middle",
+              },
+              opacity: [
+                {
+                  test: tests.zeroValue,
+                  value: 0,
+                },
+                {
+                  test: tests.labelTooBig,
+                  value: 0,
+                },
+              ],
+              x: [
+                {
+                  test: tests.positiveValue,
+                  field: "x",
+                },
+                {
+                  test: tests.negativeValue,
+                  field: "x2",
+                },
+                {
+                  field: "x",
+                },
+              ],
+              align: [
+                {
+                  test: tests.positiveValue,
+                  value: "left",
+                },
+                {
+                  test: tests.negativeValue,
+                  value: "right",
+                },
+                {
+                  value: "left",
+                },
+              ],
+              dx: [
+                {
+                  test: tests.positiveValue,
+                  value: valuePadding,
+                },
+                {
+                  test: tests.negativeValue,
+                  value: -valuePadding,
+                },
+                {
+                  value: valuePadding,
+                },
+              ],
+              fill: [
+                {
+                  test: tests.contrastFineForDark,
+                  value: mappingData.toolRuntimeConfig.text.fill,
+                },
+                {
+                  value: "white",
+                },
+              ],
+              text: {
+                signal: `format(datum.datum.yValue, "${d3config.specifier}")`,
+              },
+            },
+          },
+        };
+
+        // add the value label marks
+        spec.marks[0].marks[0].marks.push(valueLabelMark);
+      },
+    },
     {
       path: "item.options.hideAxisLabel",
       mapToSpec: function (hideAxisLabel, spec) {
@@ -198,7 +312,10 @@ module.exports = function getMapping() {
       path: "item.options.barOptions.maxValue",
       mapToSpec: function (maxValue, spec, mappingData) {
         // check if we need to shorten the number labels
-        const divisor = dataHelpers.getDivisor(mappingData.item.data, mappingData.item.options.largeNumbers);
+        const divisor = dataHelpers.getDivisor(
+          mappingData.item.data,
+          mappingData.item.options.largeNumbers
+        );
 
         const dataMaxValue = dataHelpers.getMaxValue(mappingData.item.data);
         if (dataMaxValue > maxValue) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "q-chart",
-  "version": "3.4.2",
+  "version": "3.5.0",
   "description": "",
   "main": "index.js",
   "scripts": {

resources/fixtures/data/bar-stacked-mixed-values-on-bars.json

@@ -0,0 +1,73 @@
+{
+  "title": "FIXTURE: StackedBar - mixed values - values on bars",
+  "data": [
+    ["Jahr", "Data 1", "Data 2", "Data 3", "Data 4", "Data 5", "Data 6"],
+    ["2010", "100", "24", "0", "5", "2", null],
+    ["2020", "45", "35", "3", null, "1", "1"],
+    ["2030", "-21", null, "-56", "16", "1", "3"]
+  ],
+  "allowDownloadData": false,
+  "sources": [
+    {
+      "link": {
+        "url": "https://nzz.ch/visuals",
+        "isValid": true
+      },
+      "text": "Some source"
+    }
+  ],
+  "options": {
+    "chartType": "StackedBar",
+    "hideAxisLabel": false,
+    "annotations": {
+      "valuesOnBars": true
+    },
+    "barOptions": {
+      "isBarChart": true,
+      "forceBarsOnSmall": false
+    },
+    "dateSeriesOptions": {
+      "interval": "year",
+      "prognosisStart": null
+    },
+    "lineChartOptions": {
+      "reverseYScale": false,
+      "lineInterpolation": "linear",
+      "isStockChart": false
+    },
+    "dotplotOptions": {},
+    "arrowOptions": {
+      "colorScheme": 0
+    },
+    "highlightDataSeries": [],
+    "colorOverwritesSeries": [
+      {
+        "color": "#0084c7",
+        "colorLight": "#000000",
+        "position": 5
+      },
+      {
+        "color": "#408b3d",
+        "position": 6
+      },
+      {
+        "color": "#c31906",
+        "position": 2
+      },
+      {
+        "color": "#da467d",
+        "position": 3
+      },
+      {
+        "color": "#d28b00",
+        "position": 4
+      },
+      {
+        "color": "#54ba00",
+        "position": 1
+      }
+    ]
+  },
+  "subtitle": "Some subtitle",
+  "notes": "Some longer description or notes to the data shown above."
+}

routes/fixtures/data.js

@@ -32,6 +32,7 @@ const fixtureData = [
   require(`${fixtureDataDirectory}/bar-stacked-qualitative-negative-only.json`),
   require(`${fixtureDataDirectory}/bar-stacked-qualitative-negative.json`),
   require(`${fixtureDataDirectory}/bar-stacked-null-values.json`),
+  require(`${fixtureDataDirectory}/bar-stacked-mixed-values-on-bars.json`),
   require(`${fixtureDataDirectory}/bar-values-on-bars.json`),
   require(`${fixtureDataDirectory}/bar-many-rows.json`),
   require(`${fixtureDataDirectory}/bar-many-rows-values-on-bars.json`),

routes/option-availability.js

@@ -183,6 +183,10 @@ module.exports = {
         available = true;
       }
 
+      if (isStackedBarChart(item)) {
+        available = true;
+      }
+
       if (isDotplot(item)) {
         available = true;
       }
@@ -229,7 +233,7 @@ module.exports = {
     if (request.params.optionName === "annotations.valuesOnBars") {
       try {
         return {
-          available: isBarChart(item)
+          available: isBarChart(item) || isStackedBarChart(item)
         };
       } catch (e) {
         return {