From 8cb3762a679ab7b53317ee85209c9aae64f5dd4f Mon Sep 17 00:00:00 2001 From: Leonardo Morini Date: Sun, 3 Mar 2019 21:41:21 -0300 Subject: [PATCH 1/4] Value tooltip when clicked MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Description: Which is? It is a tooltip that opens when clicked on some chart value. It then displays this value to the user. Why is it important? I believe that in some cases it is possible that the user has many values ​​in the graph and at this moment wants to know the exact value of each dot. Does the component work and is it perfect? The component is working properly as it should, however I believe you can improve it, especially in its design. --- App.js | 2 + package.json | 15 ++++---- src/components/message-dot.js | 70 +++++++++++++++++++++++++++++++++++ src/line-chart.js | 33 ++++++++++++----- yarn.lock | 7 ++++ 5 files changed, 111 insertions(+), 16 deletions(-) create mode 100644 src/components/message-dot.js diff --git a/App.js b/App.js index 24a0f958..b7b4ca8f 100644 --- a/App.js +++ b/App.js @@ -115,6 +115,8 @@ export default class App extends React.Component { width={width} height={height} chartConfig={chartConfig} + messageTitle="Test Title" + messagePosition="top" bezier style={graphStyle} /> diff --git a/package.json b/package.json index 51581694..2f35b585 100644 --- a/package.json +++ b/package.json @@ -3,20 +3,20 @@ "version": "2.2.1", "devDependencies": { "babel-eslint": "^8.2.5", + "babel-polyfill": "^6.26.0", "eslint-config-xo-react": "^0.17.0", "eslint-plugin-react": "^7.10.0", - "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz", "expo": "32.0.1", - "react": "16.5.0", "jest-expo": "28.0.0", "prop-types": "^15.6.2", + "react": "16.5.0", + "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz", "react-native-scrollable-tab-view": "^0.10.0", "react-test-renderer": "16.7.0", - "xo": "^0.21.1", - "babel-polyfill": "^6.26.0" + "xo": "^0.21.1" }, - "_main": "./node_modules/expo/AppEntry.js", - "main": "./index.js", + "main": "./node_modules/expo/AppEntry.js", + "_main": "./index.js", "scripts": { "start": "expo start", "eject": "expo eject", @@ -37,7 +37,8 @@ "babel-plugin-module-resolver": "^3.1.1", "lodash": "^4.17.11", "paths-js": "^0.4.7", - "point-in-polygon": "^1.0.1" + "point-in-polygon": "^1.0.1", + "react-native-flash-message": "^0.1.10" }, "xo": { "extends": "xo-react", diff --git a/src/components/message-dot.js b/src/components/message-dot.js new file mode 100644 index 00000000..1a08ab2b --- /dev/null +++ b/src/components/message-dot.js @@ -0,0 +1,70 @@ +import React from "react" +import { StyleSheet, View, Text } from 'react-native' +import FlashMessage, { showMessage, hideMessage } from "react-native-flash-message" + +const messageComponent = (props) => { + const { message, description, backgroundColor } = props.message + return ( + + + {message} + + + {description} + + + ) +} + +export const DotMessage = props => { + const { position } = props + + return ( + messageComponent(props)} + /> + ) +} + +export const showDotMessage = (title, value, color) => { + return showMessage({ + message: `${title || "Value"}`, + description: `${value}`, + backgroundColor: color, + }) +} + +export const hideDotMessage = () => { + return hideMessage() +} + +// style custom +const styles = StyleSheet.create({ + component: { + flex: 0, + borderRadius: 20, + justifyContent: 'center', + alignItems: 'center', + padding: 10 + }, + title: { + fontSize: 18, + color: '#FFFFFF', + textShadowColor: 'rgba(0, 0, 0, 0.3)', + textShadowOffset: {width: -1, height: 1.5}, + textShadowRadius: 3 + }, + description: { + fontSize: 16, + color: '#FFFFFF', + fontWeight: 'bold', + textShadowColor: 'rgba(0, 0, 0, 0.3)', + textShadowOffset: {width: -1, height: 1.5}, + textShadowRadius: 3 + } +}) diff --git a/src/line-chart.js b/src/line-chart.js index 68d90197..ccc00b1f 100644 --- a/src/line-chart.js +++ b/src/line-chart.js @@ -10,6 +10,7 @@ import { G } from 'react-native-svg' import AbstractChart from './abstract-chart' +import { DotMessage, showDotMessage} from "./components/message-dot" class LineChart extends AbstractChart { @@ -24,19 +25,31 @@ class LineChart extends AbstractChart { getDatas = data => data.reduce((acc, item) => item.data ? [...acc, ...item.data] : acc,[]) renderDots = config => { - const { data, width, height, paddingTop, paddingRight } = config + const { data, width, height, paddingTop, paddingRight, messageTitle, messagePosition } = config let output = []; const datas = this.getDatas(data) data.map((dataset,index)=>{ dataset.data.map((x, i) => { output.push ( - ) + + showDotMessage(messageTitle, x, this.getColor(dataset, 0.9))} + cx={ + paddingRight + + (i * (width - paddingRight)) / dataset.data.length + } + cy={ + (height / 4) * + 3 * + (1 - (x - Math.min(...datas)) / this.calcScaler(datas)) + + paddingTop + } + r="4" + fill={this.getColor(dataset, 0.9)} + /> + + + ) }) }) return ( @@ -163,7 +176,7 @@ class LineChart extends AbstractChart { render() { const paddingTop = 16 const paddingRight = 64 - const { width, height, data, withShadow = true, withDots = true, withInnerLines = true, style = {}, decorator } = this.props + const { width, height, data, withShadow = true, withDots = true, withInnerLines = true, style = {}, decorator, messageTitle, messagePosition } = this.props const { labels = [] } = data const { borderRadius = 0 } = style const config = { @@ -258,6 +271,8 @@ class LineChart extends AbstractChart { {withDots && this.renderDots({ ...config, data: data.datasets, + messageTitle, + messagePosition, paddingTop, paddingRight })} diff --git a/yarn.lock b/yarn.lock index 6ea54f3d..2880d5e1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6291,6 +6291,13 @@ react-native-branch@2.2.5: version "2.2.5" resolved "https://registry.yarnpkg.com/react-native-branch/-/react-native-branch-2.2.5.tgz#4074dd63b4973e6397d9ce50e97b57c77a518e9d" +react-native-flash-message@^0.1.10: + version "0.1.10" + resolved "https://registry.yarnpkg.com/react-native-flash-message/-/react-native-flash-message-0.1.10.tgz#aa1f4526cb798a2a1d2911c1c5143391c922ee0b" + integrity sha512-hGOEoViRXLMR6cNry39qlDKG9QI+5rSQsjgzFZHcm+KlnuFoFJDuD2rdI92G8Tp85CHhYzhRGopYdT+RhQuOBA== + dependencies: + prop-types "^15.6.2" + react-native-gesture-handler@1.0.12: version "1.0.12" resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.0.12.tgz#99a22f90212df299245357dbd3a9a01c788f310b" From 4898abc804f22e1964c041f490af6e9cb939646e Mon Sep 17 00:00:00 2001 From: Herman Starikov Date: Thu, 7 Mar 2019 13:09:47 -0500 Subject: [PATCH 2/4] minor improvements --- App.js | 24 +- README.md | 1 + data.js | 4 +- package.json | 24 +- src/components/message-dot.js | 70 --- src/line-chart.js | 401 ++++++------ yarn.lock | 1111 ++++++++++++++++++++------------- 7 files changed, 928 insertions(+), 707 deletions(-) delete mode 100644 src/components/message-dot.js diff --git a/App.js b/App.js index b7b4ca8f..9b178032 100644 --- a/App.js +++ b/App.js @@ -1,13 +1,14 @@ import 'babel-polyfill' import React from 'react' -import { ScrollView, StatusBar, Dimensions, Text } from 'react-native' +import {ScrollView, StatusBar, Dimensions, Text, View} from 'react-native' import ScrollableTabView from 'react-native-scrollable-tab-view' +import FlashMessage, {showMessage} from 'react-native-flash-message' import LineChart from './src/line-chart' import PieChart from './src/pie-chart' import ProgressChart from './src/progress-chart' import BarChart from './src/bar-chart' import ContributionGraph from './src/contribution-graph' -import { data, contributionData, pieChartData, progressChartData } from './data' +import {data, contributionData, pieChartData, progressChartData} from './data' // in Expo - swipe left to see the following styling, or create your own const chartConfigs = [ @@ -49,7 +50,8 @@ const chartConfigs = [ backgroundGradientFrom: '#000000', backgroundGradientTo: '#000000', color: (opacity = 1) => `rgba(${255}, ${255}, ${255}, ${opacity})` - }, { + }, + { backgroundColor: '#0091EA', backgroundGradientFrom: '#0091EA', backgroundGradientTo: '#0091EA', @@ -83,11 +85,11 @@ const chartConfigs = [ export default class App extends React.Component { renderTabBar() { - return