@pallasoft/ps-mobile-components 1.13.0 → 1.13.1

package/dist/components/ps-chart-bar/ps-chart-bar.js

@@ -1,12 +1,19 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Animated, { useAnimatedProps } from 'react-native-reanimated';
-import { Rect } from 'react-native-svg';
-import { PsChartConfig } from '../../constants/ps-chart-config';
+import { G, Rect } from 'react-native-svg';
+import { PsChartBarCorner } from '../../constants/ps-chart-bar-corner';
+import { PsChartBarService } from '../../services/ps-chart-bar-service';
 const AnimatedRect = Animated.createAnimatedComponent(Rect);
 export const PsChartBar = ({ progress, rect }) => {
+    const radius = PsChartBarService.radius(rect);
+    const hasFlatBase = rect.corner === PsChartBarCorner.Value && radius > 0;
     const animatedProps = useAnimatedProps(() => ({
         height: rect.height * progress.value,
         y: rect.isNegative ? rect.y : rect.y + rect.height * (1 - progress.value),
     }));
-    return (_jsx(AnimatedRect, { animatedProps: animatedProps, fill: rect.color, height: rect.height, rx: Math.min(PsChartConfig.barRadius, rect.width / 2), width: rect.width, x: rect.x, y: rect.y }));
+    const baseProps = useAnimatedProps(() => {
+        const height = Math.min(radius, rect.height * progress.value);
+        return { height, y: rect.isNegative ? rect.y : rect.y + rect.height - height };
+    });
+    return (_jsxs(G, { children: [_jsx(AnimatedRect, { animatedProps: animatedProps, fill: rect.color, height: rect.height, rx: radius, width: rect.width, x: rect.x, y: rect.y }), hasFlatBase ? (_jsx(AnimatedRect, { animatedProps: baseProps, fill: rect.color, height: Math.min(radius, rect.height), width: rect.width, x: rect.x, y: rect.isNegative ? rect.y : rect.y + rect.height - Math.min(radius, rect.height) })) : null] }));
 };

package/dist/components/ps-donut-chart/ps-donut-chart.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useId, useState } from 'react';
 import { View } from 'react-native';
-import Svg from 'react-native-svg';
+import Svg, { G } from 'react-native-svg';
 import { PsChartConfig } from '../../constants/ps-chart-config';
 import { PsChartSkeletonVariant } from '../../constants/ps-chart-skeleton-variant';
 import { usePsChartReveal } from '../../hooks/use-ps-chart-reveal';
@@ -12,6 +12,7 @@ import { PsChartDonutService } from '../../services/ps-chart-donut-service';
 import { PsChartEmptyState } from '../ps-chart-empty-state/ps-chart-empty-state';
 import { PsChartLegend } from '../ps-chart-legend/ps-chart-legend';
 import { PsChartSkeleton } from '../ps-chart-skeleton/ps-chart-skeleton';
