diff --git a/example/app/constant-line-chart.tsx b/example/app/constant-line-chart.tsx new file mode 100644 index 00000000..a5ef9543 --- /dev/null +++ b/example/app/constant-line-chart.tsx @@ -0,0 +1,210 @@ +import { + useFont, + Line as SKLine, + vec, + Skia, + Path, +} from "@shopify/react-native-skia"; +import * as React from "react"; +import { useState } from "react"; +import { SafeAreaView, ScrollView, StyleSheet, View } from "react-native"; +import { CartesianChart, Line, Scatter } from "victory-native"; +import type { PointsArray, Scale } from "lib/src/types"; +import { useDarkMode } from "react-native-dark"; + +import { + optionsInitialState, + optionsReducer, +} from "example/hooks/useOptionsReducer"; +import inter from "../assets/inter-medium.ttf"; +import { appColors } from "./consts/colors"; + +const randomNumber = () => Math.floor(Math.random() * (50 - 25 + 1)) + 25; + +const DATA = (numberPoints = 13) => + Array.from({ length: numberPoints }, (_, index) => ({ + day: index + 1, + sales: randomNumber(), + constant: 33, + })); + +export default function ConstantLineChartPage() { + const isDark = useDarkMode(); + const [ + { + fontSize, + chartPadding, + strokeWidth, + xAxisSide, + yAxisSide, + xLabelOffset, + yLabelOffset, + xTickCount, + yTickCount, + xAxisLabelPosition, + yAxisLabelPosition, + scatterRadius, + colors, + domainPadding, + curveType, + customXLabel, + customYLabel, + }, + ] = React.useReducer(optionsReducer, { + ...optionsInitialState, + domainPadding: 10, + chartPadding: 10, + strokeWidth: 2, + colors: { + stroke: isDark ? "#fafafa" : "#71717a", + xLine: isDark ? "#71717a" : "#ffffff", + yLine: isDark ? "#aabbcc" : "#ddfa55", + frameLine: isDark ? "#444" : "#aaa", + xLabel: isDark ? appColors.text.dark : appColors.text.light, + yLabel: isDark ? appColors.text.dark : appColors.text.light, + scatter: "#a78bfa", + }, + }); + const font = useFont(inter, fontSize); + const [data] = useState(DATA()); + + return ( + + + { + return customXLabel ? `${value} ${customXLabel}` : `${value}`; + }, + formatYLabel: (value) => { + return customYLabel ? `${value} ${customYLabel}` : `${value}`; + }, + }} + data={data} + domainPadding={domainPadding} + > + {({ points, xScale, yScale }) => ( + <> + {/* dashed line via Skia path */} + + {/* straight line via Skia Line */} + + {/* example of a "straight line", using only data */} + + + + + )} + + + + + ); +} + +type FixedLine = { + xScale: Scale; + yScale: Scale; + data: PointsArray; +}; +const DashedFixedLine = ({ data, xScale, yScale }: FixedLine) => { + const dottedLinePath = Skia.Path.Make(); + dottedLinePath.moveTo(xScale(0), yScale(46)); + dottedLinePath.lineTo( + xScale((data[data.length - 1]!.xValue as number) + 1), + yScale(46), + ); + dottedLinePath.dash(8, 4, 0); + + return ( + + ); +}; +const StraightFixedLine = ({ data, xScale, yScale }: FixedLine) => { + return ( + + ); +}; + +const styles = StyleSheet.create({ + safeView: { + flex: 1, + backgroundColor: appColors.viewBackground.light, + $dark: { + backgroundColor: appColors.viewBackground.dark, + }, + }, + chart: { + flex: 1, + }, + optionsScrollView: { + flex: 0.5, + backgroundColor: appColors.cardBackground.light, + $dark: { + backgroundColor: appColors.cardBackground.dark, + }, + }, + options: { + paddingHorizontal: 20, + paddingVertical: 15, + alignItems: "flex-start", + justifyContent: "flex-start", + }, +}); diff --git a/example/app/consts/routes.ts b/example/app/consts/routes.ts index eb8cc21e..10116816 100644 --- a/example/app/consts/routes.ts +++ b/example/app/consts/routes.ts @@ -10,6 +10,11 @@ export const ChartRoutes: { "This chart shows off a line with scatter points. This view also features Victory’s extensive customization options for the grid, axis chart, colors, and curve.", path: "/line-chart", }, + { + title: "Constant Line Chart", + description: "This chart shows off constant lines with scatter points. ", + path: "/constant-line-chart", + }, { title: "Bar Chart", description: