From 25512a1ddeb373966372235d0b6a5db8f3c2324f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=86ndrew=20Rininsland?= Date: Fri, 23 Mar 2018 17:06:07 +0000 Subject: [PATCH 01/10] :bug: Fixes #45. - Replaces (most) calls to Selection.html with Selection.text - Wraps any remaining HTML doctype-specific DOM manip in if statements - Adds a test ensuring a pure SVG context can be rendered with JSDom --- package-lock.json | 239 ++++++++++++++++++++++---------------- package.json | 2 +- src/chartframe.js | 44 +++---- test/g-chartframe.test.js | 13 +++ 4 files changed, 175 insertions(+), 123 deletions(-) diff --git a/package-lock.json b/package-lock.json index 51a508c..e759cae 100644 --- a/package-lock.json +++ b/package-lock.json @@ -692,12 +692,6 @@ "to-fast-properties": "2.0.0" } }, - "@types/node": { - "version": "8.0.53", - "resolved": "https://registry.npmjs.org/@types/node/-/node-8.0.53.tgz", - "integrity": "sha512-54Dm6NwYeiSQmRB1BLXKr5GELi0wFapR1npi8bnZhEcu84d/yQKqnwwXQ56hZ0RUbTG6L5nqDZaN3dgByQXQRQ==", - "dev": true - }, "abab": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/abab/-/abab-1.0.4.tgz", @@ -705,9 +699,9 @@ "dev": true }, "acorn": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.2.1.tgz", - "integrity": "sha512-jG0u7c4Ly+3QkkW18V+NRDN+4bWHdln30NL1ZL2AvFZZmQe/BfopYCtghCKKVBUSetZ4QKcyA0pY6/4Gw8Pv8w==", + "version": "5.5.3", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.5.3.tgz", + "integrity": "sha512-jd5MkIUlbbmb07nXH0DT3y7rDVtkzDi4XZOUVWAer8ajmF/DTSSbl5oNFyDOl/OXA33Bl79+ypHhl2pN20VeOQ==", "dev": true }, "acorn-globals": { @@ -716,7 +710,7 @@ "integrity": "sha512-KjZwU26uG3u6eZcfGbTULzFcsoz6pegNKtHPksZPOUsiKo5bUmiBPa38FuHZ/Eun+XYh/JCCkS9AS3Lu4McQOQ==", "dev": true, "requires": { - "acorn": "5.2.1" + "acorn": "5.5.3" } }, "acorn-jsx": { @@ -851,6 +845,12 @@ "integrity": "sha1-104bh+ev/A24qttwIfP+SBAasjQ=", "dev": true }, + "async-limiter": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.0.tgz", + "integrity": "sha512-jp/uFnooOiO+L211eZOoSyzpOITMXx1rBITauYykG3BRYPu8h0UcxsPNB04RR5vo4Tyz3+ay17tR6JVf9qzYWg==", + "dev": true + }, "asynckit": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", @@ -1459,10 +1459,13 @@ } }, "domexception": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/domexception/-/domexception-1.0.0.tgz", - "integrity": "sha512-WpwuBlZ2lQRFa4H/4w49deb9rJLot9KmqrKKjMc9qBl7CID+DdC2swoa34ccRl+anL2B6bLp6TjFdIdnzekMBQ==", - "dev": true + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/domexception/-/domexception-1.0.1.tgz", + "integrity": "sha512-raigMkn7CJNNo6Ihro1fzG7wr3fHuYVytzquZKX5n0yizGsTcYgzdIUwj1X9pK0VvjeihV+XiclP+DjwbsSKug==", + "dev": true, + "requires": { + "webidl-conversions": "4.0.2" + } }, "ecc-jsbn": { "version": "0.1.1", @@ -1519,16 +1522,16 @@ "dev": true }, "escodegen": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.9.0.tgz", - "integrity": "sha512-v0MYvNQ32bzwoG2OSFzWAkuahDQHK92JBN0pTAALJ4RIxEZe766QJPDR8Hqy7XNUy5K3fnVL76OqYAdc4TZEIw==", + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.9.1.tgz", + "integrity": "sha512-6hTjO1NAWkHnDk3OqQ4YrCuwwmGHL9S3nPlzBOUG/R44rda3wLNrfvQ5fkSGjyhHFKM7ALPKcKGrwvCLe0lC7Q==", "dev": true, "requires": { "esprima": "3.1.3", "estraverse": "4.2.0", "esutils": "2.0.2", "optionator": "0.8.2", - "source-map": "0.5.7" + "source-map": "0.6.1" } }, "eslint": { @@ -2259,6 +2262,12 @@ "sshpk": "1.13.0" } }, + "iconv-lite": { + "version": "0.4.19", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz", + "integrity": "sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ==", + "dev": true + }, "ignore": { "version": "3.3.7", "resolved": "https://registry.npmjs.org/ignore/-/ignore-3.3.7.tgz", @@ -2653,40 +2662,43 @@ "optional": true }, "jsdom": { - "version": "11.4.0", - "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-11.4.0.tgz", - "integrity": "sha512-BTp3qjJlrnzcZGl8XdGnR+jEXvNjzUmixf2hBhf6Ky05qbtLmF/xGTCCT6QK9ugrYdlBURWO8GlkKY65TpOLfw==", + "version": "11.6.2", + "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-11.6.2.tgz", + "integrity": "sha512-pAeZhpbSlUp5yQcS6cBQJwkbzmv4tWFaYxHbFVSxzXefqjvtRA851Z5N2P+TguVG9YeUDcgb8pdeVQRJh0XR3Q==", "dev": true, "requires": { "abab": "1.0.4", - "acorn": "5.2.1", + "acorn": "5.5.3", "acorn-globals": "4.1.0", "array-equal": "1.0.0", "browser-process-hrtime": "0.1.2", "content-type-parser": "1.0.2", "cssom": "0.3.2", "cssstyle": "0.2.37", - "domexception": "1.0.0", - "escodegen": "1.9.0", + "domexception": "1.0.1", + "escodegen": "1.9.1", "html-encoding-sniffer": "1.0.2", - "nwmatcher": "1.4.3", - "parse5": "3.0.3", - "pn": "1.0.0", - "request": "2.83.0", + "left-pad": "1.2.0", + "nwmatcher": "1.4.4", + "parse5": "4.0.0", + "pn": "1.1.0", + "request": "2.85.0", "request-promise-native": "1.0.5", "sax": "1.2.4", "symbol-tree": "3.2.2", - "tough-cookie": "2.3.3", + "tough-cookie": "2.3.4", + "w3c-hr-time": "1.0.1", "webidl-conversions": "4.0.2", "whatwg-encoding": "1.0.3", - "whatwg-url": "6.3.0", - "xml-name-validator": "2.0.1" + "whatwg-url": "6.4.0", + "ws": "4.1.0", + "xml-name-validator": "3.0.0" }, "dependencies": { "ajv": { - "version": "5.4.0", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.4.0.tgz", - "integrity": "sha1-MtHPCNvIDEMvQm8S4QslEfa0ZHQ=", + "version": "5.5.2", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz", + "integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=", "dev": true, "requires": { "co": "4.6.0", @@ -2713,7 +2725,7 @@ "integrity": "sha1-T4owBctKfjiJ90kDD9JbluAdLjE=", "dev": true, "requires": { - "hoek": "4.2.0" + "hoek": "4.2.1" } }, "cryptiles": { @@ -2731,20 +2743,31 @@ "integrity": "sha512-Z5BTk6ZRe4tXXQlkqftmsAUANpXmuwlsF5Oov8ThoMbQRzdGTA1ngYRW160GexgOgjsFOKJz0LYhoNi+2AMBUw==", "dev": true, "requires": { - "hoek": "4.2.0" + "hoek": "4.2.1" } } } }, "form-data": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.1.tgz", - "integrity": "sha1-b7lPvXGIUwbXPRXMSX/kzE7NRL8=", + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.2.tgz", + "integrity": "sha1-SXBJi+YEwgwAXU9cI67NIda0kJk=", "dev": true, "requires": { "asynckit": "0.4.0", - "combined-stream": "1.0.5", - "mime-types": "2.1.17" + "combined-stream": "1.0.6", + "mime-types": "2.1.18" + }, + "dependencies": { + "combined-stream": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.6.tgz", + "integrity": "sha1-cj599ugBrFYTETp+RFqbactjKBg=", + "dev": true, + "requires": { + "delayed-stream": "1.0.0" + } + } } }, "har-schema": { @@ -2759,7 +2782,7 @@ "integrity": "sha1-ukAsJmGU8VlW7xXg/PJCmT9qff0=", "dev": true, "requires": { - "ajv": "5.4.0", + "ajv": "5.5.2", "har-schema": "2.0.0" } }, @@ -2771,14 +2794,14 @@ "requires": { "boom": "4.3.1", "cryptiles": "3.1.2", - "hoek": "4.2.0", + "hoek": "4.2.1", "sntp": "2.1.0" } }, "hoek": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/hoek/-/hoek-4.2.0.tgz", - "integrity": "sha512-v0XCLxICi9nPfYrS9RL8HbYnXi9obYAeLbSP00BmnZwCK9+Ih9WOjoZ8YoHCoav2csqn4FOz4Orldsy2dmDwmQ==", + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/hoek/-/hoek-4.2.1.tgz", + "integrity": "sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA==", "dev": true }, "http-signature": { @@ -2793,18 +2816,18 @@ } }, "mime-db": { - "version": "1.30.0", - "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.30.0.tgz", - "integrity": "sha1-dMZD2i3Z1qRTmZY0ZbJtXKfXHwE=", + "version": "1.33.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.33.0.tgz", + "integrity": "sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ==", "dev": true }, "mime-types": { - "version": "2.1.17", - "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.17.tgz", - "integrity": "sha1-Cdejk/A+mVp5+K+Fe3Cp4KsWVXo=", + "version": "2.1.18", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.18.tgz", + "integrity": "sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==", "dev": true, "requires": { - "mime-db": "1.30.0" + "mime-db": "1.33.0" } }, "performance-now": { @@ -2820,9 +2843,9 @@ "dev": true }, "request": { - "version": "2.83.0", - "resolved": "https://registry.npmjs.org/request/-/request-2.83.0.tgz", - "integrity": "sha512-lR3gD69osqm6EYLk9wB/G1W/laGWjzH90t1vEa2xuxHD5KUrSzp9pUSfTm+YC5Nxt2T8nMPEvKlhbQayU7bgFw==", + "version": "2.85.0", + "resolved": "https://registry.npmjs.org/request/-/request-2.85.0.tgz", + "integrity": "sha512-8H7Ehijd4js+s6wuVPLjwORxD4zeuyjYugprdOXlPSqaApmL/QOy+EB/beICHVCHkGMKNh5rvihb5ov+IDw4mg==", "dev": true, "requires": { "aws-sign2": "0.7.0", @@ -2831,22 +2854,22 @@ "combined-stream": "1.0.5", "extend": "3.0.1", "forever-agent": "0.6.1", - "form-data": "2.3.1", + "form-data": "2.3.2", "har-validator": "5.0.3", "hawk": "6.0.2", "http-signature": "1.2.0", "is-typedarray": "1.0.0", "isstream": "0.1.2", "json-stringify-safe": "5.0.1", - "mime-types": "2.1.17", + "mime-types": "2.1.18", "oauth-sign": "0.8.2", "performance-now": "2.1.0", "qs": "6.5.1", "safe-buffer": "5.1.1", "stringstream": "0.0.5", - "tough-cookie": "2.3.3", + "tough-cookie": "2.3.4", "tunnel-agent": "0.6.0", - "uuid": "3.1.0" + "uuid": "3.2.1" } }, "safe-buffer": { @@ -2861,22 +2884,22 @@ "integrity": "sha512-FL1b58BDrqS3A11lJ0zEdnJ3UOKqVxawAkF3k7F0CVN7VQ34aZrV+G8BZ1WC9ZL7NyrwsW0oviwsWDgRuVYtJg==", "dev": true, "requires": { - "hoek": "4.2.0" + "hoek": "4.2.1" } }, "tough-cookie": { - "version": "2.3.3", - "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.3.tgz", - "integrity": "sha1-C2GKVWW23qkL80JdBNVe3EdadWE=", + "version": "2.3.4", + "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.4.tgz", + "integrity": "sha512-TZ6TTfI5NtZnuyy/Kecv+CnoROnyXn2DN97LontgQpCwsX2XyLYCC0ENhYkehSOwAp8rTQKc/NUIF7BkQ5rKLA==", "dev": true, "requires": { "punycode": "1.4.1" } }, "uuid": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.1.0.tgz", - "integrity": "sha512-DIWtzUkw04M4k3bf1IcpS2tngXEL26YUD2M0tMDUpnUrz2hgzUBlD55a4FjdLGPvfHxS6uluGWvaVEqgBcVa+g==", + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.2.1.tgz", + "integrity": "sha512-jZnMwlb9Iku/O3smGWvZhauCf6cvvpKi4BKRiliS3cxnI+Gz9j5MEpTz2UFuXiKPJocb7gnsLHwiS05ige5BEA==", "dev": true } } @@ -2961,6 +2984,12 @@ "is-buffer": "1.1.5" } }, + "left-pad": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/left-pad/-/left-pad-1.2.0.tgz", + "integrity": "sha1-0wpzxrggHY99jnlWupYWCHpo4O4=", + "dev": true + }, "levn": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz", @@ -3182,9 +3211,9 @@ "dev": true }, "nwmatcher": { - "version": "1.4.3", - "resolved": "https://registry.npmjs.org/nwmatcher/-/nwmatcher-1.4.3.tgz", - "integrity": "sha512-IKdSTiDWCarf2JTS5e9e2+5tPZGdkRJ79XjYV0pzK8Q9BpsFyBq1RGKxzs7Q8UBushGw7m6TzVKz6fcY99iSWw==", + "version": "1.4.4", + "resolved": "https://registry.npmjs.org/nwmatcher/-/nwmatcher-1.4.4.tgz", + "integrity": "sha512-3iuY4N5dhgMpCUrOVnuAdGrgxVqV2cJpM+XNccjR2DKOB1RUP0aA+wGXEiNziG/UKboFyGBIoKOaNlJxx8bciQ==", "dev": true }, "nyc": { @@ -4884,13 +4913,10 @@ } }, "parse5": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/parse5/-/parse5-3.0.3.tgz", - "integrity": "sha512-rgO9Zg5LLLkfJF9E6CCmXlSE4UVceloys8JrFqCcHloC3usd/kJCyPDwH2SOlzix2j3xaP9sUX3e8+kvkuleAA==", - "dev": true, - "requires": { - "@types/node": "8.0.53" - } + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-4.0.0.tgz", + "integrity": "sha512-VrZ7eOd3T1Fk4XWNXMgiGBK/z0MG48BWG2uQNU4I72fkQuKUTZpl+u9k+CxEG0twMVzSmXEEz12z5Fnw1jIQFA==", + "dev": true }, "path-exists": { "version": "3.0.0", @@ -4985,9 +5011,9 @@ "dev": true }, "pn": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/pn/-/pn-1.0.0.tgz", - "integrity": "sha1-HPWjCw2AbNGPiPxBprXUrWFbO6k=", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/pn/-/pn-1.1.0.tgz", + "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==", "dev": true }, "prelude-ls": { @@ -5266,13 +5292,13 @@ "requires": { "request-promise-core": "1.1.1", "stealthy-require": "1.1.1", - "tough-cookie": "2.3.3" + "tough-cookie": "2.3.4" }, "dependencies": { "tough-cookie": { - "version": "2.3.3", - "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.3.tgz", - "integrity": "sha1-C2GKVWW23qkL80JdBNVe3EdadWE=", + "version": "2.3.4", + "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.4.tgz", + "integrity": "sha512-TZ6TTfI5NtZnuyy/Kecv+CnoROnyXn2DN97LontgQpCwsX2XyLYCC0ENhYkehSOwAp8rTQKc/NUIF7BkQ5rKLA==", "dev": true, "requires": { "punycode": "1.4.1" @@ -5523,9 +5549,9 @@ } }, "source-map": { - "version": "0.5.7", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", - "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true, "optional": true }, @@ -6056,6 +6082,15 @@ "integrity": "sha512-DRibZL6DsNhIgYQ+wNdWDL2SL3bKPlVrRiBqV5yuMm++op8W4kGFtaQfCs4KEJn0wBZcHVHJ3eoywX8983k1ow==", "dev": true }, + "w3c-hr-time": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz", + "integrity": "sha1-gqwr/2PZUOqeMYmlimViX+3xkEU=", + "dev": true, + "requires": { + "browser-process-hrtime": "0.1.2" + } + }, "watch": { "version": "0.17.1", "resolved": "https://registry.npmjs.org/watch/-/watch-0.17.1.tgz", @@ -6087,20 +6122,12 @@ "dev": true, "requires": { "iconv-lite": "0.4.19" - }, - "dependencies": { - "iconv-lite": { - "version": "0.4.19", - "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz", - "integrity": "sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ==", - "dev": true - } } }, "whatwg-url": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-6.3.0.tgz", - "integrity": "sha512-rM+hE5iYKGPAOu05mIdJR47pYSR2vDzfrTEFRc/S8D3L60yW8BuXmUJ7Kog7x/DrokFN7JNaHKadpzjouKRRAw==", + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-6.4.0.tgz", + "integrity": "sha512-Z0CVh/YE217Foyb488eo+iBv+r7eAQ0wSTyApi9n06jhcA3z6Nidg/EGvl0UFkg7kMdKxfBzzr+o9JF+cevgMg==", "dev": true, "requires": { "lodash.sortby": "4.7.0", @@ -6138,10 +6165,20 @@ "mkdirp": "0.5.1" } }, + "ws": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-4.1.0.tgz", + "integrity": "sha512-ZGh/8kF9rrRNffkLFV4AzhvooEclrOH0xaugmqGsIfFgOE/pIz4fMc4Ef+5HSQqTEug2S9JZIWDR47duDSLfaA==", + "dev": true, + "requires": { + "async-limiter": "1.0.0", + "safe-buffer": "5.1.0" + } + }, "xml-name-validator": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-2.0.1.tgz", - "integrity": "sha1-TYuPHszTQZqjYgYb7O9RXh5VljU=", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz", + "integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==", "dev": true }, "yallist": { diff --git a/package.json b/package.json index 6128f60..4c92be2 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ "eslint": "^4.11.0", "eslint-config-airbnb-base": "^12.1.0", "eslint-plugin-import": "^2.8.0", - "jsdom": "^11.4.0", + "jsdom": "^11.6.2", "nyc": "^11.3.0", "rollup": "0.25", "rollup-plugin-commonjs": "^8.2.6", diff --git a/src/chartframe.js b/src/chartframe.js index 841d4a8..2825806 100644 --- a/src/chartframe.js +++ b/src/chartframe.js @@ -132,14 +132,14 @@ function chartFrame(configObject) { .data(title.split('|')) .enter() .append('tspan') - .html(d => d) + .text(d => d) .attr('y', (d, i) => (titlePosition.y + (i * titleLineHeight))) .attr('x', titlePosition.x) .call(attributeStyle, titleStyle); }); p.selectAll('text.chart-title tspan') - .html(d => d) + .text(d => d) .transition(transition) .attr('y', (d, i) => (titlePosition.y + (i * titleLineHeight))) .attr('x', titlePosition.x) @@ -158,7 +158,7 @@ function chartFrame(configObject) { .data(subtitle.split('|')) .enter() .append('tspan') - .html(d => d) + .text(d => d) .attr('id', `${containerClass}subtitle`) .attr('y', (d, i) => { if (titleLineCount > 1) { @@ -172,7 +172,7 @@ function chartFrame(configObject) { }); p.selectAll('text.chart-subtitle tspan') - .html(d => d) + .text(d => d) .transition(transition) .attr('y', (d, i) => { if (titleLineCount > 1) { @@ -195,7 +195,7 @@ function chartFrame(configObject) { .data(source.split('|')) .enter() .append('tspan') - .html(d => d) + .text(d => d) .attr('id', `${containerClass}source`) .attr('y', (d, i) => { if (sourcePosition.y) { @@ -208,7 +208,7 @@ function chartFrame(configObject) { }); p.selectAll('text.chart-source tspan') - .html(d => d) + .text(d => d) .transition(transition) .attr('y', (d, i) => { if (sourcePosition.y) { @@ -228,7 +228,7 @@ function chartFrame(configObject) { .append('text') .attr('class', 'chart-copyright') .append('tspan') - .html(d => d) + .text(d => d) .attr('x', sourcePosition.x) .attr('y', () => { if (sourceLineCount > 1) { @@ -250,19 +250,21 @@ function chartFrame(configObject) { } // watermark - - p.selectAll('g.chart-watermark') - .data([0]) - .enter() - .append('g') - .attr('class', 'chart-watermark') - .html(watermarkMarkup) - .attr('transform', `translate(${graphicWidth - watermarkSize - watermarkOffset},${graphicHeight - watermarkSize - watermarkOffset}) scale(${watermarkSize / 100}) `); - - p.selectAll('g.chart-watermark') - .html(watermarkMarkup) - .transition() - .attr('transform', `translate(${graphicWidth - watermarkSize - watermarkOffset},${graphicHeight - watermarkSize - watermarkOffset}) scale(${watermarkSize / 100}) `); + // @TODO find way to remove the Selection.html calls for better JSDom usage. + if (p.node().ownerDocument.doctype.name !== 'svg') { + p.selectAll('g.chart-watermark') + .data([0]) + .enter() + .append('g') + .attr('class', 'chart-watermark') + .html(watermarkMarkup) + .attr('transform', `translate(${graphicWidth - watermarkSize - watermarkOffset},${graphicHeight - watermarkSize - watermarkOffset}) scale(${watermarkSize / 100}) `); + + p.selectAll('g.chart-watermark') + .html(watermarkMarkup) + .transition() + .attr('transform', `translate(${graphicWidth - watermarkSize - watermarkOffset},${graphicHeight - watermarkSize - watermarkOffset}) scale(${watermarkSize / 100}) `); + } // plot area (where you put the chart itself) p.selectAll('g.chart-plot') @@ -278,7 +280,7 @@ function chartFrame(configObject) { .duration(0) .attr('transform', `translate(${margin.left},${margin.top})`); - if (showDownloadPngButtons) { + if (showDownloadPngButtons && p.node().ownerDocument.doctype.name !== 'svg') { let parent; if (p.node().nodeName.toLowerCase() === 'svg') { parent = d3.select(p.node().parentNode); diff --git a/test/g-chartframe.test.js b/test/g-chartframe.test.js index 7c4b2de..a6587d6 100644 --- a/test/g-chartframe.test.js +++ b/test/g-chartframe.test.js @@ -20,6 +20,19 @@ tape('chartFrame works outside browser', (test) => { test.end(); }); +tape('chartFrame works outside browser in a pure SVG context', (test) => { + const { JSDOM } = jsdom; + const defaultFrame = chartFrame.frame(); + const dom = new JSDOM('', { + contentType: 'image/svg+xml', + }); + const chartContainer = d3.select(dom.window.document.querySelector('svg')); + chartContainer.call(defaultFrame); + test.equal(chartContainer.select('.chart-title').text(), 'Title: A description of the charts purpose'); + test.end(); +}); + + tape('chartFrame can be extended', (test) => { const defaultFrame = chartFrame.frame(); defaultFrame.extend('llama', 'duck'); From 0c2e1a4072bdde729e7ceb6dce0d6af8404e6796 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=86ndrew=20Rininsland?= Date: Wed, 12 Dec 2018 15:44:43 +0000 Subject: [PATCH 02/10] Removes unnecessary transitions from chartframe.js --- package-lock.json | 25 ++++++++++--------- package.json | 4 +-- src/chartframe.js | 15 ++--------- test/__snapshots__/printframe.test.js.snap | 3 +++ test/__snapshots__/socialframe.test.js.snap | 3 +++ test/__snapshots__/videoframe.test.js.snap | 3 +++ test/__snapshots__/webframe-l.test.js.snap | 3 +++ .../webframe-m-default.test.js.snap | 3 +++ test/__snapshots__/webframe-m.test.js.snap | 3 +++ test/__snapshots__/webframe-s.test.js.snap | 3 +++ test/chartframe.test.js | 1 - test/printframe.test.js | 1 - test/socialframe.test.js | 1 - test/videoframe.test.js | 1 - test/webframe-l.test.js | 1 - test/webframe-m-default.test.js | 1 - test/webframe-m.test.js | 1 - test/webframe-s.test.js | 1 - 18 files changed, 38 insertions(+), 35 deletions(-) diff --git a/package-lock.json b/package-lock.json index b858d5c..f78a754 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7956,28 +7956,29 @@ } }, "rollup-plugin-babel": { - "version": "4.0.0-beta.0", - "resolved": "https://registry.npmjs.org/rollup-plugin-babel/-/rollup-plugin-babel-4.0.0-beta.0.tgz", - "integrity": "sha512-tmGAZQO4L015R7STTvUr7f/5Y47GZipQ8WKOkTgwod0K5BfugkpuGTfw7N+wyvYrXMiNTXM4zb5nvAgkIgYq6g==", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/rollup-plugin-babel/-/rollup-plugin-babel-4.1.0.tgz", + "integrity": "sha512-4IYv/yTNyH4P/Cma1mWdqy42gc051i1mTe/6oe8F055WzJGSb2qs1mSDwZTo93wA6kMBgHBIR/OcBk7JMnL59Q==", "dev": true, "requires": { - "rollup-pluginutils": "^1.5.0" + "@babel/helper-module-imports": "^7.0.0", + "rollup-pluginutils": "^2.3.0" }, "dependencies": { "estree-walker": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.2.1.tgz", - "integrity": "sha1-va/oCVOD2EFNXcLs9MkXO225QS4=", + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.5.2.tgz", + "integrity": "sha512-XpCnW/AE10ws/kDAs37cngSkvgIR8aN3G0MS85m7dUpuK2EREo9VJ00uvw6Dg/hXEpfsE1I1TvJOJr+Z+TL+ig==", "dev": true }, "rollup-pluginutils": { - "version": "1.5.2", - "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-1.5.2.tgz", - "integrity": "sha1-HhVud4+UtyVb+hs9AXi+j1xVJAg=", + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.3.3.tgz", + "integrity": "sha512-2XZwja7b6P5q4RZ5FhyX1+f46xi1Z3qBKigLRZ6VTZjwbN0K1IFGMlwm06Uu0Emcre2Z63l77nq/pzn+KxIEoA==", "dev": true, "requires": { - "estree-walker": "^0.2.1", - "minimatch": "^3.0.2" + "estree-walker": "^0.5.2", + "micromatch": "^2.3.11" } } } diff --git a/package.json b/package.json index fd1fd84..72f5ada 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "minify": "uglifyjs --compress --minify -- build/g-chartframe.js > build/g-chartframe.min.js", "test": "jest --coverage", "prepare": "npm run build", - "report-coverage": "nyc report --reporter=lcov && codecov" + "report-coverage": "codecov" }, "homepage": "https://github.com/Financial-Times/g-chartframe/", "contributors": [ @@ -47,7 +47,7 @@ "npm-prepublish": "^1.2.3", "prettier-eslint": "^8.8.2", "rollup": "0.25", - "rollup-plugin-babel": "^4.0.0-beta.0", + "rollup-plugin-babel": "^4.1.0", "rollup-plugin-commonjs": "^8.2.6", "rollup-plugin-node-resolve": "^3.0.0", "uglify-es": "^3.1.10", diff --git a/src/chartframe.js b/src/chartframe.js index 0523e5a..3424122 100644 --- a/src/chartframe.js +++ b/src/chartframe.js @@ -74,8 +74,7 @@ function chartFrame(configObject) { p.attr('role', 'img'); if (p.node().nodeName.toLowerCase() === 'svg') { - p.transition(transition) - .attr('width', graphicWidth) + p.attr('width', graphicWidth) .attr('height', graphicHeight) .attr( 'viewBox', @@ -118,7 +117,6 @@ function chartFrame(configObject) { .attr('class', 'chart-background'); p.selectAll('rect.chart-background') - .transition(transition) .attr('x', 0) .attr('y', 0) .attr('width', graphicWidth) @@ -155,7 +153,6 @@ function chartFrame(configObject) { .attr('class', 'chart-goalposts'); p.selectAll('path.chart-goalposts') - .transition(transition) .attr('d', d => d) .attr('stroke-width', 0.3) .attr('fill', 'none') @@ -191,7 +188,6 @@ function chartFrame(configObject) { p.selectAll('text.chart-title tspan') .html(d => d) - .transition(transition) .attr('y', (d, i) => titlePosition.y + i * titleLineHeight) .attr('x', titlePosition.x) .call(attributeStyle, titleStyle); @@ -230,7 +226,6 @@ function chartFrame(configObject) { p.selectAll('text.chart-subtitle tspan') .html(d => d) - .transition(transition) .attr('y', (d, i) => { if (titleLineCount > 1) { return ( @@ -278,7 +273,6 @@ function chartFrame(configObject) { p.selectAll('text.chart-source tspan') .html(d => d) - .transition(transition) .attr('y', (d, i) => { if (sourcePosition.y) { return sourcePosition.y + i * sourceLineHeight; @@ -364,7 +358,6 @@ function chartFrame(configObject) { p.selectAll('g.chart-watermark') .html(watermarkMarkup) - .transition() .attr( 'transform', `translate(${graphicWidth - @@ -394,10 +387,7 @@ function chartFrame(configObject) { plot = p.selectAll('g.chart-plot'); - // I have no idea why this insanity even works. @TODO remove with extreme prejudice. -ae - plot.transition(transition) - .duration(0) - .attr('transform', `translate(${margin.left},${margin.top})`); + plot.attr('transform', `translate(${margin.left},${margin.top})`); if (showDownloadPngButtons) { let parent; @@ -720,7 +710,6 @@ function chartFrame(configObject) { a11yPlotPresentation, a11yTitle, autoPosition, - // axisAlign, // @FIX This is undef? containerClass, copyright, copyrightStyle, diff --git a/test/__snapshots__/printframe.test.js.snap b/test/__snapshots__/printframe.test.js.snap index 7fc6bed..ed302a5 100644 --- a/test/__snapshots__/printframe.test.js.snap +++ b/test/__snapshots__/printframe.test.js.snap @@ -5,7 +5,10 @@ exports[`webframe-s renders as expected with defaults 1`] = ` aria-labelledby="ft-printgraphic__chart-a11y-title ft-printgraphic__chart-a11y-desc" class="ft-printgraphic" font-family="MetricWeb,sans-serif" + height="192.75584678001326" role="img" + viewBox="0 0 318.1888794273013 192.75584678001326" + width="318.1888794273013" xmlns="http://www.w3.org/2000/svg" > <title diff --git a/test/__snapshots__/videoframe.test.js.snap b/test/__snapshots__/videoframe.test.js.snap index b6f4a9d..55c83fc 100644 --- a/test/__snapshots__/videoframe.test.js.snap +++ b/test/__snapshots__/videoframe.test.js.snap @@ -5,7 +5,10 @@ exports[`videoframe renders as expected with defaults 1`] = ` aria-labelledby="ft-videographic__chart-a11y-title ft-videographic__chart-a11y-desc" class="ft-videographic" font-family="MetricWeb,sans-serif" + height="1080" role="img" + viewBox="0 0 1920 1080" + width="1920" xmlns="http://www.w3.org/2000/svg" > <title diff --git a/test/__snapshots__/webframe-l.test.js.snap b/test/__snapshots__/webframe-l.test.js.snap index 86ad27f..ff54978 100644 --- a/test/__snapshots__/webframe-l.test.js.snap +++ b/test/__snapshots__/webframe-l.test.js.snap @@ -5,7 +5,10 @@ exports[`webframe-l renders as expected with defaults 1`] = ` aria-labelledby="ft-webgraphic-l__chart-a11y-title ft-webgraphic-l__chart-a11y-desc" class="ft-webgraphic-l" font-family="MetricWeb,sans-serif" + height="700" role="img" + viewBox="0 0 1180 700" + width="1180" xmlns="http://www.w3.org/2000/svg" > <title diff --git a/test/__snapshots__/webframe-m-default.test.js.snap b/test/__snapshots__/webframe-m-default.test.js.snap index 95ae503..7a2f0bb 100644 --- a/test/__snapshots__/webframe-m-default.test.js.snap +++ b/test/__snapshots__/webframe-m-default.test.js.snap @@ -5,7 +5,10 @@ exports[`webframe-m-default renders as expected with defaults 1`] = ` aria-labelledby="ft-webgraphic-m-default__chart-a11y-title ft-webgraphic-m-default__chart-a11y-desc" class="ft-webgraphic-m-default" font-family="MetricWeb,sans-serif" + height="500" role="img" + viewBox="0 0 700 500" + width="700" xmlns="http://www.w3.org/2000/svg" > <title diff --git a/test/__snapshots__/webframe-m.test.js.snap b/test/__snapshots__/webframe-m.test.js.snap index 06f0146..99c1b7f 100644 --- a/test/__snapshots__/webframe-m.test.js.snap +++ b/test/__snapshots__/webframe-m.test.js.snap @@ -5,7 +5,10 @@ exports[`webframe-m renders as expected with defaults 1`] = ` aria-labelledby="ft-webgraphic-m__chart-a11y-title ft-webgraphic-m__chart-a11y-desc" class="ft-webgraphic-m" font-family="MetricWeb,sans-serif" + height="500" role="img" + viewBox="0 0 700 500" + width="700" xmlns="http://www.w3.org/2000/svg" > <title diff --git a/test/__snapshots__/webframe-s.test.js.snap b/test/__snapshots__/webframe-s.test.js.snap index da9cf90..989de11 100644 --- a/test/__snapshots__/webframe-s.test.js.snap +++ b/test/__snapshots__/webframe-s.test.js.snap @@ -5,7 +5,10 @@ exports[`webframe-s renders as expected with defaults 1`] = ` aria-labelledby="ft-webgraphic-s__chart-a11y-title ft-webgraphic-s__chart-a11y-desc" class="ft-webgraphic-s" font-family="MetricWeb,sans-serif" + height="400" role="img" + viewBox="0 0 300 400" + width="300" xmlns="http://www.w3.org/2000/svg" > <title diff --git a/test/chartframe.test.js b/test/chartframe.test.js index 31a46f5..745d2e1 100644 --- a/test/chartframe.test.js +++ b/test/chartframe.test.js @@ -1,6 +1,5 @@ import * as fs from 'fs'; import * as d3 from 'd3-selection'; -import 'd3-transition'; import jsdom from 'jsdom'; import frame from '../src/chartframe'; diff --git a/test/printframe.test.js b/test/printframe.test.js index a2ad500..41a2f70 100644 --- a/test/printframe.test.js +++ b/test/printframe.test.js @@ -1,6 +1,5 @@ import * as fs from 'fs'; import * as d3 from 'd3-selection'; -import 'd3-transition'; import jsdom from 'jsdom'; import printframe from '../src/printframe'; diff --git a/test/socialframe.test.js b/test/socialframe.test.js index 31ff516..62fe5f4 100644 --- a/test/socialframe.test.js +++ b/test/socialframe.test.js @@ -1,6 +1,5 @@ import * as fs from 'fs'; import * as d3 from 'd3-selection'; -import 'd3-transition'; import jsdom from 'jsdom'; import socialframe from '../src/socialframe'; diff --git a/test/videoframe.test.js b/test/videoframe.test.js index 8d6c18e..0f0109a 100644 --- a/test/videoframe.test.js +++ b/test/videoframe.test.js @@ -1,6 +1,5 @@ import * as fs from 'fs'; import * as d3 from 'd3-selection'; -import 'd3-transition'; import jsdom from 'jsdom'; import videoframe from '../src/videoframe'; diff --git a/test/webframe-l.test.js b/test/webframe-l.test.js index a61e59e..5c894b9 100644 --- a/test/webframe-l.test.js +++ b/test/webframe-l.test.js @@ -1,6 +1,5 @@ import * as fs from 'fs'; import * as d3 from 'd3-selection'; -import 'd3-transition'; import jsdom from 'jsdom'; import webframeL from '../src/webframe-l'; diff --git a/test/webframe-m-default.test.js b/test/webframe-m-default.test.js index 5820c81..b5375f8 100644 --- a/test/webframe-m-default.test.js +++ b/test/webframe-m-default.test.js @@ -1,6 +1,5 @@ import * as fs from 'fs'; import * as d3 from 'd3-selection'; -import 'd3-transition'; import jsdom from 'jsdom'; import webframeMDefault from '../src/webframe-m-default'; diff --git a/test/webframe-m.test.js b/test/webframe-m.test.js index 1ad2651..848063c 100644 --- a/test/webframe-m.test.js +++ b/test/webframe-m.test.js @@ -1,6 +1,5 @@ import * as fs from 'fs'; import * as d3 from 'd3-selection'; -import 'd3-transition'; import jsdom from 'jsdom'; import webframeM from '../src/webframe-m'; diff --git a/test/webframe-s.test.js b/test/webframe-s.test.js index 50fdaf0..f72e944 100644 --- a/test/webframe-s.test.js +++ b/test/webframe-s.test.js @@ -1,6 +1,5 @@ import * as fs from 'fs'; import * as d3 from 'd3-selection'; -import 'd3-transition'; import jsdom from 'jsdom'; import webframeS from '../src/webframe-s'; From f2d9653fd6278f47d838aa757afae96f7824582d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=86ndrew=20Rininsland?= <andrew.rininsland@ft.com> Date: Wed, 12 Dec 2018 16:34:19 +0000 Subject: [PATCH 03/10] Removed half the stupid .data() calls --- readme.md | 4 +- src/chartframe.js | 123 +++++------------- src/printframe.js | 2 +- src/socialframe.js | 2 +- src/videoframe.js | 2 +- src/webframe-l.js | 2 +- src/webframe-m-default.js | 2 +- src/webframe-m.js | 2 +- src/webframe-s.js | 2 +- test/__snapshots__/printframe.test.js.snap | 12 +- test/__snapshots__/socialframe.test.js.snap | 6 + test/__snapshots__/videoframe.test.js.snap | 5 + test/__snapshots__/webframe-l.test.js.snap | 6 + .../webframe-m-default.test.js.snap | 6 + test/__snapshots__/webframe-m.test.js.snap | 6 + test/__snapshots__/webframe-s.test.js.snap | 6 + 16 files changed, 88 insertions(+), 100 deletions(-) diff --git a/readme.md b/readme.md index 876e76b..10b5575 100644 --- a/readme.md +++ b/readme.md @@ -99,12 +99,12 @@ A convenience setter: Set as many values as you choose by passing a big object t This get the frame to try and automatically comput its top margin. _Not really reccomended though it it used by the pre-packaged webframes_. -<a id="frame-backgroundColour" href="#frame-backgroundColour">#</a>frame.**backgroundColour(_string_)** +<a id="frame-backgroundColor" href="#frame-backgroundColor">#</a>frame.**backgroundColor(_string_)** Set the background colour of the frame. For the single argument you can use the same css color naming schemes that you use in HTML, whether that's color names (that is red), rgb values (that is rgb(255,0,0)), hex values, rgba values, etc. If no argument is specified returns the current value. ```js -myFrame.backgroundColour('#00FF00'); +myFrame.backgroundColor('#00FF00'); ``` <a id="frame-containerClass" href="#frame-containerClass">#</a>frame.**containerClass(_string_)** diff --git a/src/chartframe.js b/src/chartframe.js index 3424122..1eeab28 100644 --- a/src/chartframe.js +++ b/src/chartframe.js @@ -6,7 +6,7 @@ function chartFrame(configObject) { let a11yDesc = 'A graphic by the Financial Times'; let a11yPlotPresentation = true; let a11yTitle = 'A chart'; - let backgroundColour; + let backgroundColor; let containerClass = 'g-chartframe'; let copyright = '© FT'; let copyrightStyle = false; @@ -47,7 +47,6 @@ function chartFrame(configObject) { const subtitlePosition = { x: 1, y: 67 }; const sourcePosition = { x: 1 }; const titlePosition = { x: 1, y: 30 }; - const transition = 0.2; const convertFrom = { mm(x) { return x * 2.83464480558843; @@ -107,53 +106,50 @@ function chartFrame(configObject) { } // background - if (backgroundColour !== undefined) { - p.selectAll('rect.chart-background') - .data([backgroundColour]) - .enter() - .append('rect') + if ( + backgroundColor !== undefined && + !p.select('#chart-background').size() + ) { + // @TODO remove second guard; see #62. + p.append('rect') .attr('role', 'presentation') .attr('id', 'chart-background') - .attr('class', 'chart-background'); - - p.selectAll('rect.chart-background') + .attr('class', 'chart-background') .attr('x', 0) .attr('y', 0) .attr('width', graphicWidth) .attr('height', graphicHeight) - .attr('fill', backgroundColour); + .attr('fill', backgroundColor); } - // 'blackbar' (the short black bar above web graphics) - if (blackbar) { + // 'blackbar' (the short black bar above web graphics) @TODO remove second guard; see #62. + if (blackbar && !p.selectAll('rect.black-bar').size()) { p.append('rect') + .attr('class', 'black-bar') .attr('width', 60) .attr('height', 4) .style('fill', blackbar); } - if (whitebar) { + + if (whitebar && !p.selectAll('rect.white-bar').size()) { p.append('rect') + .attr('class', 'white-bar') .attr('width', 60) .attr('height', 4) .style('fill', whitebar) .attr('transform', `translate(${margin.left},${margin.left})`); } - // 'goalposts' (the bit at the top and the bottom of print charts) - if (goalposts) { + // 'goalposts' (the bit at the top and the bottom of print charts) @TODO remove second guard; see #62. + if (goalposts && !p.selectAll('path.chart-goalposts').size()) { const goalpostPaths = [ `M 0, ${graphicHeight} L ${graphicWidth}, ${graphicHeight}`, `M 0, 15 L 0, 0 L ${graphicWidth}, 0 L ${graphicWidth}, 15`, ]; - p.selectAll('path.chart-goalposts') - .data(goalpostPaths) - .enter() - .append('path') - .attr('class', 'chart-goalposts'); - - p.selectAll('path.chart-goalposts') - .attr('d', d => d) + p.append('path') + .attr('class', 'chart-goalposts') + .attr('d', goalpostPaths) .attr('stroke-width', 0.3) .attr('fill', 'none') .attr('stroke', goalposts); @@ -163,12 +159,9 @@ function chartFrame(configObject) { const subtitleLineCount = subtitle ? subtitle.split('|').length : 0; const sourceLineCount = source ? source.split('|').length : 0; - // title - if (title) { - p.selectAll('text.chart-title') - .data([title]) - .enter() - .append('text') + // title; @TODO remove existence guard see #62 + if (title && !p.select('text.chart-title').size()) { + p.append('text') .attr('class', 'chart-title') .attr('id', `${containerClass}title`) .call((titleText) => { @@ -185,20 +178,12 @@ function chartFrame(configObject) { .attr('x', titlePosition.x) .call(attributeStyle, titleStyle); }); - - p.selectAll('text.chart-title tspan') - .html(d => d) - .attr('y', (d, i) => titlePosition.y + i * titleLineHeight) - .attr('x', titlePosition.x) - .call(attributeStyle, titleStyle); } - if (subtitle) { + // @TODO remove existence guard see #62 + if (subtitle && !p.select('text.chart-subtitle').size()) { // subtitle - p.selectAll('text.chart-subtitle') - .data([subtitle]) - .enter() - .append('text') + p.append('text') .attr('id', `${containerClass}subtitle`) .attr('class', 'chart-subtitle') .call((subtitleText) => { @@ -223,29 +208,11 @@ function chartFrame(configObject) { .attr('x', subtitlePosition.x) .call(attributeStyle, subtitleStyle); }); - - p.selectAll('text.chart-subtitle tspan') - .html(d => d) - .attr('y', (d, i) => { - if (titleLineCount > 1) { - return ( - titlePosition.y + - titleLineCount * titleLineHeight + - subtitleLineHeight * i - ); - } - return subtitlePosition.y + i * subtitleLineHeight; - }) - .attr('x', subtitlePosition.x) - .call(attributeStyle, subtitleStyle); } - if (source) { - // source - p.selectAll('text.chart-source') - .data([source]) - .enter() - .append('text') + // source; @TODO remove second existence check see #62 + if (source && !p.selectAll('text.chart-source').size()) { + p.append('text') .attr('class', 'chart-source') .attr('id', `${containerClass}source`) .call((sourceText) => { @@ -270,33 +237,14 @@ function chartFrame(configObject) { .attr('x', subtitlePosition.x) .call(attributeStyle, subtitleStyle); }); - - p.selectAll('text.chart-source tspan') - .html(d => d) - .attr('y', (d, i) => { - if (sourcePosition.y) { - return sourcePosition.y + i * sourceLineHeight; - } - return ( - graphicHeight - - (margin.bottom - sourcePlotYOffset) + - sourceLineHeight * 1.5 + - i * sourceLineHeight - ); - }) - .attr('x', sourcePosition.x) - .call(attributeStyle, sourceStyle); } // copyright - if (copyrightStyle) { - p.selectAll('text.chart-copyright') - .data([copyright]) - .enter() - .append('text') + if (copyrightStyle && !p.selectAll('text.chart-copyright').size()) { + p.append('text') .attr('class', 'chart-copyright') .append('tspan') - .html(d => d) + .html(copyright) .attr('x', sourcePosition.x) .attr('y', () => { if (sourceLineCount > 1) { @@ -313,7 +261,6 @@ function chartFrame(configObject) { sourceLineHeight * 2.5 ); }) - .call(attributeStyle, copyrightStyle); } @@ -456,9 +403,9 @@ function chartFrame(configObject) { return frame; }; - frame.backgroundColour = (x) => { - if (x === undefined) return backgroundColour; - backgroundColour = x; + frame.backgroundColor = (x) => { + if (x === undefined) return backgroundColor; + backgroundColor = x; return frame; }; diff --git a/src/printframe.js b/src/printframe.js index 82ff585..092a324 100644 --- a/src/printframe.js +++ b/src/printframe.js @@ -4,7 +4,7 @@ function printFrame(configObject) { const f = frame() .containerClass('ft-printgraphic') .autoPosition(true) - .backgroundColour('#FFF') + .backgroundColor('#FFF') .goalposts('#000') .units('mm') .width(112.25) // these are after the units are set so they are converted from mm to px diff --git a/src/socialframe.js b/src/socialframe.js index 3bc4056..7dee78e 100644 --- a/src/socialframe.js +++ b/src/socialframe.js @@ -5,7 +5,7 @@ function socialFrame(configObject) { const f = frame() .autoPosition(true) .containerClass('ft-socialgraphic') - .backgroundColour('#262a33') + .backgroundColor('#262a33') .whitebar('#fff') .width(612) .height(612) diff --git a/src/videoframe.js b/src/videoframe.js index 967eed1..d8ad0d6 100644 --- a/src/videoframe.js +++ b/src/videoframe.js @@ -3,7 +3,7 @@ import frame from './chartframe'; function videoFrame(configObject) { const f = frame() .autoPosition(true) - .backgroundColour('#262a33') + .backgroundColor('#262a33') .containerClass('ft-videographic') .width(1920) .height(1080) diff --git a/src/webframe-l.js b/src/webframe-l.js index dc7bd84..91da389 100644 --- a/src/webframe-l.js +++ b/src/webframe-l.js @@ -4,7 +4,7 @@ function webFrameL(configObject) { const f = frame() .autoPosition(true) .containerClass('ft-webgraphic-l') - .backgroundColour('#FFF1E0') + .backgroundColor('#FFF1E0') .width(1180) .height(700) .blackbar('#000') diff --git a/src/webframe-m-default.js b/src/webframe-m-default.js index 745701d..0bc7c0f 100644 --- a/src/webframe-m-default.js +++ b/src/webframe-m-default.js @@ -4,7 +4,7 @@ function webFrameMDefault(configObject) { const f = frame() .autoPosition(true) .containerClass('ft-webgraphic-m-default') - .backgroundColour('#FFF1E0') + .backgroundColor('#FFF1E0') .blackbar('#000') .width(700) .height(500) diff --git a/src/webframe-m.js b/src/webframe-m.js index 892f3f7..67eb244 100644 --- a/src/webframe-m.js +++ b/src/webframe-m.js @@ -4,7 +4,7 @@ function webFrameM(configObject) { const f = frame() .autoPosition(true) .containerClass('ft-webgraphic-m') - .backgroundColour('#FFF1E0') + .backgroundColor('#FFF1E0') .blackbar('#000') .width(700) .height(500) diff --git a/src/webframe-s.js b/src/webframe-s.js index 601ca35..f6993c7 100644 --- a/src/webframe-s.js +++ b/src/webframe-s.js @@ -4,7 +4,7 @@ function webFrameS(configObject) { const f = frame() .autoPosition(true) .containerClass('ft-webgraphic-s') - .backgroundColour('#FFF1E0') + .backgroundColor('#FFF1E0') .blackbar('#000') .width(300) // .watermark(watermarkPathDark) diff --git a/test/__snapshots__/printframe.test.js.snap b/test/__snapshots__/printframe.test.js.snap index ed302a5..5040d42 100644 --- a/test/__snapshots__/printframe.test.js.snap +++ b/test/__snapshots__/printframe.test.js.snap @@ -23,14 +23,20 @@ exports[`webframe-s renders as expected with defaults 1`] = ` </desc> <rect class="chart-background" + fill="#FFF" + height="192.75584678001326" id="chart-background" role="presentation" + width="318.1888794273013" + x="0" + y="0" /> <path class="chart-goalposts" - /> - <path - class="chart-goalposts" + d="M 0, 192.75584678001326 L 318.1888794273013, 192.75584678001326,M 0, 15 L 0, 0 L 318.1888794273013, 0 L 318.1888794273013, 15" + fill="none" + stroke="#000" + stroke-width="0.3" /> <text class="chart-title" diff --git a/test/__snapshots__/socialframe.test.js.snap b/test/__snapshots__/socialframe.test.js.snap index 26fb513..d826841 100644 --- a/test/__snapshots__/socialframe.test.js.snap +++ b/test/__snapshots__/socialframe.test.js.snap @@ -23,10 +23,16 @@ exports[`socialframe renders as expected with defaults 1`] = ` </desc> <rect class="chart-background" + fill="#262a33" + height="612" id="chart-background" role="presentation" + width="612" + x="0" + y="0" /> <rect + class="white-bar" height="4" style="fill: #fff;" transform="translate(40,40)" diff --git a/test/__snapshots__/videoframe.test.js.snap b/test/__snapshots__/videoframe.test.js.snap index 55c83fc..f5006dc 100644 --- a/test/__snapshots__/videoframe.test.js.snap +++ b/test/__snapshots__/videoframe.test.js.snap @@ -23,8 +23,13 @@ exports[`videoframe renders as expected with defaults 1`] = ` </desc> <rect class="chart-background" + fill="#262a33" + height="1080" id="chart-background" role="presentation" + width="1920" + x="0" + y="0" /> <text class="chart-title" diff --git a/test/__snapshots__/webframe-l.test.js.snap b/test/__snapshots__/webframe-l.test.js.snap index ff54978..44f9920 100644 --- a/test/__snapshots__/webframe-l.test.js.snap +++ b/test/__snapshots__/webframe-l.test.js.snap @@ -23,10 +23,16 @@ exports[`webframe-l renders as expected with defaults 1`] = ` </desc> <rect class="chart-background" + fill="#FFF1E0" + height="700" id="chart-background" role="presentation" + width="1180" + x="0" + y="0" /> <rect + class="black-bar" height="4" style="fill: #000;" width="60" diff --git a/test/__snapshots__/webframe-m-default.test.js.snap b/test/__snapshots__/webframe-m-default.test.js.snap index 7a2f0bb..a7ddabf 100644 --- a/test/__snapshots__/webframe-m-default.test.js.snap +++ b/test/__snapshots__/webframe-m-default.test.js.snap @@ -23,10 +23,16 @@ exports[`webframe-m-default renders as expected with defaults 1`] = ` </desc> <rect class="chart-background" + fill="#FFF1E0" + height="500" id="chart-background" role="presentation" + width="700" + x="0" + y="0" /> <rect + class="black-bar" height="4" style="fill: #000;" width="60" diff --git a/test/__snapshots__/webframe-m.test.js.snap b/test/__snapshots__/webframe-m.test.js.snap index 99c1b7f..d224cfd 100644 --- a/test/__snapshots__/webframe-m.test.js.snap +++ b/test/__snapshots__/webframe-m.test.js.snap @@ -23,10 +23,16 @@ exports[`webframe-m renders as expected with defaults 1`] = ` </desc> <rect class="chart-background" + fill="#FFF1E0" + height="500" id="chart-background" role="presentation" + width="700" + x="0" + y="0" /> <rect + class="black-bar" height="4" style="fill: #000;" width="60" diff --git a/test/__snapshots__/webframe-s.test.js.snap b/test/__snapshots__/webframe-s.test.js.snap index 989de11..4c5a0e4 100644 --- a/test/__snapshots__/webframe-s.test.js.snap +++ b/test/__snapshots__/webframe-s.test.js.snap @@ -23,10 +23,16 @@ exports[`webframe-s renders as expected with defaults 1`] = ` </desc> <rect class="chart-background" + fill="#FFF1E0" + height="400" id="chart-background" role="presentation" + width="300" + x="0" + y="0" /> <rect + class="black-bar" height="4" style="fill: #000;" width="60" From 6283f37b32331ff55414a9d3629cadd869150d8b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=86ndrew=20Rininsland?= <andrew.rininsland@ft.com> Date: Wed, 12 Dec 2018 16:54:43 +0000 Subject: [PATCH 04/10] All useless selections removed hurrah :tada: --- src/chartframe.js | 63 +++++++------------ test/__snapshots__/printframe.test.js.snap | 5 -- test/__snapshots__/videoframe.test.js.snap | 5 -- test/__snapshots__/webframe-l.test.js.snap | 5 -- .../webframe-m-default.test.js.snap | 5 -- test/__snapshots__/webframe-m.test.js.snap | 5 -- test/__snapshots__/webframe-s.test.js.snap | 5 -- test/chartframe.test.js | 1 + 8 files changed, 22 insertions(+), 72 deletions(-) diff --git a/src/chartframe.js b/src/chartframe.js index 1eeab28..ab09862 100644 --- a/src/chartframe.js +++ b/src/chartframe.js @@ -285,57 +285,35 @@ function chartFrame(configObject) { plotAdjuster; } - // watermark - - p.selectAll('g.chart-watermark') - .data([0]) - .enter() - .append('g') - .attr('class', 'chart-watermark') - .html(watermarkMarkup) - .attr('role', 'presentation') - .attr( - 'transform', - `translate(${graphicWidth - - watermarkWidth - - watermarkOffsetX},${graphicHeight - - watermarkHeight - - watermarkOffsetY}) scale(1) `, - ); - - p.selectAll('g.chart-watermark') - .html(watermarkMarkup) - .attr( - 'transform', - `translate(${graphicWidth - + // watermark; @TODO remove existence check (#62) + if (watermarkMarkup && !p.selectAll('g.chart-watermark').size()) { + p.append('g') + .attr('class', 'chart-watermark') + .html(watermarkMarkup) + .attr('role', 'presentation') + .attr( + 'transform', + `translate(${graphicWidth - watermarkWidth - watermarkOffsetX},${graphicHeight - watermarkHeight - watermarkOffsetY}) scale(1) `, - ); + ); + } // plot area (where you put the chart itself) - if (a11yPlotPresentation) { - p.selectAll('g.chart-plot') - .data([0]) - .enter() - .append('g') - .attr('class', 'chart-plot') - .attr('role', 'presentation') // include this extra role if a11yPlotPresentation - .attr('transform', `translate(${margin.left},${margin.top})`); + if (!p.selectAll('g.chart-plot').size()) { + plot = p.append('g').attr('class', 'chart-plot'); } else { - p.selectAll('g.chart-plot') - .data([0]) - .enter() - .append('g') - .attr('class', 'chart-plot') - .attr('transform', `translate(${margin.left},${margin.top})`); + plot = p.select('g.chart-plot'); } - plot = p.selectAll('g.chart-plot'); - plot.attr('transform', `translate(${margin.left},${margin.top})`); + if (a11yPlotPresentation) { + plot.attr('role', 'presentation'); // include this extra role if a11yPlotPresentation + } + if (showDownloadPngButtons) { let parent; if (p.node().nodeName.toLowerCase() === 'svg') { @@ -344,11 +322,12 @@ function chartFrame(configObject) { parent = d3.select(p.node()); } - // Prevent this from being rendered twice - if (parent.selectAll('.button-holder').size() === 0) { + // Prevent this from being rendered twice; @TODO remove check (#62) + if (!parent.selectAll('.button-holder').size()) { const holder = parent .append('div') .attr('class', 'button-holder'); + holder .append('button') .attr('class', 'save-png-button save-png-button__1x') diff --git a/test/__snapshots__/printframe.test.js.snap b/test/__snapshots__/printframe.test.js.snap index 5040d42..8471a67 100644 --- a/test/__snapshots__/printframe.test.js.snap +++ b/test/__snapshots__/printframe.test.js.snap @@ -85,11 +85,6 @@ exports[`webframe-s renders as expected with defaults 1`] = ` Source: research </tspan> </text> - <g - class="chart-watermark" - role="presentation" - transform="translate(154.1888794273013,182.75584678001326) scale(1) " - /> <g class="chart-plot" role="presentation" diff --git a/test/__snapshots__/videoframe.test.js.snap b/test/__snapshots__/videoframe.test.js.snap index f5006dc..f3adc90 100644 --- a/test/__snapshots__/videoframe.test.js.snap +++ b/test/__snapshots__/videoframe.test.js.snap @@ -78,11 +78,6 @@ exports[`videoframe renders as expected with defaults 1`] = ` Source: research </tspan> </text> - <g - class="chart-watermark" - role="presentation" - transform="translate(1756,1070) scale(1) " - /> <g class="chart-plot" role="presentation" diff --git a/test/__snapshots__/webframe-l.test.js.snap b/test/__snapshots__/webframe-l.test.js.snap index 44f9920..7e7a848 100644 --- a/test/__snapshots__/webframe-l.test.js.snap +++ b/test/__snapshots__/webframe-l.test.js.snap @@ -96,11 +96,6 @@ exports[`webframe-l renders as expected with defaults 1`] = ` © FT </tspan> </text> - <g - class="chart-watermark" - role="presentation" - transform="translate(1016,690) scale(1) " - /> <g class="chart-plot" role="presentation" diff --git a/test/__snapshots__/webframe-m-default.test.js.snap b/test/__snapshots__/webframe-m-default.test.js.snap index a7ddabf..adb8f37 100644 --- a/test/__snapshots__/webframe-m-default.test.js.snap +++ b/test/__snapshots__/webframe-m-default.test.js.snap @@ -96,11 +96,6 @@ exports[`webframe-m-default renders as expected with defaults 1`] = ` © FT </tspan> </text> - <g - class="chart-watermark" - role="presentation" - transform="translate(536,490) scale(1) " - /> <g class="chart-plot" role="presentation" diff --git a/test/__snapshots__/webframe-m.test.js.snap b/test/__snapshots__/webframe-m.test.js.snap index d224cfd..e3d399b 100644 --- a/test/__snapshots__/webframe-m.test.js.snap +++ b/test/__snapshots__/webframe-m.test.js.snap @@ -96,11 +96,6 @@ exports[`webframe-m renders as expected with defaults 1`] = ` © FT </tspan> </text> - <g - class="chart-watermark" - role="presentation" - transform="translate(536,490) scale(1) " - /> <g class="chart-plot" role="presentation" diff --git a/test/__snapshots__/webframe-s.test.js.snap b/test/__snapshots__/webframe-s.test.js.snap index 4c5a0e4..a9c0d67 100644 --- a/test/__snapshots__/webframe-s.test.js.snap +++ b/test/__snapshots__/webframe-s.test.js.snap @@ -96,11 +96,6 @@ exports[`webframe-s renders as expected with defaults 1`] = ` © FT </tspan> </text> - <g - class="chart-watermark" - role="presentation" - transform="translate(136,390) scale(1) " - /> <g class="chart-plot" role="presentation" diff --git a/test/chartframe.test.js b/test/chartframe.test.js index 745d2e1..3a78c21 100644 --- a/test/chartframe.test.js +++ b/test/chartframe.test.js @@ -71,6 +71,7 @@ test('chartframe adds a11y stuff', () => { title: false, a11yTitle: 'This is an accessible title', a11yDesc: 'This is an extended a11y description', + watermark: '<text>Holla</text>', }); const dom = new JSDOM(fs.readFileSync('test/scaffold.html')); From e031c7fec40e052fcfeadc3a6e12a76957b0688f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=86ndrew=20Rininsland?= <andrew.rininsland@ft.com> Date: Wed, 12 Dec 2018 17:07:51 +0000 Subject: [PATCH 05/10] Removes dependency on d3-transition --- package-lock.json | 47 ----------------------------------------------- package.json | 1 - 2 files changed, 48 deletions(-) diff --git a/package-lock.json b/package-lock.json index f78a754..936cb79 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2357,58 +2357,11 @@ "integrity": "sha1-IegLK+hYD5i0aPN5QwZisEbDStI=", "dev": true }, - "d3-color": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.0.3.tgz", - "integrity": "sha1-vHZD/KjlOoNH4vva/6I2eWtYUJs=", - "dev": true - }, - "d3-dispatch": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.3.tgz", - "integrity": "sha1-RuFJHqqbWMNY/OW+TovtYm54cfg=", - "dev": true - }, - "d3-ease": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.3.tgz", - "integrity": "sha1-aL+8NJM4o4DETYrMT7wzBKotjA4=", - "dev": true - }, - "d3-interpolate": { - "version": "1.1.5", - "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.1.5.tgz", - "integrity": "sha1-aeCZ/zkhRxblY8muw+qdHqS4p58=", - "dev": true, - "requires": { - "d3-color": "1" - } - }, "d3-selection": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.1.0.tgz", "integrity": "sha1-GZhoSJZIj4OcoDchI9o08dMYgJw=" }, - "d3-timer": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.7.tgz", - "integrity": "sha512-vMZXR88XujmG/L5oB96NNKH5lCWwiLM/S2HyyAQLcjWJCloK5shxta4CwOFYLZoY3AWX73v8Lgv4cCAdWtRmOA==", - "dev": true - }, - "d3-transition": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-1.1.0.tgz", - "integrity": "sha1-z8hcdOUjkyQpBUZiNXKZBWDDlm8=", - "dev": true, - "requires": { - "d3-color": "1", - "d3-dispatch": "1", - "d3-ease": "1", - "d3-interpolate": "1", - "d3-selection": "^1.1.0", - "d3-timer": "1" - } - }, "dashdash": { "version": "1.14.1", "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz", diff --git a/package.json b/package.json index 72f5ada..61cbdd9 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,6 @@ "babel-core": "^7.0.0-bridge.0", "babel-jest": "^23.6.0", "codecov": "^3.0.0", - "d3-transition": "^1.1.0", "eslint": "^4.11.0", "eslint-config-airbnb-base": "^12.1.0", "eslint-plugin-import": "^2.8.0", From e5f77ad9d3fd4bf69860f648e61b3c91ed8efa36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=86ndrew=20Rininsland?= <andrew.rininsland@ft.com> Date: Thu, 13 Dec 2018 13:31:21 +0000 Subject: [PATCH 06/10] Possibly breaking -- this should probably be sourceStyle, not subtitleStyle --- src/chartframe.js | 12 ++++++------ test/__snapshots__/printframe.test.js.snap | 2 +- test/__snapshots__/socialframe.test.js.snap | 2 +- test/__snapshots__/videoframe.test.js.snap | 2 +- test/__snapshots__/webframe-l.test.js.snap | 2 +- test/__snapshots__/webframe-m-default.test.js.snap | 2 +- test/__snapshots__/webframe-m.test.js.snap | 2 +- test/__snapshots__/webframe-s.test.js.snap | 2 +- 8 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/chartframe.js b/src/chartframe.js index ab09862..d2198a9 100644 --- a/src/chartframe.js +++ b/src/chartframe.js @@ -234,8 +234,8 @@ function chartFrame(configObject) { i * sourceLineHeight ); }) - .attr('x', subtitlePosition.x) - .call(attributeStyle, subtitleStyle); + .attr('x', sourcePosition.x) + .call(attributeStyle, sourceStyle); }); } @@ -294,10 +294,10 @@ function chartFrame(configObject) { .attr( 'transform', `translate(${graphicWidth - - watermarkWidth - - watermarkOffsetX},${graphicHeight - - watermarkHeight - - watermarkOffsetY}) scale(1) `, + watermarkWidth - + watermarkOffsetX},${graphicHeight - + watermarkHeight - + watermarkOffsetY}) scale(1) `, ); } diff --git a/test/__snapshots__/printframe.test.js.snap b/test/__snapshots__/printframe.test.js.snap index 8471a67..f0578cd 100644 --- a/test/__snapshots__/printframe.test.js.snap +++ b/test/__snapshots__/printframe.test.js.snap @@ -76,7 +76,7 @@ exports[`webframe-s renders as expected with defaults 1`] = ` <tspan fill="#000000" font-family="MetricWeb,sans-serif" - font-size="9.6px" + font-size="7.2px" font-weight="400" id="ft-printgraphicsource" x="7" diff --git a/test/__snapshots__/socialframe.test.js.snap b/test/__snapshots__/socialframe.test.js.snap index d826841..47ba88e 100644 --- a/test/__snapshots__/socialframe.test.js.snap +++ b/test/__snapshots__/socialframe.test.js.snap @@ -76,7 +76,7 @@ exports[`socialframe renders as expected with defaults 1`] = ` <tspan fill="#8e9095" font-family="MetricWeb,sans-serif" - font-size="24px" + font-size="20px" font-weight="400" id="ft-socialgraphicsource" x="40" diff --git a/test/__snapshots__/videoframe.test.js.snap b/test/__snapshots__/videoframe.test.js.snap index f3adc90..335990d 100644 --- a/test/__snapshots__/videoframe.test.js.snap +++ b/test/__snapshots__/videoframe.test.js.snap @@ -69,7 +69,7 @@ exports[`videoframe renders as expected with defaults 1`] = ` <tspan fill="#8e9095" font-family="MetricWeb,sans-serif" - font-size="48px" + font-size="36px" font-weight="400" id="ft-videographicsource" x="207" diff --git a/test/__snapshots__/webframe-l.test.js.snap b/test/__snapshots__/webframe-l.test.js.snap index 7e7a848..0ad2a4c 100644 --- a/test/__snapshots__/webframe-l.test.js.snap +++ b/test/__snapshots__/webframe-l.test.js.snap @@ -74,7 +74,7 @@ exports[`webframe-l renders as expected with defaults 1`] = ` <tspan fill="#66605C" font-family="MetricWeb,sans-serif" - font-size="18" + font-size="16px" id="ft-webgraphic-lsource" x="1" y="663" diff --git a/test/__snapshots__/webframe-m-default.test.js.snap b/test/__snapshots__/webframe-m-default.test.js.snap index adb8f37..8aa779e 100644 --- a/test/__snapshots__/webframe-m-default.test.js.snap +++ b/test/__snapshots__/webframe-m-default.test.js.snap @@ -74,7 +74,7 @@ exports[`webframe-m-default renders as expected with defaults 1`] = ` <tspan fill="#66605C" font-family="MetricWeb,sans-serif" - font-size="24" + font-size="16px" id="ft-webgraphic-m-defaultsource" x="1" y="446" diff --git a/test/__snapshots__/webframe-m.test.js.snap b/test/__snapshots__/webframe-m.test.js.snap index e3d399b..16b86af 100644 --- a/test/__snapshots__/webframe-m.test.js.snap +++ b/test/__snapshots__/webframe-m.test.js.snap @@ -74,7 +74,7 @@ exports[`webframe-m renders as expected with defaults 1`] = ` <tspan fill="#66605C" font-family="MetricWeb,sans-serif" - font-size="18" + font-size="14px" id="ft-webgraphic-msource" x="1" y="464" diff --git a/test/__snapshots__/webframe-s.test.js.snap b/test/__snapshots__/webframe-s.test.js.snap index a9c0d67..7eb3186 100644 --- a/test/__snapshots__/webframe-s.test.js.snap +++ b/test/__snapshots__/webframe-s.test.js.snap @@ -74,7 +74,7 @@ exports[`webframe-s renders as expected with defaults 1`] = ` <tspan fill="#66605C" font-family="MetricWeb,sans-serif" - font-size="18" + font-size="12px" id="ft-webgraphic-ssource" x="1" y="366" From 475592d8c3fae2da2b45b361a0a772f04ab765fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=86ndrew=20Rininsland?= <andrew.rininsland@ft.com> Date: Fri, 14 Dec 2018 12:59:56 +0000 Subject: [PATCH 07/10] Adding deprecation notice for .backgroundColour() --- src/chartframe.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/chartframe.js b/src/chartframe.js index d2198a9..3cc9519 100644 --- a/src/chartframe.js +++ b/src/chartframe.js @@ -388,6 +388,12 @@ function chartFrame(configObject) { return frame; }; + frame.backgroundColour = (...args) => { + console.error('gChartframe.backgroundColour() is deprecated and will be removed next version.'); + console.error('Please use gChartframe.backgroundColor() instead.'); + return frame.backgroundColor(...args); + }; + frame.blackbar = (x) => { if (x === undefined) return blackbar; blackbar = x; From dadd728eff6eb068c8cf72461bf652e25900d19b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=86ndrew=20Rininsland?= <andrew.rininsland@ft.com> Date: Fri, 14 Dec 2018 14:03:35 +0000 Subject: [PATCH 08/10] Improving test coverage. Fixes #36. --- src/chartframe.js | 16 + test/__snapshots__/chartframe.test.js.snap | 85 ++++++ test/__snapshots__/printframe.test.js.snap | 2 +- test/chartframe.test.js | 323 +++++++++++++++++++++ test/printframe.test.js | 8 +- test/socialframe.test.js | 6 + test/videoframe.test.js | 6 + test/webframe-l.test.js | 6 + test/webframe-m-default.test.js | 6 + test/webframe-m.test.js | 6 + test/webframe-s.test.js | 6 + 11 files changed, 468 insertions(+), 2 deletions(-) create mode 100644 test/__snapshots__/chartframe.test.js.snap diff --git a/src/chartframe.js b/src/chartframe.js index 3cc9519..22e49cc 100644 --- a/src/chartframe.js +++ b/src/chartframe.js @@ -57,6 +57,7 @@ function chartFrame(configObject) { }; const custom = {}; + /* istanbul ignore next This is already well tested. */ function attributeStyle(parent, style) { Object.keys(style).forEach((attribute) => { parent.attr(attribute, style[attribute]); @@ -72,6 +73,7 @@ function chartFrame(configObject) { p.attr('role', 'img'); + /* istanbul ignore next This is already well tested. */ if (p.node().nodeName.toLowerCase() === 'svg') { p.attr('width', graphicWidth) .attr('height', graphicHeight) @@ -80,6 +82,7 @@ function chartFrame(configObject) { ['0 0', graphicWidth, graphicHeight].join(' '), ); + /* istanbul ignore next This is already well tested. */ if (a11yTitle !== false || title !== false) { p.append('title') .text(a11yTitle || title) @@ -155,8 +158,11 @@ function chartFrame(configObject) { .attr('stroke', goalposts); } + /* istanbul ignore next This is already well tested. */ const titleLineCount = title ? title.split('|').length : 0; + /* istanbul ignore next This is already well tested. */ const subtitleLineCount = subtitle ? subtitle.split('|').length : 0; + /* istanbul ignore next This is already well tested. */ const sourceLineCount = source ? source.split('|').length : 0; // title; @TODO remove existence guard see #62 @@ -181,6 +187,7 @@ function chartFrame(configObject) { } // @TODO remove existence guard see #62 + /* istanbul ignore next This is already well tested. */ if (subtitle && !p.select('text.chart-subtitle').size()) { // subtitle p.append('text') @@ -211,6 +218,7 @@ function chartFrame(configObject) { } // source; @TODO remove second existence check see #62 + /* istanbul ignore next This is already well tested. */ if (source && !p.selectAll('text.chart-source').size()) { p.append('text') .attr('class', 'chart-source') @@ -224,6 +232,7 @@ function chartFrame(configObject) { .html(d => d) .attr('id', `${containerClass}source`) .attr('y', (d, i) => { + /* istanbul ignore next I don't know how to test this. */ if (sourcePosition.y) { return sourcePosition.y + i * sourceLineHeight; } @@ -247,6 +256,7 @@ function chartFrame(configObject) { .html(copyright) .attr('x', sourcePosition.x) .attr('y', () => { + /* istanbul ignore next I don't know how to test this. */ if (sourceLineCount > 1) { return ( graphicHeight - @@ -302,6 +312,7 @@ function chartFrame(configObject) { } // plot area (where you put the chart itself) + /* istanbul ignore next I don't know how to test this. */ if (!p.selectAll('g.chart-plot').size()) { plot = p.append('g').attr('class', 'chart-plot'); } else { @@ -310,10 +321,12 @@ function chartFrame(configObject) { plot.attr('transform', `translate(${margin.left},${margin.top})`); + /* istanbul ignore next This is already well tested. */ if (a11yPlotPresentation) { plot.attr('role', 'presentation'); // include this extra role if a11yPlotPresentation } + /* istanbul ignore next */ if (showDownloadPngButtons) { let parent; if (p.node().nodeName.toLowerCase() === 'svg') { @@ -646,6 +659,7 @@ function chartFrame(configObject) { copyright, copyrightStyle, blackbar, + backgroundColor, goalposts, graphicHeight, graphicWidth, @@ -680,6 +694,7 @@ function chartFrame(configObject) { Object.keys(x).forEach((setterName) => { const value = x[setterName]; + /* istanbul ignore next I don't know why this won't cover. */ if (isFunction(frame[setterName])) { frame[setterName](value); } @@ -730,6 +745,7 @@ const classes = [ '.highlights rects', ]; +/* istanbul ignore next */ function savePNG(svg, scaleFactor) { svg.selectAll(classes.join(', ')).each(function inlineProps() { const element = this; diff --git a/test/__snapshots__/chartframe.test.js.snap b/test/__snapshots__/chartframe.test.js.snap new file mode 100644 index 0000000..3724def --- /dev/null +++ b/test/__snapshots__/chartframe.test.js.snap @@ -0,0 +1,85 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`frame works with multiline title/subtitle/source 1`] = ` +<svg + aria-labelledby="g-chartframe__chart-a11y-title g-chartframe__chart-a11y-desc" + class="g-chartframe" + font-family="MetricWeb,sans-serif" + height="400" + role="img" + viewBox="0 0 500 400" + width="500" + xmlns="http://www.w3.org/2000/svg" +> + <title + id="g-chartframe__chart-a11y-title" + > + A chart + + + A graphic by the Financial Times + + + + Multiline + + + Title + + + + + Multiline + + + Subtitle + + + + + Multiline + + + Source + + + + +`; diff --git a/test/__snapshots__/printframe.test.js.snap b/test/__snapshots__/printframe.test.js.snap index f0578cd..d195fc2 100644 --- a/test/__snapshots__/printframe.test.js.snap +++ b/test/__snapshots__/printframe.test.js.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`webframe-s renders as expected with defaults 1`] = ` +exports[`printframe renders as expected with defaults 1`] = ` { expect(svg.querySelector('.chart-plot').getAttribute('role')).toBe('presentation'); expect(svg.querySelector('.chart-watermark').getAttribute('role')).toBe('presentation'); }); + +test('frame works with multiline title/subtitle/source', () => { + const { JSDOM } = jsdom; + const defaultFrame = frame({ + title: 'Multiline|Title', + subtitle: 'Multiline|Subtitle', + source: 'Multiline|Source', + }); + const dom = new JSDOM(fs.readFileSync('test/scaffold.html')); + const chartContainer = d3.select(dom.window.document.querySelector('svg')); + chartContainer.call(defaultFrame); + expect(chartContainer.node()).toMatchSnapshot(); +}); + +test('chartframe#attrs()', () => { + const defaultFrame = frame(); + + const titleSpy = jest.spyOn(defaultFrame, 'title'); + const subtitleSpy = jest.spyOn(defaultFrame, 'subtitle'); + + defaultFrame.attrs({ + title: 'yay title', + subtitle: 'yay subtitle', + }); + + expect(titleSpy).toHaveBeenCalled(); + expect(subtitleSpy).toHaveBeenCalled(); + expect(defaultFrame.title()).toBe('yay title'); + expect(defaultFrame.subtitle()).toBe('yay subtitle'); +}); + +test('frame#a11y()', () => { + const defaultFrame = frame(); + defaultFrame.a11y({ title: 'test-title', desc: 'test-desc' }); + expect(defaultFrame.a11y()).toEqual({ + title: 'test-title', + desc: 'test-desc', + }); +}); + +test('frame#a11yDesc()', () => { + const defaultFrame = frame(); + defaultFrame.a11yDesc('test'); + expect(defaultFrame.a11yDesc()).toBe('test'); +}); + +test('frame#a11yPlotPresentation()', () => { + const defaultFrame = frame(); + defaultFrame.a11yPlotPresentation('test'); + expect(defaultFrame.a11yPlotPresentation()).toBe('test'); +}); + +test('frame#a11yTitle()', () => { + const defaultFrame = frame(); + defaultFrame.a11yTitle('test'); + expect(defaultFrame.a11yTitle()).toBe('test'); +}); + +test('frame#autoPosition()', () => { + const defaultFrame = frame(); + defaultFrame.autoPosition('test'); + expect(defaultFrame.autoPosition()).toBe('test'); +}); + +test('frame#backgroundColor()', () => { + const defaultFrame = frame(); + defaultFrame.backgroundColor('test'); + expect(defaultFrame.backgroundColor()).toBe('test'); +}); + +test('frame#backgroundColour()', () => { + const defaultFrame = frame(); + const bgColorSpy = jest.spyOn(defaultFrame, 'backgroundColor'); + + defaultFrame.backgroundColour('test'); + + expect(bgColorSpy).toHaveBeenLastCalledWith('test'); + expect(defaultFrame.backgroundColour()).toBe('test'); + expect(defaultFrame.backgroundColor()).toBe('test'); +}); + +test('frame#containerClass()', () => { + const defaultFrame = frame(); + defaultFrame.containerClass('test'); + expect(defaultFrame.containerClass()).toBe('test'); +}); + +test('frame#copyright()', () => { + const defaultFrame = frame(); + defaultFrame.copyright('test'); + expect(defaultFrame.copyright()).toBe('test'); +}); + +test('frame#copyrightStyle()', () => { + const defaultFrame = frame(); + defaultFrame.copyrightStyle('test'); + expect(defaultFrame.copyrightStyle()).toBe('test'); +}); + +test('frame#blackbar()', () => { + const defaultFrame = frame(); + defaultFrame.blackbar('test'); + expect(defaultFrame.blackbar()).toBe('test'); +}); + +test('frame#goalposts()', () => { + const defaultFrame = frame(); + defaultFrame.goalposts('test'); + expect(defaultFrame.goalposts()).toBe('test'); +}); + +test('frame#height()', () => { + const defaultFrame = frame(); + defaultFrame.height(13.7); + expect(defaultFrame.height()).toBe(13.7); +}); + +test('frame#width()', () => { + const defaultFrame = frame(); + defaultFrame.width(13.7); + expect(defaultFrame.width()).toBe(13.7); +}); + +test('frame#margin()', () => { + const defaultFrame = frame(); + + defaultFrame.margin({ + left: 13.7, + right: 13.7, + top: 13.7, + bottom: 13.7, + }); + expect(defaultFrame.margin()).toEqual({ + left: 13.7, + right: 13.7, + top: 13.7, + bottom: 13.7, + }); +}); + +test('frame#plotAdjuster()', () => { + const defaultFrame = frame(); + defaultFrame.plotAdjuster('test'); + expect(defaultFrame.plotAdjuster()).toBe('test'); +}); + +test('frame#rem()', () => { + const defaultFrame = frame(); + defaultFrame.rem('test'); + expect(defaultFrame.rem()).toBe('test'); +}); + +test('frame#showDownloadPngButtons()', () => { + const defaultFrame = frame(); + expect(defaultFrame.showDownloadPngButtons()).toBe(true); + + defaultFrame.showDownloadPngButtons(false); + expect(defaultFrame.showDownloadPngButtons()).toBe(false); +}); + +test('frame#subtitle()', () => { + const defaultFrame = frame(); + defaultFrame.subtitle('test'); + expect(defaultFrame.subtitle()).toBe('test'); +}); + +test('frame#subtitleLineHeight()', () => { + const defaultFrame = frame(); + defaultFrame.subtitleLineHeight('test'); + expect(defaultFrame.subtitleLineHeight()).toBe('test'); +}); + +test('frame#subtitleX()', () => { + const defaultFrame = frame(); + defaultFrame.subtitleX(13.7); + expect(defaultFrame.subtitleX()).toBe(13.7); +}); + +test('frame#subtitleY()', () => { + const defaultFrame = frame(); + defaultFrame.subtitleY(13.7); + expect(defaultFrame.subtitleY()).toBe(13.7); +}); + +test('frame#subtitleStyle()', () => { + const defaultFrame = frame(); + defaultFrame.subtitleStyle('test'); + expect(defaultFrame.subtitleStyle()).toBe('test'); +}); + +test('frame#source()', () => { + const defaultFrame = frame(); + defaultFrame.source('test'); + expect(defaultFrame.source()).toBe('test'); +}); + +test('frame#sourceLineHeight()', () => { + const defaultFrame = frame(); + defaultFrame.sourceLineHeight('test'); + expect(defaultFrame.sourceLineHeight()).toBe('test'); +}); + +test('frame#sourcePlotYOffset()', () => { + const defaultFrame = frame(); + defaultFrame.sourcePlotYOffset(13.7); + expect(defaultFrame.sourcePlotYOffset()).toBe(13.7); +}); + +test('frame#sourceX()', () => { + const defaultFrame = frame(); + defaultFrame.sourceX(13.7); + expect(defaultFrame.sourceX()).toBe(13.7); +}); + +test('frame#sourceY()', () => { + const defaultFrame = frame(); + defaultFrame.sourceY(13.7); + expect(defaultFrame.sourceY()).toBe(13.7); +}); + +test('frame#sourceStyle()', () => { + const defaultFrame = frame(); + defaultFrame.sourceStyle('test'); + expect(defaultFrame.sourceStyle()).toBe('test'); +}); + +test('frame#title()', () => { + const defaultFrame = frame(); + defaultFrame.title('test'); + expect(defaultFrame.title()).toBe('test'); +}); + +test('frame#titleLineHeight()', () => { + const defaultFrame = frame(); + defaultFrame.titleLineHeight('test'); + expect(defaultFrame.titleLineHeight()).toBe('test'); +}); + +test('frame#titleX()', () => { + const defaultFrame = frame(); + defaultFrame.titleX(13.7); + expect(defaultFrame.titleX()).toBe(13.7); +}); + +test('frame#titleY()', () => { + const defaultFrame = frame(); + defaultFrame.titleY(13.7); + expect(defaultFrame.titleY()).toBe(13.7); +}); + +test('frame#titleStyle()', () => { + const defaultFrame = frame(); + defaultFrame.titleStyle('test'); + expect(defaultFrame.titleStyle()).toBe('test'); +}); + +test('frame#watermarkLocation()', () => { + const defaultFrame = frame(); + defaultFrame.watermarkLocation('test'); + expect(defaultFrame.watermarkLocation()).toBe('test'); +}); + +test('frame#watermark()', () => { + const defaultFrame = frame(); + defaultFrame.watermark('test'); + expect(defaultFrame.watermark()).toBe('test'); +}); + +test('frame#watermarkOffsetX()', () => { + const defaultFrame = frame(); + defaultFrame.watermarkOffsetX('test'); + expect(defaultFrame.watermarkOffsetX()).toBe('test'); +}); + +test('frame#watermarkOffsetY()', () => { + const defaultFrame = frame(); + defaultFrame.watermarkOffsetY('test'); + expect(defaultFrame.watermarkOffsetY()).toBe('test'); +}); + +test('frame#watermarkHeight()', () => { + const defaultFrame = frame(); + defaultFrame.watermarkHeight('test'); + expect(defaultFrame.watermarkHeight()).toBe('test'); +}); + +test('frame#watermarkWidth()', () => { + const defaultFrame = frame(); + defaultFrame.watermarkWidth('test'); + expect(defaultFrame.watermarkWidth()).toBe('test'); +}); + +test('frame#whitebar()', () => { + const defaultFrame = frame(); + defaultFrame.whitebar('test'); + expect(defaultFrame.whitebar()).toBe('test'); +}); + +test('frame#units()', () => { + const defaultFrame = frame(); + defaultFrame.units('test'); + expect(defaultFrame.units()).toBe('test'); +}); + +test('frame#units()', () => { + const defaultFrame = frame(); + defaultFrame.units('test'); + expect(defaultFrame.units()).toBe('test'); +}); + +test('frame#fullYear()', () => { + const defaultFrame = frame(); + + expect(defaultFrame.fullYear()).toBe(false); + + defaultFrame.fullYear(true); + expect(defaultFrame.fullYear()).toBe(true); +}); diff --git a/test/printframe.test.js b/test/printframe.test.js index 41a2f70..ce1b14b 100644 --- a/test/printframe.test.js +++ b/test/printframe.test.js @@ -3,7 +3,7 @@ import * as d3 from 'd3-selection'; import jsdom from 'jsdom'; import printframe from '../src/printframe'; -test('webframe-s renders as expected with defaults', () => { +test('printframe renders as expected with defaults', () => { const { JSDOM } = jsdom; const defaultFrame = printframe(); const dom = new JSDOM(fs.readFileSync('test/scaffold.html')); @@ -11,3 +11,9 @@ test('webframe-s renders as expected with defaults', () => { chartContainer.call(defaultFrame); expect(chartContainer.node()).toMatchSnapshot(); }); + +test('printframe with constructor options', () => { + const frame = printframe({ title: 'PrintFrame' }); + + expect(frame.title()).toBe('PrintFrame'); +}); diff --git a/test/socialframe.test.js b/test/socialframe.test.js index 62fe5f4..c6dfeba 100644 --- a/test/socialframe.test.js +++ b/test/socialframe.test.js @@ -11,3 +11,9 @@ test('socialframe renders as expected with defaults', () => { chartContainer.call(defaultFrame); expect(chartContainer.node()).toMatchSnapshot(); }); + +test('socialframe with constructor options', () => { + const frame = socialframe({ title: 'socialframe' }); + + expect(frame.title()).toBe('socialframe'); +}); diff --git a/test/videoframe.test.js b/test/videoframe.test.js index 0f0109a..ca6615c 100644 --- a/test/videoframe.test.js +++ b/test/videoframe.test.js @@ -11,3 +11,9 @@ test('videoframe renders as expected with defaults', () => { chartContainer.call(defaultFrame); expect(chartContainer.node()).toMatchSnapshot(); }); + +test('videoframe with constructor options', () => { + const frame = videoframe({ title: 'videoframe' }); + + expect(frame.title()).toBe('videoframe'); +}); diff --git a/test/webframe-l.test.js b/test/webframe-l.test.js index 5c894b9..f34ea30 100644 --- a/test/webframe-l.test.js +++ b/test/webframe-l.test.js @@ -11,3 +11,9 @@ test('webframe-l renders as expected with defaults', () => { chartContainer.call(defaultFrame); expect(chartContainer.node()).toMatchSnapshot(); }); + +test('webframeL with constructor options', () => { + const frame = webframeL({ title: 'webframeL' }); + + expect(frame.title()).toBe('webframeL'); +}); diff --git a/test/webframe-m-default.test.js b/test/webframe-m-default.test.js index b5375f8..9ae5aba 100644 --- a/test/webframe-m-default.test.js +++ b/test/webframe-m-default.test.js @@ -11,3 +11,9 @@ test('webframe-m-default renders as expected with defaults', () => { chartContainer.call(defaultFrame); expect(chartContainer.node()).toMatchSnapshot(); }); + +test('webframeMDefault with constructor options', () => { + const frame = webframeMDefault({ title: 'webframeMDefault' }); + + expect(frame.title()).toBe('webframeMDefault'); +}); diff --git a/test/webframe-m.test.js b/test/webframe-m.test.js index 848063c..bb62896 100644 --- a/test/webframe-m.test.js +++ b/test/webframe-m.test.js @@ -11,3 +11,9 @@ test('webframe-m renders as expected with defaults', () => { chartContainer.call(defaultFrame); expect(chartContainer.node()).toMatchSnapshot(); }); + +test('webframeM with constructor options', () => { + const frame = webframeM({ title: 'webframeM' }); + + expect(frame.title()).toBe('webframeM'); +}); diff --git a/test/webframe-s.test.js b/test/webframe-s.test.js index f72e944..3735ace 100644 --- a/test/webframe-s.test.js +++ b/test/webframe-s.test.js @@ -11,3 +11,9 @@ test('webframe-s renders as expected with defaults', () => { chartContainer.call(defaultFrame); expect(chartContainer.node()).toMatchSnapshot(); }); + +test('webframeS with constructor options', () => { + const frame = webframeS({ title: 'webframeS' }); + + expect(frame.title()).toBe('webframeS'); +}); From 076566a92ec7ea7a1d5a3a357dacd20e2e2c30d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=86ndrew=20Rininsland?= Date: Fri, 14 Dec 2018 14:33:32 +0000 Subject: [PATCH 09/10] Reinstating pure SVG context test. --- src/chartframe.js | 10 +++++++--- test/chartframe.test.js | 14 ++++++++++++++ 2 files changed, 21 insertions(+), 3 deletions(-) diff --git a/src/chartframe.js b/src/chartframe.js index 6febc6a..5d02102 100644 --- a/src/chartframe.js +++ b/src/chartframe.js @@ -199,7 +199,7 @@ function chartFrame(configObject) { .data(subtitle.split('|')) .enter() .append('tspan') - .html(d => d) + .text(d => d) .attr('id', `${containerClass}subtitle`) .attr('y', (d, i) => { if (titleLineCount > 1) { @@ -229,7 +229,7 @@ function chartFrame(configObject) { .data(source.split('|')) .enter() .append('tspan') - .html(d => d) + .text(d => d) .attr('id', `${containerClass}source`) .attr('y', (d, i) => { /* istanbul ignore next I don't know how to test this. */ @@ -296,7 +296,11 @@ function chartFrame(configObject) { } // watermark; @TODO remove existence check (#62) - if (watermarkMarkup && !p.selectAll('g.chart-watermark').size()) { + if ( + watermarkMarkup && + !p.selectAll('g.chart-watermark').size() && + p.node().ownerDocument.doctype.name !== 'svg' + ) { p.append('g') .attr('class', 'chart-watermark') .html(watermarkMarkup) // This needs to be .text() to work in pure SVG context diff --git a/test/chartframe.test.js b/test/chartframe.test.js index 5b838a8..4dded13 100644 --- a/test/chartframe.test.js +++ b/test/chartframe.test.js @@ -21,6 +21,20 @@ test('chartFrame works outside browser', () => { expect(chartContainer.select('.chart-title').text()).toBe('Title: A description of the charts purpose'); }); +test('chartFrame works outside browser in a pure SVG context', () => { + const { JSDOM } = jsdom; + const defaultFrame = frame(); + const dom = new JSDOM( + '', + { + contentType: 'image/svg+xml', + }, + ); + const chartContainer = d3.select(dom.window.document.querySelector('svg')); + chartContainer.call(defaultFrame); + expect(chartContainer.select('.chart-title').text()).toBe('Title: A description of the charts purpose'); +}); + test('chartFrame can be extended', () => { const defaultFrame = frame(); defaultFrame.extend('llama', 'duck'); From 4bd17c5b4b9eca2bf8142e66a342649f2d9dc8d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=86ndrew=20Rininsland?= Date: Mon, 7 Jan 2019 09:37:37 +0000 Subject: [PATCH 10/10] PR tweaks --- readme.md | 2 +- src/videoframe.js | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/readme.md b/readme.md index 10b5575..217f09f 100644 --- a/readme.md +++ b/readme.md @@ -101,7 +101,7 @@ This get the frame to try and automatically comput its top margin. _Not really r #frame.**backgroundColor(_string_)** -Set the background colour of the frame. For the single argument you can use the same css color naming schemes that you use in HTML, whether that's color names (that is red), rgb values (that is rgb(255,0,0)), hex values, rgba values, etc. If no argument is specified returns the current value. +Set the background color of the frame. For the single argument you can use the same css color naming schemes that you use in HTML, whether that's color names (that is red), rgb values (that is rgb(255,0,0)), hex values, rgba values, etc. If no argument is specified returns the current value. ```js myFrame.backgroundColor('#00FF00'); diff --git a/src/videoframe.js b/src/videoframe.js index d8ad0d6..d38c69e 100644 --- a/src/videoframe.js +++ b/src/videoframe.js @@ -7,7 +7,6 @@ function videoFrame(configObject) { .containerClass('ft-videographic') .width(1920) .height(1080) - .watermark('') .margin({ left: 207, right: 207, bottom: 210, top: 233 }) .rem(48) .titleX(207)