pixelize-native-library 1.0.7 → 1.2.0

package/lib/module/modules/charts/BarList.js

@@ -1,14 +1,67 @@
 "use strict";
 
-import { memo } from "react";
+import { memo, useCallback, useMemo } from "react";
 import { Pressable, StyleSheet, Text, View } from "react-native";
-import { useTheme } from "../../theme/index.js";
+import { useTheme } from "../../theme/hooks.js";
 import { barListHeaderStructure, barListRowStructure, barListStructure, barListTrackStructure, resolveBarListColors } from "./Charts.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function barFraction(value, max) {
   if (!Number.isFinite(value) || !Number.isFinite(max) || max <= 0) return 0;
   return Math.min(Math.max(value / max, 0), 1);
 }
+const BarListRow = /*#__PURE__*/memo(function BarListRow({
+  index,
+  label,
+  value,
+  icon,
+  fillWidth,
+  fillColor,
+  trackColor,
+  rowStyle,
+  headerStyle,
+  trackStyle,
+  labelTextStyle,
+  valueTextStyle,
+  testID,
+  onPress
+}) {
+  const press = useCallback(() => onPress?.(index), [onPress, index]);
+  const Row = onPress === undefined ? View : Pressable;
+  return /*#__PURE__*/_jsxs(Row, {
+    testID: testID,
+    accessible: true,
+    accessibilityRole: onPress === undefined ? "text" : "button",
+    accessibilityLabel: `${label}, ${value}`,
+    onPress: onPress === undefined ? undefined : press,
+    style: rowStyle,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: headerStyle,
+      children: [icon, /*#__PURE__*/_jsx(Text, {
+        numberOfLines: 1,
+        style: labelTextStyle,
+        children: label
+      }), /*#__PURE__*/_jsx(Text, {
+        numberOfLines: 1,
+        style: valueTextStyle,
+        children: value
+      })]
+    }), /*#__PURE__*/_jsx(View, {
+      testID: testID === undefined ? undefined : `${testID}-track`,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      style: [trackStyle, {
+        backgroundColor: trackColor
+      }],
+      children: /*#__PURE__*/_jsx(View, {
+        testID: testID === undefined ? undefined : `${testID}-fill`,
+        style: [styles.fill, {
+          width: fillWidth,
+          backgroundColor: fillColor
+        }]
+      })
+    })]
+  });
+});
 export const BarList = /*#__PURE__*/memo(function BarList({
   items,
   maxValue,
@@ -17,55 +70,52 @@ export const BarList = /*#__PURE__*/memo(function BarList({
   testID
 }) {
   const theme = useTheme();
-  const colors = resolveBarListColors(theme.colors);
-  const max = maxValue ?? items.reduce((highest, item) => Math.max(highest, Number.isFinite(item.value) ? item.value : 0), 0);
+  const colors = useMemo(() => resolveBarListColors(theme.colors), [theme.colors]);
+  const rows = useMemo(() => {
+    const max = maxValue ?? items.reduce((highest, item) => Math.max(highest, Number.isFinite(item.value) ? item.value : 0), 0);
+    return items.map((item, index) => ({
+      key: `${index}-${item.label}`,
+      label: item.label,
+      value: item.value,
+      icon: item.icon,
+      fillWidth: `${barFraction(item.value, max) * 100}%`,
+      fillColor: item.color ?? colors.fill
+    }));
+  }, [items, maxValue, colors.fill]);
+  const rowStyle = useMemo(() => barListRowStructure(theme), [theme]);
+  const headerStyle = useMemo(() => barListHeaderStructure(theme), [theme]);
+  const trackStyle = useMemo(() => barListTrackStructure(theme), [theme]);
+  const labelTextStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.medium), styles.label, {
+    fontSize: theme.fontSizes.sm,
+    color: colors.label
+  }], [theme, colors.label]);
+  const valueTextStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    fontSize: theme.fontSizes.sm,
+    color: colors.valueColor
+  }], [theme, colors.valueColor]);
+  const pressItem = useCallback(index => {
+    const item = items[index];
+    if (item !== undefined) onPressItem?.(item, index);
+  }, [items, onPressItem]);
   return /*#__PURE__*/_jsx(View, {
     testID: testID,
     style: [barListStructure(theme), style],
-    children: items.map((item, index) => {
-      const rowTestID = testID === undefined ? undefined : `${testID}-item-${index}`;
-      const Row = onPressItem === undefined ? View : Pressable;
-      return /*#__PURE__*/_jsxs(Row, {
-        testID: rowTestID,
-        accessible: true,
-        accessibilityRole: onPressItem === undefined ? "text" : "button",
-        accessibilityLabel: `${item.label}, ${item.value}`,
-        onPress: onPressItem === undefined ? undefined : () => onPressItem(item, index),
-        style: barListRowStructure(theme),
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: barListHeaderStructure(theme),
-          children: [item.icon, /*#__PURE__*/_jsx(Text, {
-            numberOfLines: 1,
-            style: [theme.fontStyleForWeight(theme.fontWeights.medium), styles.label, {
-              fontSize: theme.fontSizes.sm,
-              color: colors.label
-            }],
-            children: item.label
-          }), /*#__PURE__*/_jsx(Text, {
-            numberOfLines: 1,
-            style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
-              fontSize: theme.fontSizes.sm,
-              color: colors.value
-            }],
-            children: item.value
-          })]
-        }), /*#__PURE__*/_jsx(View, {
-          testID: rowTestID === undefined ? undefined : `${rowTestID}-track`,
-          accessibilityElementsHidden: true,
-          importantForAccessibility: "no-hide-descendants",
-          style: [barListTrackStructure(theme), {
-            backgroundColor: colors.track
-          }],
-          children: /*#__PURE__*/_jsx(View, {
-            testID: rowTestID === undefined ? undefined : `${rowTestID}-fill`,
-            style: [styles.fill, {
-              width: `${barFraction(item.value, max) * 100}%`,
-              backgroundColor: item.color ?? colors.fill
-            }]
-          })
-        })]
-      }, `${index}-${item.label}`);
-    })
+    children: rows.map((row, index) => /*#__PURE__*/_jsx(BarListRow, {
+      testID: testID === undefined ? undefined : `${testID}-item-${index}`,
+      index: index,
+      label: row.label,
+      value: row.value,
+      icon: row.icon,
+      fillWidth: row.fillWidth,
+      fillColor: row.fillColor,
+      trackColor: colors.track,
+      rowStyle: rowStyle,
+      headerStyle: headerStyle,
+      trackStyle: trackStyle,
+      labelTextStyle: labelTextStyle,
+      valueTextStyle: valueTextStyle,
+      onPress: onPressItem === undefined ? undefined : pressItem
+    }, row.key))
   });
 });
 const styles = StyleSheet.create({

package/lib/module/modules/charts/ChartLegend.js

@@ -0,0 +1,154 @@
+"use strict";
+
+/**
+ * Internal — the one text legend shared by `PieChart`, `LineChart`, `BarChart` and `DonutChart`.
+ * Not exported from `index.ts`: a consumer turns a legend on with `showLegend`, never by mounting
+ * this directly.
+ *
+ * A swatch-only legend does not satisfy WCAG 1.4.1 on its own — matching a swatch to a mark is
+ * still a colour judgement. So the glyph mirrors whatever second channel its chart draws: `line`
+ * repeats the series' dash pattern and marker shape, `mark` repeats the shape knocked out of the
+ * bar, and `swatch` is the plain square used where the chart has no per-mark shape (pie, donut),
+ * whose colour-independent channel is the label text and the segments' fixed order instead.
+ */
+import { memo, useMemo } from "react";
+import { Text, View } from "react-native";
+import Svg, { Circle, Line as SvgLine, Path, Rect } from "react-native-svg";
+import { useTheme } from "../../theme/hooks.js";
+import { LEGEND_GLYPH_HEIGHT, LEGEND_GLYPH_MARKER_RADIUS, LEGEND_GLYPH_STROKE_WIDTH, LEGEND_GLYPH_WIDTH, LEGEND_MARK_SIZE, chartLegendRowStructure, chartLegendStructure, chartLegendSwatchStructure, describeMarker } from "./Charts.variants.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const LegendGlyph = /*#__PURE__*/memo(function LegendGlyph({
+  glyph,
+  color,
+  shape,
+  dash,
+  knockout,
+  swatchStyle,
+  testID
+}) {
+  const swatchColor = useMemo(() => ({
+    backgroundColor: color
+  }), [color]);
+  if (glyph === "swatch") {
+    return /*#__PURE__*/_jsx(View, {
+      testID: testID,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      style: [swatchStyle, swatchColor]
+    });
+  }
+  const marker = shape ?? "circle";
+  if (glyph === "mark") {
+    const center = LEGEND_MARK_SIZE / 2;
+    return /*#__PURE__*/_jsx(View, {
+      testID: testID,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      children: /*#__PURE__*/_jsxs(Svg, {
+        width: LEGEND_MARK_SIZE,
+        height: LEGEND_MARK_SIZE,
+        children: [/*#__PURE__*/_jsx(Rect, {
+          x: 0,
+          y: 0,
+          width: LEGEND_MARK_SIZE,
+          height: LEGEND_MARK_SIZE,
+          fill: color
+        }), marker === "circle" ? /*#__PURE__*/_jsx(Circle, {
+          cx: center,
+          cy: center,
+          r: LEGEND_GLYPH_MARKER_RADIUS,
+          fill: knockout
+        }) : /*#__PURE__*/_jsx(Path, {
+          d: describeMarker(marker, center, center, LEGEND_GLYPH_MARKER_RADIUS),
+          fill: knockout
+        })]
+      })
+    });
+  }
+  const midY = LEGEND_GLYPH_HEIGHT / 2;
+  const midX = LEGEND_GLYPH_WIDTH / 2;
+  return /*#__PURE__*/_jsx(View, {
+    testID: testID,
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants",
+    children: /*#__PURE__*/_jsxs(Svg, {
+      width: LEGEND_GLYPH_WIDTH,
+      height: LEGEND_GLYPH_HEIGHT,
+      children: [/*#__PURE__*/_jsx(SvgLine, {
+        x1: 0,
+        x2: LEGEND_GLYPH_WIDTH,
+        y1: midY,
+        y2: midY,
+        stroke: color,
+        strokeWidth: LEGEND_GLYPH_STROKE_WIDTH,
+        strokeLinecap: "round",
+        strokeDasharray: dash
+      }), marker === "circle" ? /*#__PURE__*/_jsx(Circle, {
+        cx: midX,
+        cy: midY,
+        r: LEGEND_GLYPH_MARKER_RADIUS,
+        fill: color
+      }) : /*#__PURE__*/_jsx(Path, {
+        d: describeMarker(marker, midX, midY, LEGEND_GLYPH_MARKER_RADIUS),
+        fill: color
+      })]
+    })
+  });
+});
+const ChartLegendRow = /*#__PURE__*/memo(function ChartLegendRow({
+  entry,
+  glyph,
+  knockout,
+  rowStyle,
+  swatchStyle,
+  textStyle,
+  testID
+}) {
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID,
+    style: rowStyle,
+    children: [/*#__PURE__*/_jsx(LegendGlyph, {
+      testID: testID === undefined ? undefined : `${testID}-swatch`,
+      glyph: glyph,
+      color: entry.color,
+      shape: entry.shape,
+      dash: entry.dash,
+      knockout: knockout,
+      swatchStyle: swatchStyle
+    }), /*#__PURE__*/_jsx(Text, {
+      numberOfLines: 1,
+      style: textStyle,
+      children: entry.label
+    })]
+  });
+});
+export const ChartLegend = /*#__PURE__*/memo(function ChartLegend({
+  entries,
+  glyph,
+  testID
+}) {
+  const theme = useTheme();
+  const containerStyle = useMemo(() => chartLegendStructure(theme), [theme]);
+  const rowStyle = useMemo(() => chartLegendRowStructure(theme), [theme]);
+  const swatchStyle = useMemo(() => chartLegendSwatchStructure(theme), [theme]);
+  const textStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    flex: 1,
+    fontSize: theme.fontSizes.sm,
+    color: theme.colors.fg.default
+  }], [theme]);
+  if (entries.length === 0) return null;
+  return /*#__PURE__*/_jsx(View, {
+    testID: testID,
+    style: containerStyle,
+    children: entries.map((entry, index) => /*#__PURE__*/_jsx(ChartLegendRow, {
+      testID: testID === undefined ? undefined : `${testID}-${index}`,
+      entry: entry,
+      glyph: glyph,
+      knockout: theme.colors.bg.surface,
+      rowStyle: rowStyle,
+      swatchStyle: swatchStyle,
+      textStyle: textStyle
+    }, index))
+  });
+});
+//# sourceMappingURL=ChartLegend.js.map