Avarni React Native Widgets

Usage

import { EmissionsChangeBadge, MonthlyEmissionsChart, InfoWithIcon, Bar } from "@avarni/react-native/widgets"

EmissionsChangeBadge

Props:

val: number: The number value to be displayed on the badge. Positive and negative cases will both be handled by the component.

positiveColor: string: The color of the badge if val is a positive value.

negativeColor: string: The color of the badge if val is a negative value.

MonthlyEmissionsChart

Props:

insights: array: The direct output of the Avarni /insights/impact/history endpoint with timeGranularity: "monthly".

width: number: Width in pixels of graph.

height: number: Height in pixels of graph.

backgroundColor: string: Background color of graph.

textColor: string: Color of text labels on graph.

barColor: string: Color of bars/line on graph.

variant: 'bar' | 'line': Defines the type of graph, either line or bar. Not required, default is bar.

InfoWithIcon

Props:

text: string: The text displayed next to the icon.

textSize: number: The font size of the text. Not required, default 14px.

textColor: string: The color of the text. Not required, default #000000.

iconFrameColor: string: The background color of the icon frame.

iconFrameRadius: number: The radius of the icon frame. Not required, default 25px.

icon: React.ReactNode: The icon in the icon frame. Example icon={<MaterialCommunityIcons name="car" color="white" size={30} />}

Bar

Props:

widthPercentage: number: The percentage of the width of the parent container the component is placed in that the bar should fill.

endText: string: The text to display at the end of the bar.

endTextColor: string: The color of the text to display at the end of the bar.

bottomText: string: The text to display at the bottom left of the bar.

bottomTextColor: string: The color of the text to display at the bottom left of the bar.

barColor: string: The color of the bar.