[No QA] VictoryChart: strict types and parsing

cspell.json

@@ -482,6 +482,7 @@
         "canvaskit",
         "capitalone",
         "cardreader",
+        "catmull",
         "ccache",
         "ccupload",
         "cdfbmo",

server/victory-chart-renderer/src/resolveCanvasSize.ts

@@ -1,5 +1,5 @@
 import type {TNode} from 'react-native-render-html';
-import parseAttribute from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/parseAttribute';
+import {parseAttributeAsNumber} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/parseAttribute';
 import type CanvasSize from './types/CanvasSize';
 
 const DEFAULT_WIDTH = 600;
@@ -15,8 +15,8 @@ function isPositiveDimension(value: unknown): value is number {
 
 function hasPositionedOverlay(tnode: TNode): boolean {
     if (tnode.tagName === 'victorylabel' || tnode.tagName === 'victorylegend') {
-        const x = parseAttribute<number>(tnode.attributes.x);
-        const y = parseAttribute<number>(tnode.attributes.y);
+        const x = parseAttributeAsNumber(tnode.attributes.x);
+        const y = parseAttributeAsNumber(tnode.attributes.y);
 
         if (isFiniteCoordinate(x) || isFiniteCoordinate(y)) {
             return true;
@@ -27,8 +27,8 @@ function hasPositionedOverlay(tnode: TNode): boolean {
 }
 
 function resolveCanvasSize(tnode: TNode): CanvasSize {
-    const rawWidth = parseAttribute<number>(tnode.attributes.width);
-    const rawHeight = parseAttribute<number>(tnode.attributes.height);
+    const rawWidth = parseAttributeAsNumber(tnode.attributes.width);
+    const rawHeight = parseAttributeAsNumber(tnode.attributes.height);
     const hasWidth = rawWidth !== undefined;
     const hasHeight = rawHeight !== undefined;
     const widthIsValid = isPositiveDimension(rawWidth);

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

@@ -5,7 +5,7 @@ import BAR_INNER_PADDING from '@components/Charts/barChartConstants';
 import VictoryTheme from '@components/Charts/VictoryTheme';
 import {useVictoryChartRenderArgs} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/context/VictoryChartRenderArgsContext';
 import getYKey from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/getYKey';
-import parseAttribute from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/parseAttribute';
+import {parseAttributeAsNumber} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/parseAttribute';
 import parseCornerRadius from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/parseCornerRadius';
 import parseStyles from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/parseStyles';
 
@@ -22,7 +22,7 @@ function VictoryChartBar({tnode}: VictoryChartBarProps) {
             color={nodeStyles.fill ?? VictoryTheme.colors.default}
             innerPadding={BAR_INNER_PADDING}
             roundedCorners={parseCornerRadius(tnode.attributes.cornerradius)}
-            barWidth={parseAttribute(tnode.attributes.barwidth)}
+            barWidth={parseAttributeAsNumber(tnode.attributes.barwidth)}
         />
     );
 }

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

@@ -5,7 +5,7 @@ import BAR_INNER_PADDING from '@components/Charts/barChartConstants';
 import VictoryTheme from '@components/Charts/VictoryTheme';
 import {useVictoryChartRenderArgs} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/context/VictoryChartRenderArgsContext';
 import getYKey from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/getYKey';
-import parseAttribute from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/parseAttribute';
+import {parseAttributeAsNumber} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/parseAttribute';
 import parseCornerRadius from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/parseCornerRadius';
 import parseOffset from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/parseOffset';
 import parseStyles from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/parseStyles';
@@ -25,7 +25,7 @@ function VictoryChartBarGroup({tnode, isHorizontal}: VictoryChartBarGroupProps)
     }
 
     const roundedCorners = parseCornerRadius(firstBarChild?.attributes?.cornerradius ?? '');
-    const barWidth = firstBarChild.attributes.barwidth !== undefined ? Number(parseAttribute(firstBarChild.attributes.barwidth)) : undefined;
+    const barWidth = parseAttributeAsNumber(firstBarChild.attributes.barwidth);
     const betweenGroupPadding = barWidth
         ? parseOffset(tnode.attributes.offset, chartBounds, barChildren.length, barWidth, points[getYKey(firstBarChild)].length, isHorizontal ?? false)
         : undefined;

src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/components/VictoryChartLine.tsx

@@ -4,7 +4,7 @@ import {Line} from 'victory-native';
 import VictoryTheme from '@components/Charts/VictoryTheme';
 import {useVictoryChartRenderArgs} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/context/VictoryChartRenderArgsContext';
 import getYKey from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/getYKey';
-import parseAttribute from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/parseAttribute';
+import parseCurveType from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/parseCurveType';
 import parseStyles from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/parseStyles';
 
 type VictoryChartLineProps = {tnode: TNode};
@@ -18,7 +18,7 @@ function VictoryChartLine({tnode}: VictoryChartLineProps) {
             points={points[yKey]}
             color={nodeStyles.stroke ?? VictoryTheme.colors.default}
             strokeWidth={nodeStyles.strokeWidth !== undefined ? Number(nodeStyles.strokeWidth) : undefined}
-            curveType={parseAttribute(tnode.attributes.interpolation)}
+            curveType={parseCurveType(tnode.attributes.interpolation)}
         />
     );
 }

src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/components/VictoryChartPie.tsx

@@ -8,7 +8,7 @@ import parseShiftedLineSegmentNode from '@components/HTMLEngineProvider/HTMLRend
 import parseVictoryLabelNode from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/parsers/victoryLabelParser';
 import type {PolarChartData} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/types';
 import convertAngleToArcLength from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/convertAngleToArcLength';
-import parseAttribute from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/parseAttribute';
+import {parseAttributeAsNumber, parseAttributeAsStringArray} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/parseAttribute';
 import parseComponent from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/parseComponent';
 import VictoryChartPieLabel from './VictoryChartPieLabel';
 
@@ -26,19 +26,19 @@ function VictoryChartPie({tnode}: VictoryChartPieProps) {
     const renderEngine = useAmbientTRenderEngine();
     const labelComponentNode = parseComponent(tnode.attributes.labelcomponent, renderEngine, 'victorylabel', HTMLContentModel.textual);
     const baseLabelItem = labelComponentNode ? parseVictoryLabelNode(labelComponentNode).labelItems?.at(0) : undefined;
-    const pieLabels = parseAttribute<string[]>(tnode.attributes.labels);
-    const labelRadius = tnode.attributes.labelradius !== undefined ? Number(parseAttribute(tnode.attributes.labelradius)) : undefined;
-    const innerRadius = tnode.attributes.innerradius !== undefined ? Number(parseAttribute(tnode.attributes.innerradius)) : undefined;
-    const padAngle = tnode.attributes.padangle !== undefined ? Number(parseAttribute(tnode.attributes.padangle)) : undefined;
-    const radius = tnode.attributes.radius !== undefined ? Number(parseAttribute(tnode.attributes.radius)) : undefined;
+    const pieLabels = parseAttributeAsStringArray(tnode.attributes.labels);
+    const labelRadius = parseAttributeAsNumber(tnode.attributes.labelradius);
+    const innerRadius = parseAttributeAsNumber(tnode.attributes.innerradius);
+    const padAngle = parseAttributeAsNumber(tnode.attributes.padangle);
+    const radius = parseAttributeAsNumber(tnode.attributes.radius);
     const size = radius ? radius * 2 : undefined;
     const angularStrokeWidth = padAngle && radius ? 2 * convertAngleToArcLength(padAngle, radius) : 0;
     const angularStrokeColor = typeof chartContainerStyles.backgroundColor === 'string' ? chartContainerStyles.backgroundColor : VictoryTheme.colors.default;
     const labelIndicatorNode = parseComponent(tnode.attributes.labelindicator, renderEngine, 'shiftedlinesegment', HTMLContentModel.block);
     const labelIndicatorStyles = labelIndicatorNode ? parseShiftedLineSegmentNode(labelIndicatorNode) : undefined;
     const {xShift: labelIndicatorXShift, yShift: labelIndicatorYShift, stroke: labelIndicatorStroke, strokeWidth: labelIndicatorStrokeWidth} = labelIndicatorStyles ?? {};
-    const labelIndicatorInnerOffset = tnode.attributes.labelindicatorinneroffset !== undefined ? Number(parseAttribute(tnode.attributes.labelindicatorinneroffset)) : undefined;
-    const labelIndicatorOuterOffset = tnode.attributes.labelindicatorouteroffset !== undefined ? Number(parseAttribute(tnode.attributes.labelindicatorouteroffset)) : undefined;
+    const labelIndicatorInnerOffset = parseAttributeAsNumber(tnode.attributes.labelindicatorinneroffset);
+    const labelIndicatorOuterOffset = parseAttributeAsNumber(tnode.attributes.labelindicatorouteroffset);
     const perSliceData = Object.values(data)
         .map((entry) => (entry as PolarChartData).label)
         .reduce(

src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/parsers/shiftedLineSegmentParser.ts

@@ -1,14 +1,14 @@
 import type {TNode} from 'react-native-render-html';
-import type {RawShiftedLineSegmentStyle} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/types';
-import parseAttribute from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/parseAttribute';
+import {parseAttributeAsNumber} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/parseAttribute';
+import parseRawShiftedLineSegmentStyle from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/parseRawShiftedLineSegmentStyle';
 
 /**
  * Parse label indicator config from a `<ShiftedLineSegment>` node.
  */
 function parseShiftedLineSegmentNode(tnode: TNode) {
-    const xShift = parseAttribute<number>(tnode.attributes.dx) ?? 0;
-    const yShift = parseAttribute<number>(tnode.attributes.dy) ?? 0;
-    const style = parseAttribute<RawShiftedLineSegmentStyle>(tnode.attributes.style);
+    const xShift = parseAttributeAsNumber(tnode.attributes.dx) ?? 0;
+    const yShift = parseAttributeAsNumber(tnode.attributes.dy) ?? 0;
+    const style = parseRawShiftedLineSegmentStyle(tnode.attributes.style);
     const stroke = style?.stroke;
     const strokeWidth = style?.strokeWidth;
     return {xShift, yShift, stroke, strokeWidth};

src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/parsers/victoryAxisParser.ts

@@ -1,8 +1,14 @@
 import {Skia} from '@shopify/react-native-skia';
 import type {SkTypeface} from '@shopify/react-native-skia';
 import type {TNode} from 'react-native-render-html';
-import type {PartialProcessNodeResult, ProcessNodeResult, RawAxisStyle} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/types';
-import parseAttribute from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/parseAttribute';
+import type {PartialProcessNodeResult, ProcessNodeResult} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/types';
+import {
+    parseAttributeAsNumber,
+    parseAttributeAsNumberArray,
+    parseAttributeAsString,
+    parseAttributeAsStringArray,
+} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/parseAttribute';
+import parseRawAxisStyle from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/parseRawAxisStyle';
 
 /**
  * Parse axis config from a `<victoryaxis>` node.
@@ -11,14 +17,14 @@ import parseAttribute from '@components/HTMLEngineProvider/HTMLRenderers/Victory
 function parseVictoryAxisNode(tnode: TNode, typeface: SkTypeface | null, rootProcessedResult: ProcessNodeResult | null): PartialProcessNodeResult {
     const isHorizontal = rootProcessedResult?.isHorizontal;
     const isDependentAxis = 'dependentaxis' in tnode.attributes && tnode.attributes.dependentaxis !== 'false';
-    const orientation = parseAttribute<string>(tnode.attributes.orientation);
-    const tickCount = parseAttribute<number>(tnode.attributes.tickcount) ?? 0;
-    const rawTickValues = parseAttribute<number[]>(tnode.attributes.tickvalues);
+    const orientation = parseAttributeAsString(tnode.attributes.orientation);
+    const tickCount = parseAttributeAsNumber(tnode.attributes.tickcount) ?? 0;
+    const rawTickValues = parseAttributeAsNumberArray(tnode.attributes.tickvalues);
     const tickValues = Array.isArray(rawTickValues) ? rawTickValues : undefined;
-    const rawTickFormat = parseAttribute<string[]>(tnode.attributes.tickformat);
+    const rawTickFormat = parseAttributeAsStringArray(tnode.attributes.tickformat);
     const tickFormat = Array.isArray(rawTickFormat) ? rawTickFormat : undefined;
     const formatLabel = (label: string | number) => tickFormat?.[tickValues?.indexOf(Number(label)) ?? -1] ?? String(label);
-    const style = parseAttribute<RawAxisStyle>(tnode.attributes.style);
+    const style = parseRawAxisStyle(tnode.attributes.style);
     const lineColor = style?.grid?.stroke;
     // 0 width intentionally avoids drawing grid lines, preserving VictoryChart compatibility
     const lineWidth = style?.grid?.strokeWidth !== undefined ? Number(style.grid.strokeWidth) : 0;

src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/parsers/victoryLabelParser.ts

@@ -1,61 +1,60 @@
 import type {TNode} from 'react-native-render-html';
 import normalizeChartFontWeight from '@components/Charts/utils/normalizeChartFontWeight';
-import type {LabelItem, PartialProcessNodeResult, RawLabelStyle, TextAnchor} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/types';
-import parseAttribute from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/parseAttribute';
+import type {LabelItem, PartialProcessNodeResult} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/types';
+import {parseAttributeAsNumber, parseAttributeAsNumberArray, parseAttributeAsString} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/parseAttribute';
+import parseRawLabelStyle from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/parseRawLabelStyle';
+import parseTextAnchor from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/parseTextAnchor';
 import unescapeVictoryChartText from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/unescapeVictoryChartText';
 
 /**
  * Parse label config from a `<victorylabel>` node.
  */
 function parseVictoryLabelNode(tnode: TNode): PartialProcessNodeResult {
     const labelItem: LabelItem = {
-        x: parseAttribute<number>(tnode.attributes.x) ?? 0,
-        y: parseAttribute<number>(tnode.attributes.y) ?? 0,
-        text: unescapeVictoryChartText(parseAttribute<string>(tnode.attributes.text) ?? ''),
+        x: parseAttributeAsNumber(tnode.attributes.x) ?? 0,
+        y: parseAttributeAsNumber(tnode.attributes.y) ?? 0,
+        text: unescapeVictoryChartText(parseAttributeAsString(tnode.attributes.text) ?? ''),
         color: {},
         fontSize: {},
         fontWeight: {},
         fontFamily: {},
         fontStyle: {},
-        lineHeight: parseAttribute<number[]>(tnode.attributes.lineheight),
-        textAnchor: parseAttribute<TextAnchor>(tnode.attributes.textanchor),
-        verticalAnchor: parseAttribute<TextAnchor>(tnode.attributes.verticalanchor),
+        lineHeight: parseAttributeAsNumberArray(tnode.attributes.lineheight),
+        textAnchor: parseTextAnchor(tnode.attributes.textanchor),
+        verticalAnchor: parseTextAnchor(tnode.attributes.verticalanchor),
     };
 
-    const style = parseAttribute(tnode.attributes.style);
-    if (style) {
-        const textStyles = Array.isArray(style) ? (style as RawLabelStyle[]) : [style as RawLabelStyle];
-        for (const [index, textStyle] of textStyles.entries()) {
-            if (textStyle.fill) {
-                labelItem.color = {
-                    ...labelItem.color,
-                    [index]: textStyle.fill,
-                };
-            }
-            if (textStyle.fontSize) {
-                labelItem.fontSize = {
-                    ...labelItem.fontSize,
-                    [index]: Number(textStyle.fontSize),
-                };
-            }
-            if (textStyle.fontWeight) {
-                labelItem.fontWeight = {
-                    ...labelItem.fontWeight,
-                    [index]: normalizeChartFontWeight(textStyle.fontWeight),
-                };
-            }
-            if (textStyle.fontFamily) {
-                labelItem.fontFamily = {
-                    ...labelItem.fontFamily,
-                    [index]: textStyle.fontFamily,
-                };
-            }
-            if (textStyle.fontStyle) {
-                labelItem.fontStyle = {
-                    ...labelItem.fontStyle,
-                    [index]: textStyle.fontStyle,
-                };
-            }
+    const style = parseRawLabelStyle(tnode.attributes.style);
+    for (const [index, textStyle] of style.entries()) {
+        if (textStyle.fill) {
+            labelItem.color = {
+                ...labelItem.color,
+                [index]: textStyle.fill,
+            };
+        }
+        if (textStyle.fontSize) {
+            labelItem.fontSize = {
+                ...labelItem.fontSize,
+                [index]: Number(textStyle.fontSize),
+            };
+        }
+        if (textStyle.fontWeight) {
+            labelItem.fontWeight = {
+                ...labelItem.fontWeight,
+                [index]: normalizeChartFontWeight(textStyle.fontWeight),
+            };
+        }
+        if (textStyle.fontFamily) {
+            labelItem.fontFamily = {
+                ...labelItem.fontFamily,
+                [index]: textStyle.fontFamily,
+            };
+        }
+        if (textStyle.fontStyle) {
+            labelItem.fontStyle = {
+                ...labelItem.fontStyle,
+                [index]: textStyle.fontStyle,
+            };
         }
     }