From 480d4555952846c948a61eb18ecefb9e757571b6 Mon Sep 17 00:00:00 2001 From: Satria Sutisna Date: Sun, 17 Nov 2019 08:04:06 +0200 Subject: [PATCH] chart --- junction-ayy/package-lock.json | 95 ++++------- junction-ayy/package.json | 1 + junction-ayy/src/assets/chart.svg | 168 ++++++++++++++++++++ junction-ayy/src/squares/Sustainability.jsx | 14 +- 4 files changed, 216 insertions(+), 62 deletions(-) create mode 100644 junction-ayy/src/assets/chart.svg diff --git a/junction-ayy/package-lock.json b/junction-ayy/package-lock.json index 5bf8a2b..d8482a1 100644 --- a/junction-ayy/package-lock.json +++ b/junction-ayy/package-lock.json @@ -2896,8 +2896,7 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true, - "optional": true + "bundled": true }, "aproba": { "version": "1.2.0", @@ -2915,13 +2914,11 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true, - "optional": true + "bundled": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -2934,18 +2931,15 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "concat-map": { "version": "0.0.1", - "bundled": true, - "optional": true + "bundled": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "core-util-is": { "version": "1.0.2", @@ -3048,8 +3042,7 @@ }, "inherits": { "version": "2.0.3", - "bundled": true, - "optional": true + "bundled": true }, "ini": { "version": "1.3.5", @@ -3059,7 +3052,6 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -3072,20 +3064,17 @@ "minimatch": { "version": "3.0.4", "bundled": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true, - "optional": true + "bundled": true }, "minipass": { "version": "2.3.5", "bundled": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -3102,7 +3091,6 @@ "mkdirp": { "version": "0.5.1", "bundled": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -3175,8 +3163,7 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true, - "optional": true + "bundled": true }, "object-assign": { "version": "4.1.1", @@ -3186,7 +3173,6 @@ "once": { "version": "1.4.0", "bundled": true, - "optional": true, "requires": { "wrappy": "1" } @@ -3262,8 +3248,7 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true, - "optional": true + "bundled": true }, "safer-buffer": { "version": "2.1.2", @@ -3293,7 +3278,6 @@ "string-width": { "version": "1.0.2", "bundled": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -3311,7 +3295,6 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -3350,13 +3333,11 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true, - "optional": true + "bundled": true }, "yallist": { "version": "3.0.3", - "bundled": true, - "optional": true + "bundled": true } } }, @@ -7291,8 +7272,7 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true, - "optional": true + "bundled": true }, "aproba": { "version": "1.2.0", @@ -7310,13 +7290,11 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true, - "optional": true + "bundled": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -7329,18 +7307,15 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "concat-map": { "version": "0.0.1", - "bundled": true, - "optional": true + "bundled": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "core-util-is": { "version": "1.0.2", @@ -7443,8 +7418,7 @@ }, "inherits": { "version": "2.0.3", - "bundled": true, - "optional": true + "bundled": true }, "ini": { "version": "1.3.5", @@ -7454,7 +7428,6 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -7467,20 +7440,17 @@ "minimatch": { "version": "3.0.4", "bundled": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true, - "optional": true + "bundled": true }, "minipass": { "version": "2.3.5", "bundled": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -7497,7 +7467,6 @@ "mkdirp": { "version": "0.5.1", "bundled": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -7570,8 +7539,7 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true, - "optional": true + "bundled": true }, "object-assign": { "version": "4.1.1", @@ -7581,7 +7549,6 @@ "once": { "version": "1.4.0", "bundled": true, - "optional": true, "requires": { "wrappy": "1" } @@ -7657,8 +7624,7 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true, - "optional": true + "bundled": true }, "safer-buffer": { "version": "2.1.2", @@ -7688,7 +7654,6 @@ "string-width": { "version": "1.0.2", "bundled": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -7706,7 +7671,6 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -7745,13 +7709,11 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true, - "optional": true + "bundled": true }, "yallist": { "version": "3.0.3", - "bundled": true, - "optional": true + "bundled": true } } } @@ -11027,6 +10989,14 @@ "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz", "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==" }, + "react-google-charts": { + "version": "3.0.15", + "resolved": "https://registry.npmjs.org/react-google-charts/-/react-google-charts-3.0.15.tgz", + "integrity": "sha512-78s5xOQOJvL+jIewrWQZEHtlVk+5Yh4zZy+ODA1on1o1FaRjKWXxoo4n4JQl1XuqkF/A9NWque3KqM6pMggjzQ==", + "requires": { + "react-load-script": "^0.0.6" + } + }, "react-is": { "version": "16.12.0", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz", @@ -11037,6 +11007,11 @@ "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, + "react-load-script": { + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/react-load-script/-/react-load-script-0.0.6.tgz", + "integrity": "sha512-aRGxDGP9VoLxcsaYvKWIW+LRrMOzz2eEcubTS4NvQPPugjk2VvMhow0wWTkSl7RxookomD1MwcP4l5UStg5ShQ==" + }, "react-move": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/react-move/-/react-move-5.2.1.tgz", diff --git a/junction-ayy/package.json b/junction-ayy/package.json index 01f88dd..c6c942b 100644 --- a/junction-ayy/package.json +++ b/junction-ayy/package.json @@ -16,6 +16,7 @@ "nuka-carousel": "^4.5.13", "react": "^16.12.0", "react-dom": "^16.12.0", + "react-google-charts": "^3.0.15", "react-scripts": "3.2.0", "react-xml-parser": "^1.1.3", "victory": "^33.1.3" diff --git a/junction-ayy/src/assets/chart.svg b/junction-ayy/src/assets/chart.svg new file mode 100644 index 0000000..b3d8239 --- /dev/null +++ b/junction-ayy/src/assets/chart.svg @@ -0,0 +1,168 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/junction-ayy/src/squares/Sustainability.jsx b/junction-ayy/src/squares/Sustainability.jsx index e6a8d81..83be53c 100644 --- a/junction-ayy/src/squares/Sustainability.jsx +++ b/junction-ayy/src/squares/Sustainability.jsx @@ -4,6 +4,7 @@ import { VictoryChart, VictoryGroup, VictoryBar, VictoryAxis } from "victory"; import { StyledCard } from "../StyledCard"; import energy from "../assets/energy-circle.svg"; +import chart from "../assets/chart.svg"; export function Sustainability() { const [electricityData, setElectricityData] = useState({ @@ -37,7 +38,16 @@ export function Sustainability() {

When compared to the weekly average values.

- +
+ chart image +
+ + {/* - +
*/} ); }