From 981b5cebca34bc8cff0339fefb37a6cc279d4c7d Mon Sep 17 00:00:00 2001 From: Loewy Date: Mon, 15 Jan 2024 12:33:08 -0800 Subject: [PATCH] add code, bring over chart view and pr first --- component/charts/bar-graph/bar-graph.ts | 102 ++++++++++++++++++++++++ component/charts/graph-types.ts | 2 +- component/charts/index.ts | 0 package.json | 1 + styles.ts | 40 +++++++++- yarn.lock | 47 ++++++++++- 6 files changed, 188 insertions(+), 4 deletions(-) create mode 100644 component/charts/bar-graph/bar-graph.ts create mode 100644 component/charts/index.ts diff --git a/component/charts/bar-graph/bar-graph.ts b/component/charts/bar-graph/bar-graph.ts new file mode 100644 index 0000000..0d54d01 --- /dev/null +++ b/component/charts/bar-graph/bar-graph.ts @@ -0,0 +1,102 @@ +import React from 'react'; +import * as scale from 'd3-scale'; +import { View } from 'react-native'; +import { BarChart, XAxis, YAxis } from 'react-native-svg-charts'; + +import { useGraphData } from '../../../hooks/charts/useGraphData'; +import ChartView from '../ChartView'; +import { GraphData, YAxisProps } from '../graph-types'; + +import { CustomBars } from '../custom-bars'; +import { CustomGrid } from '../custom-grid'; +import { graphStyles } from '../../../styles'; + +interface Props { + data: GraphData; + height?: number; + spacingInner?: number; + spacingOuter?: number; + contentInset?: { top: number; bottom: number }; + min?: number; + numberOfTicks?: number; + barColors?: Array; + useCommonScale?: boolean; + yAxisProps?: YAxisProps; +} + +export const BarGraph: React.FC = ({ data, useCommonScale = false, ...props }) => { + if (!data || typeof data !== 'object') return null; // TODO: replace when we have error/loading context from useQueryHandler + const { + xValues, + yData, + yAxisRightLabels, + yAxisLeftLabels, + defaultProps: { + height, + spacingInner, + spacingOuter, + contentInset, + min, + numberOfTicks, + barColors, + yAxisProps: { + maxLeftYAxisValue, + maxRightYAxisValue, + formatRightYAxisLabel, + formatLeftYAxisLabel + } + } + } = useGraphData(data, props, useCommonScale); + + return ( + + + + + (item as unknown as { value: number }).value} + contentInset={contentInset} + spacingInner={spacingInner} + spacingOuter={spacingOuter} + > + + + + index)} + formatLabel={(_, index) => xValues[index]} + style={graphStyles.xAxisMarginTop} + svg={graphStyles.xAxisFontStyle} + scale={scale.scaleBand} + /> + + + + + ); +}; + +export default BarGraph; \ No newline at end of file diff --git a/component/charts/graph-types.ts b/component/charts/graph-types.ts index 35aaa49..918921e 100644 --- a/component/charts/graph-types.ts +++ b/component/charts/graph-types.ts @@ -19,7 +19,7 @@ export interface GraphData { yValues: Array; } -interface YAxisProps { +export interface YAxisProps { maxLeftYAxisValue?: number; maxRightYAxisValue?: number; selectedLeftYAxisLabel?: string; diff --git a/component/charts/index.ts b/component/charts/index.ts new file mode 100644 index 0000000..e69de29 diff --git a/package.json b/package.json index 831368d..f3e3386 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "react-native": "0.72.6", "react-native-dotenv": "^3.4.9", "react-native-svg": "^14.1.0", + "react-native-svg-charts": "^5.4.0", "typescript": "^5.3.3" }, "devDependencies": { diff --git a/styles.ts b/styles.ts index 29607da..ea6889a 100644 --- a/styles.ts +++ b/styles.ts @@ -1,3 +1,7 @@ +import { StyleSheet } from 'react-native'; +// GLOBAL STYLES +// COLORS: +// can be made more granular to specify utility (ex: fontColors vs backgroundColors) export const colors = { bgBlack: '#121212', lightGrey: '#BFC2C8', @@ -7,4 +11,38 @@ export const colors = { blueCloth: '#539dc2', buttonBlue: '#1987ff', textWhite: '#ffffff' -}; \ No newline at end of file +}; + +export const shadows = { + standard: { + shadowColor: '#000000', + shadowOffset: { + width: 0, + height: 3 + }, + shadowOpacity: 0.1, + shadowRadius: 4.65, + elevation: 3 + }, +}; + +export const graphStyles = StyleSheet.create({ + container: { + backgroundColor: colors.panelWhite, + borderColor: 'black', + borderRadius: 5, + marginVertical: 10, + marginHorizontal: 15, + paddingTop: 15, + paddingHorizontal: 15, + ...shadows.standard + }, + rowContainer: { flexDirection: 'row', padding: 10 }, + flex: { flex: 1 }, + yAxisLeftPadding: { paddingRight: 3 }, + yAxisRightPadding: { paddingLeft: 3 }, + yAxisFontStyle: { fontSize: 10, fill: 'grey' }, + xAxisFontStyle: { fontSize: 12, fill: 'black' }, + xAxisMarginTop: { marginTop: -15 } +}); + diff --git a/yarn.lock b/yarn.lock index 621786f..88444ad 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3681,13 +3681,25 @@ d3-format@1: resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.4.5.tgz#374f2ba1320e3717eb74a9356c67daee17a7edb4" integrity sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ== -d3-interpolate@1: +d3-interpolate-path@2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/d3-interpolate-path/-/d3-interpolate-path-2.0.0.tgz#cb0327314fedb14e6ea1789ab7e095a16c2f8ab2" + integrity sha512-q7Wqn0CoWpMfrvTqoLvD099MMqeKRE0jKY3MzruePkZoD5hYzJ8xbGadGDRkq0xjiX0hxpr0Jtt92iOYFt600A== + dependencies: + d3-interpolate "^1.1.1" + +d3-interpolate@1, d3-interpolate@^1.1.1: version "1.4.0" resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-1.4.0.tgz#526e79e2d80daa383f9e0c1c1c7dcc0f0583e987" integrity sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA== dependencies: d3-color "1" +d3-path@1: + version "1.0.9" + resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.9.tgz#48c050bb1fe8c262493a8caf5524e3e9591701cf" + integrity sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg== + d3-path@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-3.1.0.tgz#22df939032fb5a71ae8b1800d61ddb7851c42526" @@ -3706,6 +3718,26 @@ d3-scale@1.0.6: d3-time "1" d3-time-format "2" +d3-scale@^1.0.6: + version "1.0.7" + resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-1.0.7.tgz#fa90324b3ea8a776422bd0472afab0b252a0945d" + integrity sha512-KvU92czp2/qse5tUfGms6Kjig0AhHOwkzXG0+PqIJB3ke0WUv088AHMZI0OssO9NCkXt4RP8yju9rpH8aGB7Lw== + dependencies: + d3-array "^1.2.0" + d3-collection "1" + d3-color "1" + d3-format "1" + d3-interpolate "1" + d3-time "1" + d3-time-format "2" + +d3-shape@^1.0.6: + version "1.3.7" + resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.3.7.tgz#df63801be07bc986bc54f63789b4fe502992b5d7" + integrity sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw== + dependencies: + d3-path "1" + d3-time-format@2: version "2.3.0" resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-2.3.0.tgz#107bdc028667788a8924ba040faf1fbccd5a7850" @@ -7483,7 +7515,7 @@ prompts@^2.0.1, prompts@^2.2.1, prompts@^2.3.2, prompts@^2.4.0: kleur "^3.0.3" sisteransi "^1.0.5" -prop-types@*, prop-types@^15.7.2, prop-types@^15.8.1: +prop-types@*, prop-types@^15.6.0, prop-types@^15.7.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -7599,6 +7631,17 @@ react-native-dotenv@^3.4.9: dependencies: dotenv "^16.3.1" +react-native-svg-charts@^5.4.0: + version "5.4.0" + resolved "https://registry.yarnpkg.com/react-native-svg-charts/-/react-native-svg-charts-5.4.0.tgz#3817a4714c276b7024e60ae5c9f13191614aecc8" + integrity sha512-5TaIGSihJaHCGFj32Tc07hZrqqTpvdyAx89PIrW2nLf2tijd61+3UE3jtsiHOvfeAyDgSTWjv6s9qG9d2di7Pw== + dependencies: + d3-array "^1.2.0" + d3-interpolate-path "2.0.0" + d3-scale "^1.0.6" + d3-shape "^1.0.6" + prop-types "^15.6.0" + react-native-svg@^14.1.0: version "14.1.0" resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-14.1.0.tgz#7903bddd3c71bf3a8a503918253c839e6edaa724"