Skip to content

Commit d18916f

Browse files
roryabrahamroryabraham
authored
Merge pull request #92729 from Expensify/rory-vcr-app-chart-prep
refactor(charts): extract shared Victory chart app utilities
2 parents edc4821 + bde5338 commit d18916f

18 files changed

Lines changed: 159 additions & 81 deletions

‎src/components/Charts/BarChart/BarChartContent.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import Animated, {useAnimatedStyle, useSharedValue} from 'react-native-reanimate
66
import type {CartesianChartRenderArg, ChartBounds, PointsArray, Scale} from 'victory-native';
77
import {Bar, CartesianChart} from 'victory-native';
88
import ActivityIndicator from '@components/ActivityIndicator';
9+
import BAR_INNER_PADDING from '@components/Charts/barChartConstants';
910
import ChartTooltipLayer from '@components/Charts/components/ChartTooltipLayer';
1011
import ChartXAxisLabels from '@components/Charts/components/ChartXAxisLabels';
1112
import ChartYAxisLabels from '@components/Charts/components/ChartYAxisLabels';
@@ -29,9 +30,6 @@ import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan
2930
import variables from '@styles/variables';
3031
import type {CartesianChartProps, ChartDataPoint} from '..';
3132

32-
/** Inner padding between bars (0.3 = 30% of bar width) */
33-
const BAR_INNER_PADDING = 0.3;
34-
3533
/** Extra pixel spacing between the chart boundary and the data range, applied per side (Victory's `domainPadding` prop)
3634
* We need bottom: 1 for proper display of the bottom label
3735
*/
@@ -312,4 +310,3 @@ function BarChartContent(props: BarChartProps) {
312310

313311
export default BarChartContent;
314312
export type {BarChartProps};
315-
export {BAR_INNER_PADDING};

‎src/components/Charts/barChartConstants.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/** Inner padding between bars (0.3 = 30% of bar width) */
2+
const BAR_INNER_PADDING = 0.3;
3+
4+
export default BAR_INNER_PADDING;

‎src/components/Charts/context/ChartFontsLoaderProvider.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
import useChartFonts from '@components/Charts/hooks/useChartFonts';
3+
import {ChartFontsContext} from './ChartFontsContext';
4+
5+
function ChartFontsLoaderProvider({children}: {children: React.ReactNode}) {
6+
const fonts = useChartFonts();
7+
8+
return <ChartFontsContext.Provider value={fonts}>{children}</ChartFontsContext.Provider>;
9+
}
10+
11+
export default ChartFontsLoaderProvider;

‎src/components/Charts/context/ChartFontsProvider.tsx‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,13 @@
11
import React from 'react';
2-
import useChartFonts from '@components/Charts/hooks/useChartFonts';
32
import type ChartFontsValue from '@components/Charts/types/chartFontsTypes';
43
import {ChartFontsContext} from './ChartFontsContext';
4+
import ChartFontsLoaderProvider from './ChartFontsLoaderProvider';
55

66
type ChartFontsProviderProps = {
77
children: React.ReactNode;
88
value?: ChartFontsValue;
99
};
1010

11-
function ChartFontsLoaderProvider({children}: {children: React.ReactNode}) {
12-
const fonts = useChartFonts();
13-
14-
return <ChartFontsContext.Provider value={fonts}>{children}</ChartFontsContext.Provider>;
15-
}
16-
1711
function ChartFontsProvider({children, value}: ChartFontsProviderProps) {
1812
if (value) {
1913
return <ChartFontsContext.Provider value={value}>{children}</ChartFontsContext.Provider>;

‎src/components/Charts/hooks/index.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ export {default as useChartParagraphs} from './useChartParagraphs';
44
export {default as useYAxisLabelWidth} from './useYAxisLabelWidth';
55
export {useChartFontManager} from '@components/Charts/context/ChartFontsContext';
66
export {default as ChartFontsProvider} from '@components/Charts/context/ChartFontsProvider';
7-
export {useChartTypefaces} from '@components/Charts/context/ChartFontsContext';
87
export {useChartInteractions, TOOLTIP_BAR_GAP} from './useChartInteractions';
98
export type {HitTestArgs} from './useChartInteractions';
109
export {default as useChartLabelFormats} from './useChartLabelFormats';

‎src/components/Charts/utils/buildSkiaFontManager.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import type {SkTypefaceFontProvider} from '@shopify/react-native-skia';
2+
import {Skia} from '@shopify/react-native-skia';
3+
import type {ChartDefaultTypeface} from '@components/Charts/types/chartSkiaTypefaceTypes';
4+
import {CHART_FONT_MGR_FROM_TYPEFACES} from './chartFontConstants';
5+
6+
function buildSkiaFontManager(typefaces: ChartDefaultTypeface): SkTypefaceFontProvider {
7+
const fontMgr = Skia.TypefaceFontProvider.Make();
8+
9+
for (const [familyName, typefaceKeys] of Object.entries(CHART_FONT_MGR_FROM_TYPEFACES)) {
10+
for (const typefaceKey of typefaceKeys) {
11+
const typeface = typefaces[typefaceKey];
12+
13+
if (typeface) {
14+
fontMgr.registerFont(typeface, familyName);
15+
}
16+
}
17+
}
18+
19+
return fontMgr;
20+
}
21+
22+
export default buildSkiaFontManager;

‎src/components/Charts/utils/chartFontsCache.ts‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import {Image} from 'react-native';
44
import type ChartFontsValue from '@components/Charts/types/chartFontsTypes';
55
import type {ChartDefaultTypeface, ChartSkiaTypefaceKey} from '@components/Charts/types/chartSkiaTypefaceTypes';
66
import Log from '@libs/Log';
7+
import buildSkiaFontManager from './buildSkiaFontManager';
78
import {CHART_FONT_MGR_SUPPLEMENTAL_ASSETS, CHART_SKIA_TYPEFACE_ASSETS} from './chartFontAssets';
8-
import {CHART_FONT_MGR_FROM_TYPEFACES} from './chartFontConstants';
99

1010
const EMPTY_CHART_FONTS: ChartFontsValue = {
1111
typefaces: Object.fromEntries((Object.keys(CHART_SKIA_TYPEFACE_ASSETS) as ChartSkiaTypefaceKey[]).map((key) => [key, null])) as ChartDefaultTypeface,
@@ -54,17 +54,7 @@ function loadChartSkiaTypefaces(): Promise<ChartDefaultTypeface> {
5454
}
5555

5656
function buildChartFontsValue(typefaces: ChartDefaultTypeface): Promise<ChartFontsValue> {
57-
const fontMgr = Skia.TypefaceFontProvider.Make();
58-
59-
for (const [familyName, typefaceKeys] of Object.entries(CHART_FONT_MGR_FROM_TYPEFACES)) {
60-
for (const typefaceKey of typefaceKeys) {
61-
const typeface = typefaces[typefaceKey];
62-
63-
if (typeface) {
64-
fontMgr.registerFont(typeface, familyName);
65-
}
66-
}
67-
}
57+
const fontMgr = buildSkiaFontManager(typefaces);
6858

6959
return Promise.all(
7060
Object.entries(CHART_FONT_MGR_SUPPLEMENTAL_ASSETS).map(async ([familyName, asset]) => {

‎src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx‎

Lines changed: 2 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import FontUtils from '@styles/utils/FontUtils';
88
import type ChildrenProps from '@src/types/utils/ChildrenProps';
99
import {computeEmbeddedMaxWidth, isChildOfTaskTitle} from './htmlEngineUtils';
1010
import htmlRenderers from './HTMLRenderers';
11+
import VICTORY_HTML_ELEMENT_MODELS from './HTMLRenderers/VictoryChartRenderer/victoryHtmlElementModels';
1112

1213
type BaseHTMLEngineProviderProps = ChildrenProps & {
1314
/** Whether text elements should be selectable */
@@ -200,38 +201,7 @@ function BaseHTMLEngineProvider({textSelectable = false, children, enableExperim
200201
tagName: 'sparkles-icon',
201202
contentModel: HTMLContentModel.mixed,
202203
}),
203-
victorychart: HTMLElementModel.fromCustomModel({
204-
tagName: 'victorychart',
205-
contentModel: HTMLContentModel.block,
206-
}),
207-
victorybar: HTMLElementModel.fromCustomModel({
208-
tagName: 'victorybar',
209-
contentModel: HTMLContentModel.block,
210-
}),
211-
victoryline: HTMLElementModel.fromCustomModel({
212-
tagName: 'victoryline',
213-
contentModel: HTMLContentModel.block,
214-
}),
215-
victoryaxis: HTMLElementModel.fromCustomModel({
216-
tagName: 'victoryaxis',
217-
contentModel: HTMLContentModel.block,
218-
}),
219-
victorylabel: HTMLElementModel.fromCustomModel({
220-
tagName: 'victorylabel',
221-
contentModel: HTMLContentModel.textual,
222-
}),
223-
victorylegend: HTMLElementModel.fromCustomModel({
224-
tagName: 'victorylegend',
225-
contentModel: HTMLContentModel.block,
226-
}),
227-
victorygroup: HTMLElementModel.fromCustomModel({
228-
tagName: 'victorygroup',
229-
contentModel: HTMLContentModel.block,
230-
}),
231-
victorypie: HTMLElementModel.fromCustomModel({
232-
tagName: 'victorypie',
233-
contentModel: HTMLContentModel.block,
234-
}),
204+
...VICTORY_HTML_ELEMENT_MODELS,
235205
}),
236206
[
237207
styles.taskTitleMenuItem,

‎src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/components/VictoryChartBar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import type {TNode} from 'react-native-render-html';
33
import {Bar} from 'victory-native';
4-
import {BAR_INNER_PADDING} from '@components/Charts/BarChart/BarChartContent';
4+
import BAR_INNER_PADDING from '@components/Charts/barChartConstants';
55
import VictoryTheme from '@components/Charts/VictoryTheme';
66
import {useVictoryChartRenderArgs} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/context/VictoryChartRenderArgsContext';
77
import getYKey from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/getYKey';

‎src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/components/VictoryChartBarGroup.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import type {TNode} from 'react-native-render-html';
33
import {BarGroup} from 'victory-native';
4-
import {BAR_INNER_PADDING} from '@components/Charts/BarChart/BarChartContent';
4+
import BAR_INNER_PADDING from '@components/Charts/barChartConstants';
55
import VictoryTheme from '@components/Charts/VictoryTheme';
66
import {useVictoryChartRenderArgs} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/context/VictoryChartRenderArgsContext';
77
import getYKey from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/getYKey';

0 commit comments

Comments
 (0)