Merge pull request #200 from nzzdev/release-3.4.1

Release 3.4.1

.vscode/launch.json

@@ -27,6 +27,18 @@
       },
       "runtimeVersion": "12.10.0",
       "program": "${workspaceRoot}/test/e2e-tests.js"
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Launch dom Tests",
+      "env": {
+        "DEBUG": true,
+        "DIVERGING_COLOR_SCHEMES": "[{ \"label\": \"one\", \"key\": 0, \"scheme_name\": \"diverging_one\" }, { \"label\": \"two\", \"key\": 1, \"scheme_name\": \"diverging_two\" }, { \"label\": \"three\", \"key\": 2, \"scheme_name\": \"diverging_three\" } ]",
+        "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\"}]"
+      },
+      "runtimeVersion": "12.10.0",
+      "program": "${workspaceRoot}/test/dom-tests.js"
     }
   ]
 }

chartTypes/area/vega-spec.json

@@ -105,8 +105,7 @@
       "ticks": false,
       "labels": true,
       "tickCount": 4,
-      "labelPadding": 2,
-      "format": "~r"
+      "labelPadding": 2
     }
   ],
   "marks": [

package.json

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

resources/fixtures/data/area-y-legend-thousand-separator.json

@@ -0,0 +1,80 @@
+{
+  "title": "FIXTURE: Area - y legend thousand separator",
+  "data": [
+    [
+      "Jahr",
+      "A"
+    ],
+    [
+      "2012",
+      "1"
+    ],
+    [
+      "2013",
+      "20"
+    ],
+    [
+      "2014",
+      "300"
+    ],
+    [
+      "2015",
+      "2000"
+    ],
+    [
+      "2016",
+      "7501"
+    ],
+    [
+      "2017",
+      "10000"
+    ],
+    [
+      "2018",
+      "49999"
+    ],
+    [
+      "2019",
+      "50001"
+    ],
+    [
+      "2020",
+      "75111"
+    ],
+    [
+      "2021",
+      "99999"
+    ]
+  ],
+  "allowDownloadData": false,
+  "sources": [],
+  "options": {
+    "chartType": "Area",
+    "hideAxisLabel": true,
+    "highlightDataSeries": [],
+    "highlightDataRows": [],
+    "annotations": {},
+    "barOptions": {
+      "isBarChart": false,
+      "forceBarsOnSmall": false
+    },
+    "dateSeriesOptions": {
+      "interval": "auto",
+      "prognosisStart": 1
+    },
+    "lineChartOptions": {
+      "reverseYScale": false,
+      "lineInterpolation": "linear",
+      "isStockChart": false
+    },
+    "dotplotOptions": {},
+    "arrowOptions": {
+      "colorScheme": 0
+    },
+    "colorOverwritesSeries": [],
+    "colorOverwritesRows": [],
+    "areaChartOptions": {
+      "areaInterpolation": "linear"
+    }
+  }
+}

routes/fixtures/data.js

@@ -5,6 +5,7 @@ const fixtureDataDirectory = "../../resources/fixtures/data";
 const fixtureData = [
   require(`${fixtureDataDirectory}/area-three-categories-prognosis.json`),
   require(`${fixtureDataDirectory}/area-three-categories-y-max.json`),
+  require(`${fixtureDataDirectory}/area-y-legend-thousand-separator.json`),
   require(`${fixtureDataDirectory}/arrow-two-categories-only-negative.json`),
   require(`${fixtureDataDirectory}/arrow-two-categories-only-positive.json`),
   require(`${fixtureDataDirectory}/arrow-two-categories-same-value.json`),

styles_src/q-chart.scss

@@ -1,6 +1,20 @@
 .q-chart {
   opacity: 1 !important;
+
   svg {
     overflow: visible;
   }
 }
+
+.q-chart-events {
+  margin: 0 4px;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+}
+
+.q-chart-events__label {
+  display: flex;
+  align-items: center;
+  margin-left: 4px;
+}

test/config/toolRuntimeConfig.json

@@ -71,5 +71,13 @@
     "fontSize": 11,
     "fontWeight": 700,
     "radius": 8
+  },
+  "size": {
+    "width": [
+      {
+        "value": 272,
+        "comparison": "="
+      }
+    ]
   }
 }

test/dom-tests.js

@@ -35,10 +35,15 @@ after(async () => {
   server = null;
 });
 
-function element(markup, selector) {
+function elementAll(markup, selector) {
   return new Promise((resolve, reject) => {
+    const elemArr = [];
     const dom = new JSDOM(markup);
-    resolve(dom.window.document.querySelector(selector));
+
+    dom.window.document.querySelectorAll(selector)
+      .forEach(element => elemArr.push(element));
+
+    resolve(elemArr);
   });
 }
 
@@ -83,4 +88,29 @@ lab.experiment("Q chart dom tests", () => {
       }
     );
   });
+
+
+    it("number format of area y legend has correct thousend separator", async () => {
+      const response = await server.inject({
+        url: "/rendering-info/web",
+        method: "POST",
+        payload: {
+          item: require("../resources/fixtures/data/area-y-legend-thousand-separator"),
+          toolRuntimeConfig: toolRuntimeConfig,
+        },
+      });
+      return elementAll(
+        response.result.markup,
+        ".role-axis-label"
+      ).then((el) => {
+        const children = el[1].children;
+        const value0 = children[0].textContent;
+        const value20000 = children[1].textContent;
+        const value100000 = children[5].textContent;
+
+        expect(value0).to.not.include(" "); // has not quarter space U+2005
+        expect(value20000).to.include(" "); // has quarter space U+2005
+        expect(value100000).to.include(" "); // has quarter space U+2005
+      });
+    });
 });

views/events.html

@@ -3,7 +3,7 @@
   style="margin: 15px -4px; display: flex; flex-wrap: wrap;"
 >
   {%- for event in events.data %}
-  <div style="margin: 0 4px;">
+  <div class="q-chart q-chart-events">
     {% set radius = events.config.radius %}
     <svg width="{{ 2 * radius + 2 }}" height="{{ 2 * radius + 2 }}" style="vertical-align: sub;">
       <g transform="translate({{ radius + 1 }}, {{ radius + 1 }})">
@@ -20,7 +20,7 @@
         </text>
       </g>
     </svg>
-    <span>{{ event.label }}</span>
+    <span class="q-chart q-chart-events__label">{{ event.label }}</span>
   </div style="margin: 0 4px;">
   {%- endfor %}
 </div>