Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Extend axisOptions lineWidth & lineColor API #209

Merged
merged 11 commits into from
Mar 19, 2024
Merged

Extend axisOptions lineWidth & lineColor API #209

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
f07f849
add separate grid line widths
masiddee Mar 8, 2024
e9b6e23
add separate grid line colors
masiddee Mar 8, 2024
0b48ac0
refactor line color and width API
masiddee Mar 11, 2024
97d48c6
add back grid property for backwards compatibility
masiddee Mar 13, 2024
141cabe
changeset
masiddee Mar 13, 2024
a5f09b3
update default lineWidth
masiddee Mar 13, 2024
5942d4e
update docs
masiddee Mar 13, 2024
ab79bf4
refactor types
masiddee Mar 14, 2024
c6138e7
update docs
masiddee Mar 14, 2024
5e0c3bc
markdown spacing
masiddee Mar 14, 2024
75dfa21
markdown fixes
masiddee Mar 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/early-spiders-hear.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"victory-native": minor
keithluchtel marked this conversation as resolved.
Show resolved Hide resolved
---

Extend axisOptions lineWidth & lineColor API to allow for custom axis configuration
13 changes: 11 additions & 2 deletions example/app/line-chart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,9 @@ export default function LineChartPage(props: { segment: string }) {
strokeWidth: 2,
colors: {
stroke: isDark ? "#fafafa" : "#71717a",
line: isDark ? "#71717a" : "#d4d4d8",
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",
Expand All @@ -83,7 +85,14 @@ export default function LineChartPage(props: { segment: string }) {
yKeys={["sales"]}
axisOptions={{
font,
lineColor: colors.line,
lineWidth: { grid: { x: 0, y: 2 }, frame: 0 },
lineColor: {
grid: {
x: colors.xLine!,
y: colors.yLine!,
},
frame: colors.frameLine!,
},
labelColor: { x: colors.xLabel!, y: colors.yLabel! },
labelOffset: { x: xLabelOffset, y: yLabelOffset },
tickCount: { x: xTickCount, y: yTickCount },
Expand Down
59 changes: 39 additions & 20 deletions lib/src/cartesian/components/CartesianAxis.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,15 +50,35 @@ export const CartesianAxis = <
typeof labelPosition === "string" ? labelPosition : labelPosition.x,
yLabelPosition:
typeof labelPosition === "string" ? labelPosition : labelPosition.y,
gridLineColor: (typeof lineColor === "object" && "grid" in lineColor
? lineColor.grid
gridXLineColor: (typeof lineColor === "object" && "grid" in lineColor
? typeof lineColor.grid === "object" && "x" in lineColor.grid
? lineColor.grid.x
: lineColor.grid
: lineColor) as Color,
frameLineColor: (typeof lineColor === "object" && "frame" in lineColor
gridYLineColor: (typeof lineColor === "object" && "grid" in lineColor
? typeof lineColor.grid === "object" && "y" in lineColor.grid
? lineColor.grid.y
: lineColor.grid
: lineColor) as Color,
gridFrameLineColor: (typeof lineColor === "object" && "frame" in lineColor
? lineColor.frame
: lineColor) as Color,
gridLineWidth: typeof lineWidth === "number" ? lineWidth : lineWidth.grid,
frameLineWidth:
typeof lineWidth === "number" ? lineWidth : lineWidth.frame,
gridXLineWidth:
typeof lineWidth === "object" && "grid" in lineWidth
? typeof lineWidth.grid === "object" && "x" in lineWidth.grid
? lineWidth.grid.x
: lineWidth.grid
: lineWidth,
gridYLineWidth:
typeof lineWidth === "object" && "grid" in lineWidth
? typeof lineWidth.grid === "object" && "y" in lineWidth.grid
? lineWidth.grid.y
: lineWidth.grid
: lineWidth,
gridFrameLineWidth:
typeof lineWidth === "object" && "frame" in lineWidth
? lineWidth.frame
: lineWidth,
} as const;
}, [
tickCount,
Expand All @@ -79,10 +99,12 @@ export const CartesianAxis = <
yLabelPosition,
xLabelOffset,
yLabelOffset,
gridLineColor,
frameLineColor,
gridLineWidth,
frameLineWidth,
gridXLineColor,
gridYLineColor,
gridFrameLineColor,
gridXLineWidth,
gridYLineWidth,
gridFrameLineWidth,
} = axisConfiguration;

const [x1 = 0, x2 = 0] = xScale.domain();
Expand Down Expand Up @@ -118,8 +140,8 @@ export const CartesianAxis = <
<Line
p1={vec(xScale(x1), yScale(tick))}
p2={vec(xScale(x2), yScale(tick))}
color={gridLineColor}
strokeWidth={gridLineWidth}
color={gridYLineColor}
strokeWidth={gridYLineWidth}
/>
{font
? canFitLabelContent && (
Expand Down Expand Up @@ -168,8 +190,8 @@ export const CartesianAxis = <
<Line
p1={vec(xScale(tick), yScale(y2))}
p2={vec(xScale(tick), yScale(y1))}
color={gridLineColor}
strokeWidth={gridLineWidth}
color={gridXLineColor}
strokeWidth={gridXLineWidth}
/>
{font && labelWidth && canFitLabelContent ? (
<Text
Expand Down Expand Up @@ -204,20 +226,17 @@ export const CartesianAxis = <
{yTicks > 0 ? yAxisNodes : null}
<Path
path={boundingFrame}
strokeWidth={frameLineWidth}
strokeWidth={gridFrameLineWidth}
style="stroke"
color={frameLineColor}
color={gridFrameLineColor}
/>
</>
);
};

CartesianAxis.defaultProps = {
lineColor: "hsla(0, 0%, 0%, 0.25)",
lineWidth: {
grid: StyleSheet.hairlineWidth,
frame: StyleSheet.hairlineWidth,
},
lineWidth: StyleSheet.hairlineWidth,
tickCount: 5,
labelOffset: { x: 2, y: 4 },
axisSide: { x: "bottom", y: "left" },
Expand Down
6 changes: 4 additions & 2 deletions lib/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,8 +95,10 @@ export type AxisProps<
xScale: ScaleLinear<number, number, never>;
yScale: ScaleLinear<number, number, never>;
font?: SkFont | null;
lineColor: Color | { grid: Color; frame: Color };
lineWidth: number | { grid: number; frame: number };
lineColor: Color | { grid: Color | { x: Color; y: Color }; frame: Color };
lineWidth:
| number
| { grid: number | { x: number; y: number }; frame: number };
labelColor: string | { x: string; y: string };
tickCount: number | { x: number; y: number };
labelOffset: number | { x: number; y: number };
Expand Down
4 changes: 2 additions & 2 deletions website/docs/cartesian/cartesian-chart.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,8 +102,8 @@ The `axisOptions` is an optional prop allows you to configure the axes and grid
| :-----------------: | ---------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`font`** | <pre>SkFont &#124; null</pre> | Defines the font to be used for axis labels. If not provided, then no labels will be rendered. This font object is typically returned from Skia’s `useFont` hook. |
| **`tickCount`** | <pre>number &#124; {<br /> x: number; <br /> y: number;<br />}</pre> | Defines the number of ticks to be rendered on both axes, or if provided an object, specific to x and y. If not provided, then the chart will attempt to choose a reasonable number of ticks based on the size of the chart. <br /><br />Note: This is an approximation; the scale may return more or fewer values depending on the domain, padding, and axis labels. |
| **`lineColor`** | <pre>string &#124; {<br /> grid: string;<br /> frame: string;<br />}</pre> | Defines the color of the grid and axis lines. It can either apply to both or be customized to each. It will default to `black` if none is provided. |
| **`lineWidth`** | <pre>number &#124; {<br /> grid: number;<br /> frame: number;<br />}</pre> | Defines the width of the grid and axis lines. It can either apply to both or be customized to each. It will default to `Stylesheet.hairlineWidth` if none is provided. |
| **`lineColor`** | <pre>string &#124; {<br /> grid: string &#124; {<br /> x: string;<br /> y: string;<br /> };<br /> frame: string;<br />}</pre> | Defines the color of the grid and axis lines. It can either apply to both or be customized to each. It will default to `black` if none is provided. |
| **`lineWidth`** | <pre>number &#124; {<br /> grid: number &#124; {<br /> x: number;<br /> y: number;<br /> }; <br /> frame: number;<br />}</pre> | Defines the width of the grid and axis lines. It can either apply to both or be customized to each. It will default to `Stylesheet.hairlineWidth` if none is provided. |
| **`labelColor`** | <pre>string &#124; {<br /> x: string;<br /> y: string;<br />}</pre> | Defines the color of the axis labels. It can either apply to both or be customized to each. It will default to `black` if none is provided. |
| **`labelOffset`** | <pre>number &#124; {<br /> x: number;<br /> y: number;<br />}</pre> | Defines the offset of the axis labels. It can either apply to both or be customized to each. It will default to `0` if none is provided. |
| **`labelPosition`** | <pre>AxisLabelPosition &#124; {<br /> x: AxisLabelPosition;<br /> y: AxisLabelPosition;<br />}</pre> | Defines the position of the axis labels. It can either apply to both or be customized to each. It will default to `outset` if none is provided.<br /><br />&#9432; **`AxisLabelPosition`** is an enum with the values: <code>'inset &#124; 'outset'</code>. |
Expand Down
Loading