From d60daa6305e1ff9d798b2866596b69bf0f9adf48 Mon Sep 17 00:00:00 2001 From: Edward Jimenez Date: Thu, 17 Oct 2019 14:48:04 -0500 Subject: [PATCH 1/4] rs: adding a chart component --- package-lock.json | 47 +++++++ package.json | 2 + .../common/components/ChartComponent.js | 125 ++++++++++++++++++ .../docs/ChartComponent/index.stories.js | 83 ++++++++++++ src/modules/common/styles/ChartComponent.css | 37 ++++++ 5 files changed, 294 insertions(+) create mode 100644 src/modules/common/components/ChartComponent.js create mode 100644 src/modules/common/components/docs/ChartComponent/index.stories.js create mode 100644 src/modules/common/styles/ChartComponent.css diff --git a/package-lock.json b/package-lock.json index 0617e44..5b31b3b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4262,6 +4262,39 @@ "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz", "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==" }, + "chart.js": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.8.0.tgz", + "integrity": "sha512-Di3wUL4BFvqI5FB5K26aQ+hvWh8wnP9A3DWGvXHVkO13D3DSnaSsdZx29cXlEsYKVkn1E2az+ZYFS4t0zi8x0w==", + "requires": { + "chartjs-color": "^2.1.0", + "moment": "^2.10.2" + } + }, + "chartjs-color": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.3.0.tgz", + "integrity": "sha512-hEvVheqczsoHD+fZ+tfPUE+1+RbV6b+eksp2LwAhwRTVXEjCSEavvk+Hg3H6SZfGlPh/UfmWKGIvZbtobOEm3g==", + "requires": { + "chartjs-color-string": "^0.6.0", + "color-convert": "^0.5.3" + }, + "dependencies": { + "color-convert": { + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-0.5.3.tgz", + "integrity": "sha1-vbbGnOZg+t/+CwAHzER+G59ygr0=" + } + } + }, + "chartjs-color-string": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz", + "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==", + "requires": { + "color-name": "^1.0.0" + } + }, "chokidar": { "version": "2.1.8", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz", @@ -9866,6 +9899,11 @@ } } }, + "moment": { + "version": "2.24.0", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz", + "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==" + }, "move-concurrently": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", @@ -11888,6 +11926,15 @@ "whatwg-fetch": "3.0.0" } }, + "react-chartjs-2": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-2.8.0.tgz", + "integrity": "sha512-BPpC+qfnh37DkcXvxRwA1rdD9rX/0AQrwru4VZTLofCCuZBwRsc7PbfxjilvoB6YlHhorwZu40YDWEQkoz7xfQ==", + "requires": { + "lodash": "^4.17.4", + "prop-types": "^15.5.8" + } + }, "react-clientside-effect": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/react-clientside-effect/-/react-clientside-effect-1.2.2.tgz", diff --git a/package.json b/package.json index c334a42..078895c 100644 --- a/package.json +++ b/package.json @@ -5,8 +5,10 @@ "dependencies": { "@material-ui/core": "^4.5.0", "@material-ui/icons": "^4.4.3", + "chart.js": "^2.8.0", "prop-types": "^15.7.2", "react": "^16.10.1", + "react-chartjs-2": "^2.8.0", "react-dom": "^16.10.1", "react-scripts": "3.2.0" }, diff --git a/src/modules/common/components/ChartComponent.js b/src/modules/common/components/ChartComponent.js new file mode 100644 index 0000000..155beed --- /dev/null +++ b/src/modules/common/components/ChartComponent.js @@ -0,0 +1,125 @@ +import React, { useState } from 'react'; +import { Line, defaults } from 'react-chartjs-2'; +// import PropTypes from 'prop-types'; +import '../styles/ChartComponent.css'; + +// styles for the Chart +defaults.global.defaultFontFamily = 'Nunito'; +defaults.global.defaultColor = '#FFF'; +defaults.global.defaultFontColor = '#727272'; +defaults.global.legend.position = 'bottom'; +defaults.global.legend.labels.padding = 40; +defaults.global.legend.labels.boxWidth = 20; +defaults.scale.gridLines.display = false; +defaults.scale.gridLines.drawBorder = false; +defaults.scatter.scales.yAxes = [{ display: false }]; + +// default months array used for labels in the chart +const listMonth = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC']; + +// the Data configuration for charts +const dataChart = (propData, monthLabels, lengthArray) => ({ + labels: monthLabels, + datasets: [ + { + label: 'MIND', + fill: false, + pointRadius: 0, + borderColor: '#5065CB', + data: propData.mind.slice(0, lengthArray).reverse(), + }, + { + label: 'BODY', + fill: false, + pointRadius: 0, + borderColor: '#CB50C4', + data: propData.body.slice(0, lengthArray).reverse(), + }, + { + label: 'SOUL', + fill: false, + pointRadius: 0, + borderColor: '#50ADCB', + data: propData.soul.slice(0, lengthArray).reverse(), + }, + { + label: 'WORK', + fill: false, + pointRadius: 0, + borderColor: '#FFB800', + data: propData.work.slice(0, lengthArray).reverse(), + }, + { + label: 'PLAY', + fill: false, + pointRadius: 0, + borderColor: '#5065CB', + data: propData.play.slice(0, lengthArray).reverse(), + }, + { + label: 'LOVE', + fill: false, + pointRadius: 0, + borderColor: '#A0AEF6', + data: propData.love.slice(0, lengthArray).reverse(), + }, + ], +}); + +// A helper funcion used to get an array of a category +// if the array length < expected months, add 0 values in missing months +const buildCategoryArray = (data, category, lengthArray) => { + const wellnessList = []; + data.map((record) => !!record[category] && wellnessList.push(record[category])); + + if (wellnessList.length < lengthArray) { + for (let i = wellnessList.length; i < lengthArray; i += 1) { + wellnessList.push(0); + } + } + return wellnessList; +}; + +// A function that return an object of each category with array of values +const data = ({ propData }, lengthArray) => ({ + mind: buildCategoryArray(propData, 'mind', lengthArray), + body: buildCategoryArray(propData, 'body', lengthArray), + soul: buildCategoryArray(propData, 'soul', lengthArray), + work: buildCategoryArray(propData, 'work', lengthArray), + play: buildCategoryArray(propData, 'play', lengthArray), + love: buildCategoryArray(propData, 'love', lengthArray), +}); + +// A function that return a months array from current Month to last 'X' months +// the 'X' value can be 12, 6 or 3. +const calculateMonths = (lengthArray) => { + const currentMonth = new Date().getMonth(); + const ordererMonth = []; + + listMonth.forEach((val, index) => { + if (currentMonth < index) ordererMonth.push(listMonth[index]); + else ordererMonth.push(listMonth[currentMonth - index]); + }); + return ordererMonth.slice(0, lengthArray).reverse(); +}; + +// main functional component exported +export default function ChartComponent(propData) { + const [month, setMonth] = useState(12); + + return ( +
+
+
+

Wellness Chart

+ +
+ +
+
+ ); +} diff --git a/src/modules/common/components/docs/ChartComponent/index.stories.js b/src/modules/common/components/docs/ChartComponent/index.stories.js new file mode 100644 index 0000000..10c2e97 --- /dev/null +++ b/src/modules/common/components/docs/ChartComponent/index.stories.js @@ -0,0 +1,83 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react'; +import ChartComponent from '../../ChartComponent'; + +const data = [ + { + mind: 10, + body: 6, + soul: 2, + work: 1, + play: 4, + love: 8, + }, + { + mind: 9, + body: 7, + soul: 5, + work: 3, + play: 1, + love: 4, + }, + { + mind: 7, + body: 3, + soul: 1, + work: 1, + play: 5, + love: 9, + }, + { + mind: 4, + body: 7, + soul: 4, + work: 7, + play: 4, + love: 7, + }, + { + mind: 8, + body: 4, + soul: 10, + work: 1, + play: 2, + love: 6, + }, + { + mind: 5, + body: 9, + soul: 5, + work: 9, + play: 5, + love: 9, + }, + { + mind: 5, + body: 1, + soul: 7, + work: 5, + play: 9, + love: 3, + }, + { + mind: 6, + body: 3, + soul: 6, + work: 3, + play: 6, + love: 3, + }, + { + mind: 2, + body: 4, + soul: 6, + work: 8, + play: 10, + love: 7, + }, +]; + +storiesOf('ChartComponent', module) + .add('Show ChartComponent component', () => ( + + )); diff --git a/src/modules/common/styles/ChartComponent.css b/src/modules/common/styles/ChartComponent.css new file mode 100644 index 0000000..9f76c6e --- /dev/null +++ b/src/modules/common/styles/ChartComponent.css @@ -0,0 +1,37 @@ +@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap'); +@import url('https://fonts.googleapis.com/css?family=Nunito&display=swap'); + +.containerChart { + display: flex; + justify-content: center; + align-items: left; + flex-flow: column; + max-width: 740px; +} + +.titleChart { + color: #727272; + font-family: 'Open Sans'; + font-weight: normal; + font-size: 28px; + line-height: 38px; +} + +.headerChart { + display: flex; + flex-direction: row; + place-content: space-between; +} + +.selectOptionChart { + height: 4 0px; + width: 160px; + align-self: center; + border: hidden; + background-color: inherit; + color: #727272; + font-family: 'Nunito'; + font-size: 16px; + line-height: 22px; + text-align: right; +} From b4abe2696c958b17c62d54c3a93f58acbdf8fefd Mon Sep 17 00:00:00 2001 From: Edward Jimenez Date: Thu, 17 Oct 2019 21:54:15 -0500 Subject: [PATCH 2/4] rs: adding more features to the Chart component --- package-lock.json | 8 ++ package.json | 1 + .../common/components/ChartComponent.js | 130 +++++++++++++----- .../docs/ChartComponent/index.stories.js | 63 +++++++-- src/modules/common/constants/chartSample.js | 98 +++++++++++++ src/modules/common/styles/ChartComponent.css | 33 ++++- 6 files changed, 292 insertions(+), 41 deletions(-) create mode 100644 src/modules/common/constants/chartSample.js diff --git a/package-lock.json b/package-lock.json index 5b31b3b..cfea5b9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4295,6 +4295,14 @@ "color-name": "^1.0.0" } }, + "chartjs-plugin-annotation": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/chartjs-plugin-annotation/-/chartjs-plugin-annotation-0.5.7.tgz", + "integrity": "sha1-G/DjAZmmqf+Yic4PN6HnVagNEL8=", + "requires": { + "chart.js": "^2.4.0" + } + }, "chokidar": { "version": "2.1.8", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz", diff --git a/package.json b/package.json index 078895c..a1ee62a 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "@material-ui/core": "^4.5.0", "@material-ui/icons": "^4.4.3", "chart.js": "^2.8.0", + "chartjs-plugin-annotation": "^0.5.7", "prop-types": "^15.7.2", "react": "^16.10.1", "react-chartjs-2": "^2.8.0", diff --git a/src/modules/common/components/ChartComponent.js b/src/modules/common/components/ChartComponent.js index 155beed..5bb964b 100644 --- a/src/modules/common/components/ChartComponent.js +++ b/src/modules/common/components/ChartComponent.js @@ -1,25 +1,72 @@ import React, { useState } from 'react'; -import { Line, defaults } from 'react-chartjs-2'; +import { Line } from 'react-chartjs-2'; +import annotationPlugin from 'chartjs-plugin-annotation'; // import PropTypes from 'prop-types'; import '../styles/ChartComponent.css'; +import sampleData from '../constants/chartSample'; -// styles for the Chart -defaults.global.defaultFontFamily = 'Nunito'; -defaults.global.defaultColor = '#FFF'; -defaults.global.defaultFontColor = '#727272'; -defaults.global.legend.position = 'bottom'; -defaults.global.legend.labels.padding = 40; -defaults.global.legend.labels.boxWidth = 20; -defaults.scale.gridLines.display = false; -defaults.scale.gridLines.drawBorder = false; -defaults.scatter.scales.yAxes = [{ display: false }]; +// styles options for the Chart +const options = { + layout: { + padding: { + left: 40, + right: 40, + top: 40, + bottom: 20, + }, + }, + legend: { + display: false, + }, + scales: { + yAxes: [{ + ticks: { + beginAtZero: true, + suggestedMax: 10, + callback: () => '', + }, + gridLines: { + display: false, + drawBorder: false, + }, + }], + xAxes: [{ + ticks: { + fontFamily: 'Nunito', + fontColor: '#727272', + fontSize: 10, + }, + gridLines: { + display: false, + drawBorder: false, + }, + }], + }, + plugins: [annotationPlugin], + annotation: { + annotations: [{ + type: 'line', + mode: 'horizontal', + scaleID: 'y-axis-0', + value: 5, + borderColor: 'rgba(0, 0, 0, 0.4)', + borderWidth: 1, + label: { + enabled: false, + content: 'Test label', + }, + }], + }, +}; // default months array used for labels in the chart const listMonth = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC']; // the Data configuration for charts const dataChart = (propData, monthLabels, lengthArray) => ({ - labels: monthLabels, + labels: propData.mind.length < monthLabels.length + ? monthLabels.slice(0, propData.mind.length).reverse() + : monthLabels.reverse(), datasets: [ { label: 'MIND', @@ -53,7 +100,7 @@ const dataChart = (propData, monthLabels, lengthArray) => ({ label: 'PLAY', fill: false, pointRadius: 0, - borderColor: '#5065CB', + borderColor: '#FD9184', data: propData.play.slice(0, lengthArray).reverse(), }, { @@ -68,26 +115,22 @@ const dataChart = (propData, monthLabels, lengthArray) => ({ // A helper funcion used to get an array of a category // if the array length < expected months, add 0 values in missing months -const buildCategoryArray = (data, category, lengthArray) => { +const buildCategoryArray = (data, category) => { const wellnessList = []; data.map((record) => !!record[category] && wellnessList.push(record[category])); + if (wellnessList.length === 1) wellnessList.push(0); - if (wellnessList.length < lengthArray) { - for (let i = wellnessList.length; i < lengthArray; i += 1) { - wellnessList.push(0); - } - } return wellnessList; }; // A function that return an object of each category with array of values -const data = ({ propData }, lengthArray) => ({ - mind: buildCategoryArray(propData, 'mind', lengthArray), - body: buildCategoryArray(propData, 'body', lengthArray), - soul: buildCategoryArray(propData, 'soul', lengthArray), - work: buildCategoryArray(propData, 'work', lengthArray), - play: buildCategoryArray(propData, 'play', lengthArray), - love: buildCategoryArray(propData, 'love', lengthArray), +const data = (propData) => ({ + mind: buildCategoryArray(propData, 'mind'), + body: buildCategoryArray(propData, 'body'), + soul: buildCategoryArray(propData, 'soul'), + work: buildCategoryArray(propData, 'work'), + play: buildCategoryArray(propData, 'play'), + love: buildCategoryArray(propData, 'love'), }); // A function that return a months array from current Month to last 'X' months @@ -97,16 +140,23 @@ const calculateMonths = (lengthArray) => { const ordererMonth = []; listMonth.forEach((val, index) => { - if (currentMonth < index) ordererMonth.push(listMonth[index]); - else ordererMonth.push(listMonth[currentMonth - index]); + if (currentMonth < index) { + ordererMonth.push(listMonth[(listMonth.length - index) + currentMonth]); + } else ordererMonth.push(listMonth[currentMonth - index]); }); - return ordererMonth.slice(0, lengthArray).reverse(); + return ordererMonth.slice(0, lengthArray); }; + +const ColoredLine = ({ color }) => ( +
+); + // main functional component exported -export default function ChartComponent(propData) { +export default function ChartComponent({ propData, sample, disable, text }) { + console.log(propData); const [month, setMonth] = useState(12); - + const secData = sample ? sampleData : propData; return (
@@ -118,7 +168,23 @@ export default function ChartComponent(propData) { - +
+ +
+
+ + MIND + + BODY + + SOUL + + WORK + + PLAY + + LOVE +
); diff --git a/src/modules/common/components/docs/ChartComponent/index.stories.js b/src/modules/common/components/docs/ChartComponent/index.stories.js index 10c2e97..5cd0ca8 100644 --- a/src/modules/common/components/docs/ChartComponent/index.stories.js +++ b/src/modules/common/components/docs/ChartComponent/index.stories.js @@ -2,14 +2,14 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; import ChartComponent from '../../ChartComponent'; -const data = [ +const propData = [ { mind: 10, - body: 6, - soul: 2, - work: 1, - play: 4, - love: 8, + body: 9, + soul: 10, + work: 9, + play: 10, + love: 9, }, { mind: 9, @@ -75,9 +75,56 @@ const data = [ play: 10, love: 7, }, + { + mind: 9, + body: 7, + soul: 5, + work: 3, + play: 1, + love: 4, + }, + { + mind: 7, + body: 3, + soul: 1, + work: 1, + play: 5, + love: 9, + }, + { + mind: 4, + body: 7, + soul: 4, + work: 7, + play: 4, + love: 7, + }, ]; storiesOf('ChartComponent', module) - .add('Show ChartComponent component', () => ( - + .add('Show ChartComponent component with sample data', () => ( + + )) + .add('Show ChartComponent component of 12 months', () => ( + + )) + .add('Show ChartComponent component of 9 months', () => ( + + )) + .add('Show ChartComponent component of 4 months', () => ( + + )) + .add('Show ChartComponent component of 2 months', () => ( + + )) + .add('Show ChartComponent component of 1 months', () => ( + )); diff --git a/src/modules/common/constants/chartSample.js b/src/modules/common/constants/chartSample.js new file mode 100644 index 0000000..1bc2e1d --- /dev/null +++ b/src/modules/common/constants/chartSample.js @@ -0,0 +1,98 @@ +export default [ + { + mind: 4, + body: 9, + soul: 6, + work: 4, + play: 5, + love: 5, + }, + { + mind: 6, + body: 7, + soul: 8, + work: 3, + play: 1, + love: 10, + }, + { + mind: 8, + body: 5, + soul: 6, + work: 1, + play: 5, + love: 5, + }, + { + mind: 6, + body: 3, + soul: 8, + work: 7, + play: 1, + love: 10, + }, + { + mind: 4, + body: 5, + soul: 10, + work: 1, + play: 5, + love: 5, + }, + { + mind: 6, + body: 7, + soul: 8, + work: 9, + play: 1, + love: 10, + }, + { + mind: 8, + body: 9, + soul: 6, + work: 5, + play: 5, + love: 5, + }, + { + mind: 6, + body: 7, + soul: 8, + work: 3, + play: 1, + love: 10, + }, + { + mind: 4, + body: 5, + soul: 6, + work: 8, + play: 5, + love: 5, + }, + { + mind: 6, + body: 3, + soul: 8, + work: 3, + play: 1, + love: 10, + }, + { + mind: 8, + body: 5, + soul: 10, + work: 6, + play: 5, + love: 5, + }, + { + mind: 4, + body: 7, + soul: 8, + work: 1, + play: 1, + love: 10, + }, +]; diff --git a/src/modules/common/styles/ChartComponent.css b/src/modules/common/styles/ChartComponent.css index 9f76c6e..629eef9 100644 --- a/src/modules/common/styles/ChartComponent.css +++ b/src/modules/common/styles/ChartComponent.css @@ -7,6 +7,7 @@ align-items: left; flex-flow: column; max-width: 740px; + margin: 20px; } .titleChart { @@ -24,8 +25,9 @@ } .selectOptionChart { - height: 4 0px; + height: 30px; width: 160px; + padding-left: 10px; align-self: center; border: hidden; background-color: inherit; @@ -34,4 +36,33 @@ font-size: 16px; line-height: 22px; text-align: right; + -webkit-appearance: none; + background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAAPsAAAD7AFKhtV5AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAALFQTFRF////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADcidCwAAADp0Uk5TAAEDBAUGCw0PGx4gISstLkBER11fYGFnaWtsk5eYmp2eo6Spq6ytrq+wsbK2zM/d4OPw8vP09vf4/uaZfbgAAAHzSURBVHja7drZTsJQFIXhBXWeBwQF5wlFAUUm1/s/mDeYgPS057RnbzXZ67Jp8/1J26QXBWw2m81ms9lsNpvN9jeW7J8c71a1tOru8cl+Mndg53VKkuP2pga/2R6T5PR1Z3ag0hxxtkFd3q8PvrVRswIAuODcboTvQ/VmXjsHgCMu7Fa0oHq7qB0CG+/UK/jp820dZ6RawZJPnuKaagUpPq/Qo1ZBms8ehlQqSPU5RJc6Bek+u7ikSoHD5yUa1Chw+Wxgra9Q4PT7a8DBp3iB0/88AIAWhQucPlsAgORetsDt38++CWQL8n3ZAh9fssDPlytw+w/J4pkyBf6+TEGIL1EQ5scvCPVjF4T7cQuK+DELivnxCtz+Y5J9ZZyC4n6cgjJ+jIJyfvmCsn7ZgvJ+uYIMf8X/KS5eEMcvXhDLL1rg9tuBfrGCmH6Rgrh+eEFsP7Qgvh9WIOGHFMj4/gVSvm+BnO9X4PafSvs+BbJ+foG0n1cg72cXaPiZBSp+VoGOH14Q2w8teI7uhxVI+CEFMr5/gZTvWyDn+xVI+j4Fsn5+gbSfVyDvZxd0FPysAh3fXaDluwr0/PSCzirwmwW6/nKBtg8kdwvvv7oPoPHxzQ9nf6Nob+tlQpKTl2381pK9Wm0vgc1ms9lsNpvNZrPZ/vW+AEbmqyT8wqAZAAAAAElFTkSuQmCC'); + background-position: calc(100% - 10px) calc(1em - 7px); + background-size: 13px 13px; + background-repeat: no-repeat; +} + +.canvasChartContainer{ + border-radius: 20px; + background-color: #FFFFFF; + box-shadow: 0 0 32px 0 rgba(4,11,35,0.08); +} + +.textChartBody{ + display: flex; + width: 95%; + padding-left: 5px; + color: #727272; + font-family: 'Nunito'; + font-size: 10px; + letter-spacing: 2px; + line-height: 14px; + text-align: center; + margin-top: 25px; +} +.lineChartBody{ + height: 2px; + width: 32px; + border: 0; } From 4e8205f7164e94ebe2b8fa125459485f3e4e4c16 Mon Sep 17 00:00:00 2001 From: Edward Jimenez Date: Fri, 18 Oct 2019 12:11:30 -0500 Subject: [PATCH 3/4] rs: adding more props to the chart component --- src/serviceWorker.js => serviceWorker.js | 0 .../common/components/ChartComponent.js | 51 ++++++++++++++++--- .../docs/ChartComponent/index.stories.js | 5 ++ src/modules/common/styles/ChartComponent.css | 21 ++++++++ 4 files changed, 69 insertions(+), 8 deletions(-) rename src/serviceWorker.js => serviceWorker.js (100%) diff --git a/src/serviceWorker.js b/serviceWorker.js similarity index 100% rename from src/serviceWorker.js rename to serviceWorker.js diff --git a/src/modules/common/components/ChartComponent.js b/src/modules/common/components/ChartComponent.js index 5bb964b..2823252 100644 --- a/src/modules/common/components/ChartComponent.js +++ b/src/modules/common/components/ChartComponent.js @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import { Line } from 'react-chartjs-2'; import annotationPlugin from 'chartjs-plugin-annotation'; -// import PropTypes from 'prop-types'; +import PropTypes from 'prop-types'; import '../styles/ChartComponent.css'; import sampleData from '../constants/chartSample'; @@ -114,7 +114,7 @@ const dataChart = (propData, monthLabels, lengthArray) => ({ }); // A helper funcion used to get an array of a category -// if the array length < expected months, add 0 values in missing months +// if the array length is 1 month, add 0 values to compare const buildCategoryArray = (data, category) => { const wellnessList = []; data.map((record) => !!record[category] && wellnessList.push(record[category])); @@ -147,27 +147,39 @@ const calculateMonths = (lengthArray) => { return ordererMonth.slice(0, lengthArray); }; - const ColoredLine = ({ color }) => (
); // main functional component exported -export default function ChartComponent({ propData, sample, disable, text }) { - console.log(propData); +export default function ChartComponent({ + propData, + sample, + disable, + text, +}) { const [month, setMonth] = useState(12); const secData = sample ? sampleData : propData; + return ( -
-
+
+ { text ? {text} : null} +
+

Wellness Chart

- setMonth(e.target.value)} + disabled={disable ? true : null} + >
+
@@ -189,3 +201,26 @@ export default function ChartComponent({ propData, sample, disable, text }) {
); } + +// The PropTypes for the props received +ChartComponent.propTypes = { + propData: PropTypes.arrayOf(PropTypes.any), + sample: PropTypes.bool, + disable: PropTypes.bool, + text: PropTypes.string, +}; + +ChartComponent.defaultProps = { + propData: [], + sample: false, + disable: false, + text: null, +}; + +ColoredLine.propTypes = { + color: PropTypes.string, +}; + +ColoredLine.defaultProps = { + color: null, +}; diff --git a/src/modules/common/components/docs/ChartComponent/index.stories.js b/src/modules/common/components/docs/ChartComponent/index.stories.js index 5cd0ca8..f245071 100644 --- a/src/modules/common/components/docs/ChartComponent/index.stories.js +++ b/src/modules/common/components/docs/ChartComponent/index.stories.js @@ -101,10 +101,15 @@ const propData = [ }, ]; +const dummyText = 'With a partner account, you can be able to see this chart.'; + storiesOf('ChartComponent', module) .add('Show ChartComponent component with sample data', () => ( )) + .add('Show ChartComponent component with Blurry effect and a Text sample', () => ( + + )) .add('Show ChartComponent component of 12 months', () => ( )) diff --git a/src/modules/common/styles/ChartComponent.css b/src/modules/common/styles/ChartComponent.css index 629eef9..ca2493a 100644 --- a/src/modules/common/styles/ChartComponent.css +++ b/src/modules/common/styles/ChartComponent.css @@ -66,3 +66,24 @@ width: 32px; border: 0; } + +.setBlurEffectChart{ + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: white; + filter: blur(8px); + z-index:0; +} +.textDisabledChart{ + width: 42%; + z-index:1; + font-size: 40px; + color: #727272; + font-family: 'Nunito'; + text-align: center; + position: absolute; + justify-content: center; + align-items: center; +} From 47a8da2f4e772ed8ff46ff2e2673bd8ca775a2d7 Mon Sep 17 00:00:00 2001 From: Edward Jimenez Date: Sat, 19 Oct 2019 21:22:03 -0500 Subject: [PATCH 4/4] Readme updateds --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 923d569..a3263ec 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,5 @@ +# ReactJS with storybook + This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). ## Available Scripts