+import { PsDonutReveal } from '../ps-donut-reveal/ps-donut-reveal';
 import { PsDonutSlice } from '../ps-donut-slice/ps-donut-slice';
 import { PsText } from '../ps-text/ps-text';
 export const PsDonutChart = ({ centerLabel, centerValue, data, emptyLabel, formatShare, height = PsChartConfig.donutHeight, isLoading = false, revealKey, }) => {
@@ -19,6 +20,7 @@ export const PsDonutChart = ({ centerLabel, centerValue, data, emptyLabel, forma
     const { onLayout, width } = usePsChartWidth();
     const fill = usePsWidgetFill();
     const [selected, setSelected] = useState(null);
+    const maskId = `donut${useId().replace(/[^a-zA-Z0-9]/g, '')}`;
     const progress = usePsChartReveal(!isLoading && width > 0, revealKey);
     if (isLoading)
         return _jsx(PsChartSkeleton, { height: height, variant: PsChartSkeletonVariant.Donut });
@@ -27,7 +29,6 @@ export const PsDonutChart = ({ centerLabel, centerValue, data, emptyLabel, forma
     const slices = PsChartDonutService.slices(data, theme.chart, size);
     if (slices.length === 0)
         return _jsx(PsChartEmptyState, { height: height, label: emptyLabel });
-    const circumference = PsChartDonutService.circumference(size);
     const chosen = selected === null ? null : data[selected];
     const readValue = chosen === null
         ? centerValue
@@ -47,7 +48,7 @@ export const PsDonutChart = ({ centerLabel, centerValue, data, emptyLabel, forma
             justifyContent: 'center',
             minHeight: height + fill,
             rowGap: PsChartConfig.donutGap,
-        }, testID: 'ps-donut-chart', children: [_jsxs(View, { style: { height: size, width: size }, children: [_jsx(Svg, { height: size, width: size, children: slices.map((slice, index) => (_jsx(PsDonutSlice, { circumference: circumference, isDimmed: selected !== null && selected !== index, onPress: () => setSelected(selected === index ? null : index), progress: progress, size: size, slice: slice }, slice.id))) }), _jsxs(View, { pointerEvents: 'none', style: {
+        }, testID: 'ps-donut-chart', children: [_jsxs(View, { style: { height: size, width: size }, children: [_jsxs(Svg, { height: size, width: size, children: [_jsx(PsDonutReveal, { id: maskId, progress: progress, size: size }), _jsx(G, { mask: `url(#${maskId})`, children: slices.map((slice, index) => slice.path === '' ? null : (_jsx(PsDonutSlice, { isDimmed: selected !== null && selected !== index, onPress: () => setSelected(selected === index ? null : index), slice: slice }, slice.id))) })] }), _jsxs(View, { pointerEvents: 'none', style: {
                             alignItems: 'center',
                             bottom: 0,
                             justifyContent: 'center',

package/dist/components/ps-donut-reveal/index.d.ts

@@ -0,0 +1 @@
+export * from './ps-donut-reveal';

package/dist/components/ps-donut-reveal/index.js

@@ -0,0 +1 @@
+export * from './ps-donut-reveal';

package/dist/components/ps-donut-reveal/ps-donut-reveal-props.d.ts

@@ -0,0 +1,6 @@
+import type { SharedValue } from 'react-native-reanimated';
+export interface PsDonutRevealProps {
+    id: string;
+    progress: SharedValue<number>;
+    size: number;
+}

package/dist/components/ps-donut-reveal/ps-donut-reveal-props.js

@@ -0,0 +1 @@
+export {};

package/dist/components/ps-donut-reveal/ps-donut-reveal.d.ts

@@ -0,0 +1,2 @@
+import type { PsDonutRevealProps } from './ps-donut-reveal-props';
+export declare const PsDonutReveal: ({ id, progress, size }: PsDonutRevealProps) => import("react").JSX.Element;

package/dist/components/ps-donut-reveal/ps-donut-reveal.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Animated, { useAnimatedProps } from 'react-native-reanimated';
+import { Circle, Defs, Mask } from 'react-native-svg';
+import { PsChartConfig } from '../../constants/ps-chart-config';
+import { PsChartDonutService } from '../../services/ps-chart-donut-service';
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+export const PsDonutReveal = ({ id, progress, size }) => {
+    const centre = size / 2;
+    const circumference = PsChartDonutService.circumference(size);
+    const animatedProps = useAnimatedProps(() => ({
+        strokeDasharray: [progress.value * circumference, circumference],
+    }));
+    return (_jsx(Defs, { children: _jsx(Mask, { height: size, id: id, maskUnits: 'userSpaceOnUse', width: size, x: 0, y: 0, children: _jsx(AnimatedCircle, { animatedProps: animatedProps, cx: centre, cy: centre, fill: 'none', origin: `${centre}, ${centre}`, r: PsChartDonutService.radius(size), rotation: -90, stroke: 'white', strokeDasharray: [0, circumference], strokeWidth: PsChartConfig.donutThickness + PsChartConfig.donutRevealOverlap }) }) }));
+};

package/dist/components/ps-donut-slice/ps-donut-slice-props.d.ts

@@ -1,10 +1,6 @@
-import type { SharedValue } from 'react-native-reanimated';
 import type { PsDonutSliceData } from '../../interfaces/ps-donut-slice-data';
 export interface PsDonutSliceProps {
-    circumference: number;
     isDimmed: boolean;
     onPress: () => void;
-    progress: SharedValue<number>;
-    size: number;
     slice: PsDonutSliceData;
 }

package/dist/components/ps-donut-slice/ps-donut-slice.d.ts

@@ -1,2 +1,2 @@
 import type { PsDonutSliceProps } from './ps-donut-slice-props';
-export declare const PsDonutSlice: ({ circumference, isDimmed, onPress, progress, size, slice, }: PsDonutSliceProps) => import("react").JSX.Element;
+export declare const PsDonutSlice: ({ isDimmed, onPress, slice }: PsDonutSliceProps) => import("react").JSX.Element;

package/dist/components/ps-donut-slice/ps-donut-slice.js

@@ -1,16 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import Animated, { useAnimatedProps } from 'react-native-reanimated';
-import { Circle } from 'react-native-svg';
+import { Path } from 'react-native-svg';
 import { PsChartConfig } from '../../constants/ps-chart-config';
-import { PsChartDonutService } from '../../services/ps-chart-donut-service';
-const AnimatedCircle = Animated.createAnimatedComponent(Circle);
-export const PsDonutSlice = ({ circumference, isDimmed, onPress, progress, size, slice, }) => {
-    const centre = size / 2;
-    const animatedProps = useAnimatedProps(() => ({
-        strokeDasharray: [
-            Math.max(0, Math.min(slice.dashLength, progress.value * circumference - slice.start)),
-            circumference,
-        ],
-    }));
-    return (_jsx(AnimatedCircle, { animatedProps: animatedProps, cx: centre, cy: centre, fill: 'none', onPress: onPress, opacity: isDimmed ? 0.4 : 1, origin: `${centre}, ${centre}`, r: PsChartDonutService.radius(size), rotation: -90, stroke: slice.color, strokeDasharray: [slice.dashLength, circumference], strokeDashoffset: slice.dashOffset, strokeWidth: PsChartConfig.donutThickness }));
-};
+export const PsDonutSlice = ({ isDimmed, onPress, slice }) => (_jsx(Path, { d: slice.path, fill: slice.color, fillRule: 'evenodd', onPress: onPress, opacity: isDimmed ? PsChartConfig.donutDimmedOpacity : 1 }));

package/dist/components/ps-sortable-grid/ps-sortable-grid.js

@@ -135,12 +135,12 @@ export const PsSortableGrid = ({ getItemSpan, isDisabled = false, items, labels,
         notify(next);
         PsHapticService.play('selection', hasHaptics);
     }, [hasHaptics]);
-    const measure = useCallback((id, total, renderedExtra) => {
-        const natural = PsSortableGridService.natural(total, renderedExtra);
+    const measure = useCallback((id, total, fill) => {
+        const natural = PsSortableGridService.natural(total, fill);
         setMeasured((current) => current[id] !== undefined &&
             Math.abs(current[id] - natural) < PsSortableGridConfig.measureTolerance
             ? current
             : { ...current, [id]: natural });
     }, []);
-    return (_jsx(View, { onLayout: (event) => setWidth(event.nativeEvent.layout.width), style: { height: PsSortableGridService.contentHeight(rects) }, children: order.map((item, index) => (_jsx(PsSortableItem, { canMoveDown: index < order.length - 1, canMoveUp: index > 0, dragX: dragX, dragY: dragY, extra: extras[index], id: item.id, isActive: item.id === activeId, isDisabled: isDisabled, isReady: isReady, label: item.label, labels: labels, onEnd: end, onMeasure: measure, onMove: moveBy, onStart: start, onUpdate: update, rect: rects[index], children: renderItem({ isActive: item.id === activeId, item }) }, item.id))) }));
+    return (_jsx(View, { onLayout: (event) => setWidth(event.nativeEvent.layout.width), style: { height: PsSortableGridService.contentHeight(rects) }, testID: PsSortableGridConfig.testId, children: order.map((item, index) => (_jsx(PsSortableItem, { canMoveDown: index < order.length - 1, canMoveUp: index > 0, dragX: dragX, dragY: dragY, extra: extras[index], id: item.id, isActive: item.id === activeId, isDisabled: isDisabled, isReady: isReady, label: item.label, labels: labels, onEnd: end, onMeasure: measure, onMove: moveBy, onStart: start, onUpdate: update, rect: rects[index], children: renderItem({ isActive: item.id === activeId, item }) }, item.id))) }));
 };

package/dist/components/ps-sortable-grid/ps-sortable-item-props.d.ts

@@ -16,7 +16,7 @@ export interface PsSortableItemProps {
     label: string;
     labels: PsSortableGridLabels;
     onEnd: () => void;
-    onMeasure: (id: string, height: number, renderedExtra: number) => void;
+    onMeasure: (id: string, height: number, fill: number) => void;
     onMove: (id: string, delta: number) => void;
     onStart: (id: string, absoluteY: number) => void;
     onUpdate: (translationX: number, translationY: number, absoluteY: number) => void;

package/dist/components/ps-sortable-grid/ps-sortable-item.js

@@ -1,5 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from 'react';
+import { View } from 'react-native';
 import { GestureDetector, usePanGesture } from 'react-native-gesture-handler';
 import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import { PsSortableGridConfig } from '../../constants/ps-sortable-grid-config';
@@ -11,6 +12,13 @@ export const PsSortableItem = ({ canMoveDown, canMoveUp, children, dragX, dragY,
     const top = useSharedValue(rect.y);
     const scale = useSharedValue(1);
     const wasActive = useRef(false);
+    const laidOut = useRef({ fill: 0, total: null });
+    const fill = isReady ? extra : 0;
+    const report = useCallback(() => {
+        const { fill: laidOutFill, total } = laidOut.current;
+        if (total !== null)
+            onMeasure(id, total, laidOutFill);
+    }, [id, onMeasure]);
     useEffect(() => {
         if (isActive) {
             wasActive.current = true;
@@ -49,12 +57,15 @@ export const PsSortableItem = ({ canMoveDown, canMoveUp, children, dragX, dragY,
         top: isActive ? dragY.value : top.value,
         transform: [{ scale: scale.value }],
     }));
-    return (_jsx(GestureDetector, { gesture: pan, children: _jsx(Animated.View, { accessibilityActions: isDisabled
+    return (_jsx(GestureDetector, { gesture: pan, children: _jsxs(Animated.View, { accessibilityActions: isDisabled
                 ? undefined
                 : [
                     ...(canMoveUp ? [{ label: labels.moveUp, name: 'moveUp' }] : []),
                     ...(canMoveDown ? [{ label: labels.moveDown, name: 'moveDown' }] : []),
-                ], accessibilityLabel: label, accessible: !isDisabled, collapsable: false, onAccessibilityAction: (event) => onMove(id, event.nativeEvent.actionName === 'moveUp' ? -1 : 1), onLayout: (event) => onMeasure(id, event.nativeEvent.layout.height, isReady ? extra : 0), style: [
+                ], accessibilityLabel: label, accessible: !isDisabled, collapsable: false, onAccessibilityAction: (event) => onMove(id, event.nativeEvent.actionName === 'moveUp' ? -1 : 1), onLayout: (event) => {
+                laidOut.current.total = event.nativeEvent.layout.height;
+                report();
+            }, style: [
                 {
                     borderRadius: PsSortableGridConfig.radius,
                     opacity: isReady ? 1 : 0,
@@ -71,5 +82,8 @@ export const PsSortableItem = ({ canMoveDown, canMoveUp, children, dragX, dragY,
                     }
                     : undefined,
                 animatedStyle,
-            ], children: _jsx(PsWidgetFillContext.Provider, { value: isReady ? extra : 0, children: children }) }) }));
+            ], children: [_jsx(View, { onLayout: (event) => {
+                        laidOut.current.fill = event.nativeEvent.layout.height;
+                        report();
+                    }, pointerEvents: 'none', style: { height: fill, left: 0, position: 'absolute', top: 0, width: 0 }, testID: PsSortableGridConfig.fillTestId }), _jsx(PsWidgetFillContext.Provider, { value: fill, children: children })] }) }));
 };

package/dist/constants/ps-chart-bar-corner.d.ts

@@ -0,0 +1,6 @@
+export declare const PsChartBarCorner: {
+    readonly Both: "both";
+    readonly None: "none";
+    readonly Value: "value";
+};
+export type PsChartBarCorner = (typeof PsChartBarCorner)[keyof typeof PsChartBarCorner];

package/dist/constants/ps-chart-bar-corner.js

@@ -0,0 +1,5 @@
+export const PsChartBarCorner = {
+    Both: 'both',
+    None: 'none',
+    Value: 'value',
+};

package/dist/constants/ps-chart-config.d.ts

@@ -6,6 +6,7 @@ export declare const PsChartConfig: {
     readonly axisTickGap: 6;
     readonly barGapRatio: 0.3;
     readonly barRadius: 4;
+    readonly barRadiusWidthRatio: number;
     readonly charWidthRatio: 0.62;
     readonly compactBarGapRatio: 0.15;
     readonly compactSlot: 24;
@@ -18,9 +19,11 @@ export declare const PsChartConfig: {
     readonly donutCenterFontMax: 18;
     readonly donutCenterFontMin: 11;
     readonly donutCenterPadding: 8;
+    readonly donutDimmedOpacity: 0.4;
     readonly donutGap: 16;
     readonly donutMinLegendWidth: 120;
-    readonly donutSliceGap: 2;
+    readonly donutRevealOverlap: 2;
+    readonly donutSliceGap: 3;
     readonly drawMs: 700;
     readonly ellipsis: "…";
     readonly gridLineCount: 3;

package/dist/constants/ps-chart-config.js

@@ -6,6 +6,7 @@ export const PsChartConfig = {
     axisTickGap: 6,
     barGapRatio: 0.3,
     barRadius: 4,
+    barRadiusWidthRatio: 1 / 3,
     charWidthRatio: 0.62,
     compactBarGapRatio: 0.15,
     compactSlot: 24,
@@ -18,9 +19,11 @@ export const PsChartConfig = {
     donutCenterFontMax: 18,
     donutCenterFontMin: 11,
     donutCenterPadding: 8,
+    donutDimmedOpacity: 0.4,
     donutGap: 16,
     donutMinLegendWidth: 120,
-    donutSliceGap: 2,
+    donutRevealOverlap: 2,
+    donutSliceGap: 3,
     drawMs: 700,
     ellipsis: '…',
     gridLineCount: 3,

package/dist/constants/ps-sortable-grid-config.d.ts

@@ -4,6 +4,7 @@ export declare const PsSortableGridConfig: {
     readonly columnGap: 12;
     readonly compactUnits: 2;
     readonly edgeRatio: 0.14;
+    readonly fillTestId: "ps-sortable-fill";
     readonly fullUnits: 2;
     readonly holdTolerance: 8;
     readonly longPressMs: 400;
@@ -17,4 +18,5 @@ export declare const PsSortableGridConfig: {
     readonly scaleMs: 140;
     readonly scrollRamp: 0.25;
     readonly scrollTickMs: 16;
+    readonly testId: "ps-sortable-grid";
 };

package/dist/constants/ps-sortable-grid-config.js

@@ -6,6 +6,7 @@ export const PsSortableGridConfig = {
     columnGap: PsChartConfig.kpiGap,
     compactUnits: 2,
     edgeRatio: 0.14,
+    fillTestId: 'ps-sortable-fill',
     fullUnits: 2,
     holdTolerance: 8,
     longPressMs: 400,
@@ -19,4 +20,5 @@ export const PsSortableGridConfig = {
     scaleMs: 140,
     scrollRamp: 0.25,
     scrollTickMs: 16,
+    testId: 'ps-sortable-grid',
 };

package/dist/interfaces/ps-chart-arc-data.d.ts

@@ -0,0 +1,9 @@
+export interface PsChartArcData {
+    centre: number;
+    end: number;
+    gap: number;
+    inner: number;
+    outer: number;
+    radius: number;
+    start: number;
+}

package/dist/interfaces/ps-chart-arc-data.js

@@ -0,0 +1 @@
+export {};

package/dist/interfaces/ps-chart-bar-rect.d.ts

@@ -1,5 +1,7 @@
+import type { PsChartBarCorner } from '../constants/ps-chart-bar-corner';
 export interface PsChartBarRect {
     color: string;
+    corner: PsChartBarCorner;
     height: number;
     id: string;
     isNegative: boolean;

package/dist/interfaces/ps-donut-slice-data.d.ts

@@ -1,7 +1,5 @@
 export interface PsDonutSliceData {
     color: string;
-    dashLength: number;
-    dashOffset: number;
     id: string;
-    start: number;
+    path: string;
 }

package/dist/interfaces/ps-sortable-measure-data.d.ts

@@ -0,0 +1,4 @@
+export interface PsSortableMeasureData {
+    fill: number;
+    total: number | null;
+}

package/dist/interfaces/ps-sortable-measure-data.js

@@ -0,0 +1 @@
+export {};

package/dist/services/ps-chart-arc-service.d.ts

@@ -0,0 +1,14 @@
+import type { PsChartArcData } from '../interfaces/ps-chart-arc-data';
+export declare class PsChartArcService {
+    static sector(arc: PsChartArcData): string;
+    static ring(centre: number, inner: number, outer: number): string;
+    static minimumAngle(gap: number, radius: number, inner: number): number;
+    private static largeFlag;
+    private static angleOf;
+    private static cornerRadius;
+    private static corner;
+    private static edge;
+    private static at;
+    private static scale;
+    private static text;
+}

package/dist/services/ps-chart-arc-service.js

@@ -0,0 +1,83 @@
+export class PsChartArcService {
+    static sector(arc) {
+        const half = arc.gap / 2;
+        const radius = PsChartArcService.cornerRadius(arc);
+        const outerStart = PsChartArcService.corner(arc, arc.start, 1, arc.outer - radius, radius, half);
+        const outerEnd = PsChartArcService.corner(arc, arc.end, -1, arc.outer - radius, radius, half);
+        const innerEnd = PsChartArcService.corner(arc, arc.end, -1, arc.inner + radius, radius, half);
+        const innerStart = PsChartArcService.corner(arc, arc.start, 1, arc.inner + radius, radius, half);
+        const outerStartRim = PsChartArcService.scale(arc, outerStart, arc.outer / (arc.outer - radius));
+        const outerEndRim = PsChartArcService.scale(arc, outerEnd, arc.outer / (arc.outer - radius));
+        const innerEndRim = PsChartArcService.scale(arc, innerEnd, arc.inner / (arc.inner + radius));
+        const innerStartRim = PsChartArcService.scale(arc, innerStart, arc.inner / (arc.inner + radius));
+        const startOuterEdge = PsChartArcService.edge(arc, arc.start, 1, outerStart, half);
+        const endOuterEdge = PsChartArcService.edge(arc, arc.end, -1, outerEnd, half);
+        const endInnerEdge = PsChartArcService.edge(arc, arc.end, -1, innerEnd, half);
+        const startInnerEdge = PsChartArcService.edge(arc, arc.start, 1, innerStart, half);
+        return [
+            `M${PsChartArcService.text(startOuterEdge)}`,
+            `A${radius} ${radius} 0 0 1 ${PsChartArcService.text(outerStartRim)}`,
+            `A${arc.outer} ${arc.outer} 0 ${PsChartArcService.largeFlag(arc, outerStartRim, outerEndRim)} 1 ${PsChartArcService.text(outerEndRim)}`,
+            `A${radius} ${radius} 0 0 1 ${PsChartArcService.text(endOuterEdge)}`,
+            `L${PsChartArcService.text(endInnerEdge)}`,
+            `A${radius} ${radius} 0 0 1 ${PsChartArcService.text(innerEndRim)}`,
+            `A${arc.inner} ${arc.inner} 0 ${PsChartArcService.largeFlag(arc, innerStartRim, innerEndRim)} 0 ${PsChartArcService.text(innerStartRim)}`,
+            `A${radius} ${radius} 0 0 1 ${PsChartArcService.text(startInnerEdge)}`,
+            'Z',
+        ].join(' ');
+    }
+    static ring(centre, inner, outer) {
+        return [
+            `M${centre} ${centre - outer}`,
+            `A${outer} ${outer} 0 1 1 ${centre} ${centre + outer}`,
+            `A${outer} ${outer} 0 1 1 ${centre} ${centre - outer}`,
+            `M${centre} ${centre - inner}`,
+            `A${inner} ${inner} 0 1 0 ${centre} ${centre + inner}`,
+            `A${inner} ${inner} 0 1 0 ${centre} ${centre - inner}`,
+            'Z',
+        ].join(' ');
+    }
+    static minimumAngle(gap, radius, inner) {
+        return inner > 0 ? (gap + 2 * radius + 1) / inner : 0;
+    }
+    static largeFlag(arc, from, to) {
+        const turn = 2 * Math.PI;
+        const span = (((PsChartArcService.angleOf(arc, to) - PsChartArcService.angleOf(arc, from)) % turn) +
+            turn) %
+            turn;
+        return span > Math.PI ? 1 : 0;
+    }
+    static angleOf(arc, point) {
+        return Math.atan2(point.x - arc.centre, arc.centre - point.y);
+    }
+    static cornerRadius(arc) {
+        const room = ((arc.end - arc.start) * arc.inner - arc.gap) / 2;
+        return Math.max(0, Math.min(arc.radius, (arc.outer - arc.inner) / 2, room));
+    }
+    static corner(arc, angle, side, distance, radius, half) {
+        const offset = half + radius;
+        const along = Math.sqrt(Math.max(distance * distance - offset * offset, 0));
+        return PsChartArcService.at(arc, angle, side, along, offset);
+    }
+    static edge(arc, angle, side, centre, half) {
+        const dx = centre.x - arc.centre;
+        const dy = centre.y - arc.centre;
+        const along = dx * Math.sin(angle) - dy * Math.cos(angle);
+        return PsChartArcService.at(arc, angle, side, along, half);
+    }
+    static at(arc, angle, side, along, across) {
+        return {
+            x: arc.centre + along * Math.sin(angle) + side * across * Math.cos(angle),
+            y: arc.centre - along * Math.cos(angle) + side * across * Math.sin(angle),
+        };
+    }
+    static scale(arc, point, ratio) {
+        return {
+            x: arc.centre + (point.x - arc.centre) * ratio,
+            y: arc.centre + (point.y - arc.centre) * ratio,
+        };
+    }
+    static text(point) {
+        return `${point.x.toFixed(2)} ${point.y.toFixed(2)}`;
+    }
+}

package/dist/services/ps-chart-bar-service.d.ts

@@ -9,5 +9,7 @@ export declare class PsChartBarService {
     static stacked(data: PsAreaChartDatum[], series: PsCartesianChartSeries[], colors: string[], domain: PsChartDomain, plot: PsChartPlot): PsChartBarRect[];
     static slot(count: number, plot: PsChartPlot): number;
     static group(slot: number, size: number): PsChartBarGroup;
+    static lastIndex(values: number[], sign: number): number;
+    static radius(rect: PsChartBarRect): number;
     private static rect;
 }

package/dist/services/ps-chart-bar-service.js

@@ -1,3 +1,4 @@
+import { PsChartBarCorner } from '../constants/ps-chart-bar-corner';
 import { PsChartConfig } from '../constants/ps-chart-config';
 import { PsChartScaleService } from './ps-chart-scale-service';
 import { PsChartSeriesService } from './ps-chart-series-service';
@@ -10,7 +11,7 @@ export class PsChartBarService {
             const value = PsChartSeriesService.value(datum, entry.dataKey);
             const top = PsChartScaleService.y(value, domain, plot);
             const left = plot.left + row * slot + offset + column * width;
-            return PsChartBarService.rect(`${row}:${entry.dataKey}`, colors[column], left, width, zero, top, value < 0);
+            return PsChartBarService.rect(`${row}:${entry.dataKey}`, colors[column], left, width, zero, top, value < 0, PsChartBarCorner.Value);
         }));
     }
     static stacked(data, series, colors, domain, plot) {
@@ -19,6 +20,9 @@ export class PsChartBarService {
         return data.flatMap((datum, row) => {
             let positive = 0;
             let negative = 0;
+            const values = series.map((entry) => PsChartSeriesService.value(datum, entry.dataKey));
+            const outerPositive = PsChartBarService.lastIndex(values, 1);
+            const outerNegative = PsChartBarService.lastIndex(values, -1);
             return series.map((entry, column) => {
                 const value = PsChartSeriesService.value(datum, entry.dataKey);
                 const from = value < 0 ? negative : positive;
@@ -27,7 +31,9 @@ export class PsChartBarService {
                     negative = to;
                 else
                     positive = to;
-                return PsChartBarService.rect(`${row}:${entry.dataKey}`, colors[column], plot.left + row * slot + offset, width, PsChartScaleService.y(from, domain, plot), PsChartScaleService.y(to, domain, plot), value < 0);
+                return PsChartBarService.rect(`${row}:${entry.dataKey}`, colors[column], plot.left + row * slot + offset, width, PsChartScaleService.y(from, domain, plot), PsChartScaleService.y(to, domain, plot), value < 0, column === outerPositive || column === outerNegative
+                    ? PsChartBarCorner.Value
+                    : PsChartBarCorner.None);
             });
         });
     }
@@ -41,9 +47,18 @@ export class PsChartBarService {
         const total = Math.max(slot * (1 - gap), Math.min(PsChartConfig.minBarWidth * size, slot));
         return { offset: (slot - total) / 2, width: total / size };
     }
-    static rect(id, color, x, width, from, to, isNegative) {
+    static lastIndex(values, sign) {
+        return values.reduce((last, value, index) => (Math.sign(value) === sign ? index : last), -1);
+    }
+    static radius(rect) {
+        if (rect.corner === PsChartBarCorner.None)
+            return 0;
+        return Math.min(PsChartConfig.barRadius, rect.width * PsChartConfig.barRadiusWidthRatio);
+    }
+    static rect(id, color, x, width, from, to, isNegative, corner) {
         return {
             color,
+            corner,
             height: Math.abs(to - from),
             id,
             isNegative,

package/dist/services/ps-chart-donut-service.d.ts

@@ -6,5 +6,7 @@ export declare class PsChartDonutService {
     static centerFontSize(text: string, size: number): number;
     static radius(size: number): number;
     static circumference(size: number): number;
+    static inner(size: number): number;
     static slices(data: PsDonutChartDatum[], colors: string[], size: number): PsDonutSliceData[];
+    static angles(shares: number[], minimum: number): number[];
 }

package/dist/services/ps-chart-donut-service.js

@@ -1,4 +1,5 @@
 import { PsChartConfig } from '../constants/ps-chart-config';
+import { PsChartArcService } from './ps-chart-arc-service';
 import { PsChartTextService } from './ps-chart-text-service';
 export class PsChartDonutService {
     static layout(width, height) {
@@ -17,23 +18,52 @@ export class PsChartDonutService {
     static circumference(size) {
         return 2 * Math.PI * PsChartDonutService.radius(size);
     }
+    static inner(size) {
+        return Math.max(size / 2 - PsChartConfig.donutThickness, 0);
+    }
     static slices(data, colors, size) {
-        const circumference = PsChartDonutService.circumference(size);
-        const total = data.reduce((sum, datum) => sum + datum.share, 0);
+        const shares = data.map((datum) => Math.max(datum.share, 0));
+        const total = shares.reduce((sum, share) => sum + share, 0);
         if (total <= 0)
             return [];
-        let start = 0;
-        return data.map((datum, index) => {
-            const length = (datum.share / total) * circumference;
-            const slice = {
+        const centre = size / 2;
+        const outer = centre;
+        const inner = PsChartDonutService.inner(size);
+        const shown = shares.filter((share) => share > 0).length;
+        if (shown === 1)
+            return data.map((datum, index) => ({
                 color: colors[index % colors.length],
-                dashLength: Math.max(length - PsChartConfig.donutSliceGap, 0),
-                dashOffset: -start,
                 id: datum.id,
-                start,
-            };
-            start += length;
-            return slice;
+                path: shares[index] > 0 ? PsChartArcService.ring(centre, inner, outer) : '',
+            }));
+        const angles = PsChartDonutService.angles(shares, PsChartArcService.minimumAngle(PsChartConfig.donutSliceGap, PsChartConfig.barRadius, inner));
+        let start = 0;
+        return data.map((datum, index) => {
+            const end = start + angles[index];
+            const path = angles[index] > 0
+                ? PsChartArcService.sector({
+                    centre,
+                    end,
+                    gap: PsChartConfig.donutSliceGap,
+                    inner,
+                    outer,
+                    radius: PsChartConfig.barRadius,
+                    start,
+                })
+                : '';
+            start = end;
+            return { color: colors[index % colors.length], id: datum.id, path };
         });
     }
+    static angles(shares, minimum) {
+        const turn = 2 * Math.PI;
+        const shown = shares.filter((share) => share > 0).length;
+        const floor = Math.min(minimum, turn / Math.max(shown, 1));
+        const total = shares.reduce((sum, share) => sum + share, 0);
+        const isSmall = shares.map((share) => share > 0 && (share / total) * turn < floor);
+        const smallCount = isSmall.filter(Boolean).length;
+        const largeTotal = shares.reduce((sum, share, index) => (isSmall[index] ? sum : sum + share), 0);
+        const left = turn - smallCount * floor;
+        return shares.map((share, index) => share <= 0 ? 0 : isSmall[index] ? floor : largeTotal > 0 ? (share / largeTotal) * left : 0);
+    }
 }

package/dist/services/ps-waterfall-service.js

@@ -1,3 +1,4 @@
+import { PsChartBarCorner } from '../constants/ps-chart-bar-corner';
 import { PsChartBarService } from './ps-chart-bar-service';
 import { PsChartScaleService } from './ps-chart-scale-service';
 export class PsWaterfallService {
@@ -25,6 +26,7 @@ export class PsWaterfallService {
             const to = PsChartScaleService.y(step.end, domain, plot);
             return {
                 color: step.isTotal ? colors[2] : step.value < 0 ? colors[1] : colors[0],
+                corner: step.isTotal ? PsChartBarCorner.Value : PsChartBarCorner.Both,
                 height: Math.abs(to - from),
                 id: `${row}:${step.label}`,
                 isNegative: step.end < step.start,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-mobile-components",
-	"version": "1.13.0",
+	"version": "1.13.1",
 	"private": false,
 	"description": "Native iOS (SwiftUI) and Android (Jetpack Compose) Ps components for Pallasoft mobile apps",
 	"main": "./dist/index.js",