@impulse-ui-native/charts 2.0.1 → 2.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/dist/components/index.d.mts +17 -0
- package/dist/components/index.js +8 -0
- package/dist/components/index.js.map +1 -0
- package/dist/components/line-chart-body.d.mts +14 -0
- package/dist/components/line-chart-body.js +90 -0
- package/dist/components/line-chart-body.js.map +1 -0
- package/dist/components/line-chart.d.mts +10 -0
- package/dist/components/line-chart.js +21 -0
- package/dist/components/line-chart.js.map +1 -0
- package/dist/components/multi-line-chart-body.d.mts +11 -0
- package/dist/components/multi-line-chart-body.js +98 -0
- package/dist/components/multi-line-chart-body.js.map +1 -0
- package/dist/components/multi-line-chart.d.mts +11 -0
- package/dist/components/multi-line-chart.js +21 -0
- package/dist/components/multi-line-chart.js.map +1 -0
- package/dist/components/primitives/grid.d.mts +10 -0
- package/dist/components/primitives/grid.js +65 -0
- package/dist/components/primitives/grid.js.map +1 -0
- package/dist/components/primitives/index.d.mts +14 -0
- package/dist/components/primitives/index.js +13 -0
- package/dist/components/primitives/index.js.map +1 -0
- package/dist/components/primitives/label.d.mts +10 -0
- package/dist/components/primitives/label.js +94 -0
- package/dist/components/primitives/label.js.map +1 -0
- package/dist/components/primitives/line.d.mts +11 -0
- package/dist/components/primitives/line.js +50 -0
- package/dist/components/primitives/line.js.map +1 -0
- package/dist/components/primitives/x-axis.d.mts +11 -0
- package/dist/components/primitives/x-axis.js +93 -0
- package/dist/components/primitives/x-axis.js.map +1 -0
- package/dist/components/primitives/y-axis.d.mts +11 -0
- package/dist/components/primitives/y-axis.js +95 -0
- package/dist/components/primitives/y-axis.js.map +1 -0
- package/dist/constants/axis.constants.d.mts +6 -0
- package/dist/constants/axis.constants.js +11 -0
- package/dist/constants/axis.constants.js.map +1 -0
- package/dist/constants/grid.constants.d.mts +6 -0
- package/dist/constants/grid.constants.js +11 -0
- package/dist/constants/grid.constants.js.map +1 -0
- package/dist/constants/index.d.mts +11 -0
- package/dist/constants/index.js +6 -0
- package/dist/constants/index.js.map +1 -0
- package/dist/constants/label.constants.d.mts +11 -0
- package/dist/constants/label.constants.js +12 -0
- package/dist/constants/label.constants.js.map +1 -0
- package/dist/constants/line-chart.constants.d.mts +8 -0
- package/dist/constants/line-chart.constants.js +7 -0
- package/dist/constants/line-chart.constants.js.map +1 -0
- package/dist/constants/line.constants.d.mts +15 -0
- package/dist/constants/line.constants.js +18 -0
- package/dist/constants/line.constants.js.map +1 -0
- package/dist/contexts/index.d.mts +2 -0
- package/dist/contexts/index.js +1 -0
- package/dist/contexts/index.js.map +1 -0
- package/dist/hooks/index.d.mts +12 -0
- package/dist/hooks/index.js +9 -0
- package/dist/hooks/index.js.map +1 -0
- package/dist/hooks/use-chart-canvas.hook.d.mts +9 -0
- package/dist/hooks/use-chart-canvas.hook.js +10 -0
- package/dist/hooks/use-chart-canvas.hook.js.map +1 -0
- package/dist/hooks/use-line-chart.hook.d.mts +10 -0
- package/dist/hooks/use-line-chart.hook.js +13 -0
- package/dist/hooks/use-line-chart.hook.js.map +1 -0
- package/dist/hooks/use-multi-line-chart.hook.d.mts +12 -0
- package/dist/hooks/use-multi-line-chart.hook.js +44 -0
- package/dist/hooks/use-multi-line-chart.hook.js.map +1 -0
- package/dist/index.d.mts +36 -3
- package/dist/index.js +6 -5
- package/dist/index.js.map +1 -1
- package/dist/line-chart.types-yxru5uWc.d.mts +62 -0
- package/dist/types/axis.types.d.mts +49 -0
- package/dist/types/axis.types.js +1 -0
- package/dist/types/axis.types.js.map +1 -0
- package/dist/types/common.types.d.mts +57 -0
- package/dist/types/common.types.js +1 -0
- package/dist/types/common.types.js.map +1 -0
- package/dist/types/grid.types.d.mts +5 -0
- package/dist/types/grid.types.js +1 -0
- package/dist/types/grid.types.js.map +1 -0
- package/dist/types/index.d.mts +11 -0
- package/dist/types/index.js +11 -0
- package/dist/types/index.js.map +1 -0
- package/dist/types/label.types.d.mts +24 -0
- package/dist/types/label.types.js +1 -0
- package/dist/types/label.types.js.map +1 -0
- package/dist/types/line-chart.types.d.mts +5 -0
- package/dist/types/line-chart.types.js +1 -0
- package/dist/types/line-chart.types.js.map +1 -0
- package/dist/types/line.types.d.mts +11 -0
- package/dist/types/line.types.js +1 -0
- package/dist/types/line.types.js.map +1 -0
- package/dist/types/multi-line-chart.types.d.mts +23 -0
- package/dist/types/multi-line-chart.types.js +1 -0
- package/dist/types/multi-line-chart.types.js.map +1 -0
- package/dist/types/style.types.d.mts +19 -0
- package/dist/types/style.types.js +1 -0
- package/dist/types/style.types.js.map +1 -0
- package/dist/types/use-line-chart.types.d.mts +29 -0
- package/dist/types/use-line-chart.types.js +1 -0
- package/dist/types/use-line-chart.types.js.map +1 -0
- package/dist/types/use-multi-line-chart.types.d.mts +16 -0
- package/dist/types/use-multi-line-chart.types.js +1 -0
- package/dist/types/use-multi-line-chart.types.js.map +1 -0
- package/dist/utils/axis.util.d.mts +15 -0
- package/dist/utils/axis.util.js +82 -0
- package/dist/utils/axis.util.js.map +1 -0
- package/dist/utils/chart-layout.util.d.mts +8 -0
- package/dist/utils/chart-layout.util.js +55 -0
- package/dist/utils/chart-layout.util.js.map +1 -0
- package/dist/utils/grid.util.d.mts +11 -0
- package/dist/utils/grid.util.js +56 -0
- package/dist/utils/grid.util.js.map +1 -0
- package/dist/utils/index.d.mts +17 -0
- package/dist/utils/index.js +44 -0
- package/dist/utils/index.js.map +1 -0
- package/dist/utils/label.util.d.mts +10 -0
- package/dist/utils/label.util.js +24 -0
- package/dist/utils/label.util.js.map +1 -0
- package/dist/utils/line-chart.util.d.mts +11 -0
- package/dist/utils/line-chart.util.js +133 -0
- package/dist/utils/line-chart.util.js.map +1 -0
- package/dist/utils/line.util.d.mts +10 -0
- package/dist/utils/line.util.js +36 -0
- package/dist/utils/line.util.js.map +1 -0
- package/dist/utils/multi-line-chart.util.d.mts +10 -0
- package/dist/utils/multi-line-chart.util.js +23 -0
- package/dist/utils/multi-line-chart.util.js.map +1 -0
- package/dist/utils/paragraph-builder.util.d.mts +10 -0
- package/dist/utils/paragraph-builder.util.js +16 -0
- package/dist/utils/paragraph-builder.util.js.map +1 -0
- package/package.json +16 -6
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo } from "react";
|
|
3
|
+
import { DashPathEffect, Path } from "@shopify/react-native-skia";
|
|
4
|
+
import { memo } from "@impulse-ui-native/core";
|
|
5
|
+
import {
|
|
6
|
+
LineDefaultCap,
|
|
7
|
+
LineDefaultColor,
|
|
8
|
+
LineDefaultCurve,
|
|
9
|
+
LineDefaultJoin,
|
|
10
|
+
LineDefaultOpacity,
|
|
11
|
+
LineDefaultWidth
|
|
12
|
+
} from "../../constants";
|
|
13
|
+
import { createLinePath } from "../../utils";
|
|
14
|
+
const Line = memo(function Line2(props) {
|
|
15
|
+
const {
|
|
16
|
+
cap = LineDefaultCap,
|
|
17
|
+
color = LineDefaultColor,
|
|
18
|
+
coordinates,
|
|
19
|
+
curve = LineDefaultCurve,
|
|
20
|
+
dash,
|
|
21
|
+
join = LineDefaultJoin,
|
|
22
|
+
opacity = LineDefaultOpacity,
|
|
23
|
+
visible = true,
|
|
24
|
+
width = LineDefaultWidth
|
|
25
|
+
} = props;
|
|
26
|
+
const path = useMemo(
|
|
27
|
+
() => createLinePath(coordinates, curve),
|
|
28
|
+
[coordinates, curve]
|
|
29
|
+
);
|
|
30
|
+
if (!visible || !path) {
|
|
31
|
+
return null;
|
|
32
|
+
}
|
|
33
|
+
return /* @__PURE__ */ jsx(
|
|
34
|
+
Path,
|
|
35
|
+
{
|
|
36
|
+
path,
|
|
37
|
+
color,
|
|
38
|
+
opacity,
|
|
39
|
+
strokeWidth: width,
|
|
40
|
+
style: "stroke",
|
|
41
|
+
strokeCap: cap,
|
|
42
|
+
strokeJoin: join,
|
|
43
|
+
children: dash?.length ? /* @__PURE__ */ jsx(DashPathEffect, { intervals: [...dash] }) : null
|
|
44
|
+
}
|
|
45
|
+
);
|
|
46
|
+
});
|
|
47
|
+
export {
|
|
48
|
+
Line
|
|
49
|
+
};
|
|
50
|
+
//# sourceMappingURL=line.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/primitives/line.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { DashPathEffect, Path } from \"@shopify/react-native-skia\";\n\nimport { memo } from \"@impulse-ui-native/core\";\n\nimport {\n LineDefaultCap,\n LineDefaultColor,\n LineDefaultCurve,\n LineDefaultJoin,\n LineDefaultOpacity,\n LineDefaultWidth,\n} from \"../../constants\";\nimport { ChartXValue, LineProps } from \"../../types\";\nimport { createLinePath } from \"../../utils\";\n\nexport const Line = memo(function Line<X extends ChartXValue = number>(\n props: LineProps<X>,\n) {\n const {\n cap = LineDefaultCap,\n color = LineDefaultColor,\n coordinates,\n curve = LineDefaultCurve,\n dash,\n join = LineDefaultJoin,\n opacity = LineDefaultOpacity,\n visible = true,\n width = LineDefaultWidth,\n } = props;\n\n const path = useMemo(\n () => createLinePath(coordinates, curve),\n [coordinates, curve],\n );\n\n if (!visible || !path) {\n return null;\n }\n\n return (\n <Path\n path={path}\n color={color}\n opacity={opacity}\n strokeWidth={width}\n style=\"stroke\"\n strokeCap={cap}\n strokeJoin={join}\n >\n {dash?.length ? <DashPathEffect intervals={[...dash]} /> : null}\n </Path>\n );\n});\n"],"mappings":"AAkDsB;AAlDtB,SAAS,eAAe;AACxB,SAAS,gBAAgB,YAAY;AAErC,SAAS,YAAY;AAErB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,sBAAsB;AAExB,MAAM,OAAO,KAAK,SAASA,MAChC,OACA;AACA,QAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV,UAAU;AAAA,IACV,QAAQ;AAAA,EACV,IAAI;AAEJ,QAAM,OAAO;AAAA,IACX,MAAM,eAAe,aAAa,KAAK;AAAA,IACvC,CAAC,aAAa,KAAK;AAAA,EACrB;AAEA,MAAI,CAAC,WAAW,CAAC,MAAM;AACrB,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb,OAAM;AAAA,MACN,WAAW;AAAA,MACX,YAAY;AAAA,MAEX,gBAAM,SAAS,oBAAC,kBAAe,WAAW,CAAC,GAAG,IAAI,GAAG,IAAK;AAAA;AAAA,EAC7D;AAEJ,CAAC;","names":["Line"]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { XAxisProps } from '../../types/axis.types.mjs';
|
|
3
|
+
import { b as ChartXValue } from '../../line-chart.types-yxru5uWc.mjs';
|
|
4
|
+
import '@shopify/react-native-skia';
|
|
5
|
+
import '@impulse-ui-native/theme';
|
|
6
|
+
import '../../types/common.types.mjs';
|
|
7
|
+
import '../../types/style.types.mjs';
|
|
8
|
+
|
|
9
|
+
declare const XAxis: <X extends ChartXValue = number>(props: XAxisProps<X>) => react_jsx_runtime.JSX.Element;
|
|
10
|
+
|
|
11
|
+
export { XAxis };
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Fragment, useMemo } from "react";
|
|
3
|
+
import {
|
|
4
|
+
DashPathEffect,
|
|
5
|
+
Group,
|
|
6
|
+
Line as SkiaLine
|
|
7
|
+
} from "@shopify/react-native-skia";
|
|
8
|
+
import { memo } from "@impulse-ui-native/core";
|
|
9
|
+
import {
|
|
10
|
+
AxisDefaultLabelGap,
|
|
11
|
+
AxisDefaultOpacity,
|
|
12
|
+
AxisDefaultTickLength,
|
|
13
|
+
AxisDefaultWidth
|
|
14
|
+
} from "../../constants";
|
|
15
|
+
import { createXAxisLayout, formatAxisTick } from "../../utils";
|
|
16
|
+
import { Label } from "./label";
|
|
17
|
+
const XAxis = memo(function XAxis2(props) {
|
|
18
|
+
const {
|
|
19
|
+
fontManager,
|
|
20
|
+
lineVisible = true,
|
|
21
|
+
options,
|
|
22
|
+
plot,
|
|
23
|
+
region,
|
|
24
|
+
scale,
|
|
25
|
+
theme,
|
|
26
|
+
ticks,
|
|
27
|
+
tickVisible = true
|
|
28
|
+
} = props;
|
|
29
|
+
const line = options?.line;
|
|
30
|
+
const tick = options?.tick;
|
|
31
|
+
const label = options?.label;
|
|
32
|
+
const tickLength = tick?.length ?? AxisDefaultTickLength;
|
|
33
|
+
const labelGap = label?.gap ?? AxisDefaultLabelGap;
|
|
34
|
+
const fontSize = label?.fontSize ?? theme.fontSize.xs;
|
|
35
|
+
const layout = useMemo(
|
|
36
|
+
() => createXAxisLayout({
|
|
37
|
+
values: ticks,
|
|
38
|
+
scale,
|
|
39
|
+
plot,
|
|
40
|
+
region,
|
|
41
|
+
tickLength,
|
|
42
|
+
labelGap
|
|
43
|
+
}),
|
|
44
|
+
[labelGap, plot, region, scale, tickLength, ticks]
|
|
45
|
+
);
|
|
46
|
+
return /* @__PURE__ */ jsxs(Group, { children: [
|
|
47
|
+
lineVisible && line?.visible !== false ? /* @__PURE__ */ jsx(
|
|
48
|
+
SkiaLine,
|
|
49
|
+
{
|
|
50
|
+
p1: layout.line.start,
|
|
51
|
+
p2: layout.line.end,
|
|
52
|
+
color: line?.color ?? theme.colors.border.default.value,
|
|
53
|
+
opacity: line?.opacity ?? AxisDefaultOpacity,
|
|
54
|
+
strokeWidth: line?.width ?? AxisDefaultWidth,
|
|
55
|
+
children: line?.dash?.length ? /* @__PURE__ */ jsx(DashPathEffect, { intervals: [...line.dash] }) : null
|
|
56
|
+
}
|
|
57
|
+
) : null,
|
|
58
|
+
layout.ticks.map((tick2, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
59
|
+
tickVisible && options?.tick?.visible !== false ? /* @__PURE__ */ jsx(
|
|
60
|
+
SkiaLine,
|
|
61
|
+
{
|
|
62
|
+
p1: tick2.start,
|
|
63
|
+
p2: tick2.end,
|
|
64
|
+
color: options?.tick?.color ?? theme.colors.border.default.value,
|
|
65
|
+
opacity: options?.tick?.opacity ?? AxisDefaultOpacity,
|
|
66
|
+
strokeWidth: options?.tick?.width ?? AxisDefaultWidth,
|
|
67
|
+
children: options?.tick?.dash?.length ? /* @__PURE__ */ jsx(DashPathEffect, { intervals: [...options.tick.dash] }) : null
|
|
68
|
+
}
|
|
69
|
+
) : null,
|
|
70
|
+
label?.visible !== false ? /* @__PURE__ */ jsx(
|
|
71
|
+
Label,
|
|
72
|
+
{
|
|
73
|
+
text: formatAxisTick(tick2.value, options?.format),
|
|
74
|
+
rect: tick2.labelRect,
|
|
75
|
+
horizontalAlign: "center",
|
|
76
|
+
color: label?.color,
|
|
77
|
+
fontSize,
|
|
78
|
+
fontFamily: label?.fontFamily,
|
|
79
|
+
fontWeight: label?.fontWeight,
|
|
80
|
+
fontManager,
|
|
81
|
+
maxLines: label?.maxLines,
|
|
82
|
+
rotation: label?.rotation,
|
|
83
|
+
theme,
|
|
84
|
+
tnum: typeof tick2.value === "number"
|
|
85
|
+
}
|
|
86
|
+
) : null
|
|
87
|
+
] }, `${String(tick2.value)}-${index}`))
|
|
88
|
+
] });
|
|
89
|
+
});
|
|
90
|
+
export {
|
|
91
|
+
XAxis
|
|
92
|
+
};
|
|
93
|
+
//# sourceMappingURL=x-axis.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/primitives/x-axis.tsx"],"sourcesContent":["import { Fragment, useMemo } from \"react\";\nimport {\n DashPathEffect,\n Group,\n Line as SkiaLine,\n} from \"@shopify/react-native-skia\";\n\nimport { memo } from \"@impulse-ui-native/core\";\n\nimport {\n AxisDefaultLabelGap,\n AxisDefaultOpacity,\n AxisDefaultTickLength,\n AxisDefaultWidth,\n} from \"../../constants\";\nimport { ChartXValue, XAxisProps } from \"../../types\";\nimport { createXAxisLayout, formatAxisTick } from \"../../utils\";\nimport { Label } from \"./label\";\n\nexport const XAxis = memo(function XAxis<X extends ChartXValue = number>(\n props: XAxisProps<X>,\n) {\n const {\n fontManager,\n lineVisible = true,\n options,\n plot,\n region,\n scale,\n theme,\n ticks,\n tickVisible = true,\n } = props;\n\n const line = options?.line;\n const tick = options?.tick;\n const label = options?.label;\n const tickLength = tick?.length ?? AxisDefaultTickLength;\n const labelGap = label?.gap ?? AxisDefaultLabelGap;\n const fontSize = label?.fontSize ?? theme.fontSize.xs;\n\n const layout = useMemo(\n () =>\n createXAxisLayout({\n values: ticks,\n scale,\n plot,\n region,\n tickLength,\n labelGap,\n }),\n [labelGap, plot, region, scale, tickLength, ticks],\n );\n\n return (\n <Group>\n {lineVisible && line?.visible !== false ? (\n <SkiaLine\n p1={layout.line.start}\n p2={layout.line.end}\n color={line?.color ?? theme.colors.border.default.value}\n opacity={line?.opacity ?? AxisDefaultOpacity}\n strokeWidth={line?.width ?? AxisDefaultWidth}\n >\n {line?.dash?.length ? (\n <DashPathEffect intervals={[...line.dash]} />\n ) : null}\n </SkiaLine>\n ) : null}\n\n {layout.ticks.map((tick, index) => (\n <Fragment key={`${String(tick.value)}-${index}`}>\n {tickVisible && options?.tick?.visible !== false ? (\n <SkiaLine\n p1={tick.start}\n p2={tick.end}\n color={options?.tick?.color ?? theme.colors.border.default.value}\n opacity={options?.tick?.opacity ?? AxisDefaultOpacity}\n strokeWidth={options?.tick?.width ?? AxisDefaultWidth}\n >\n {options?.tick?.dash?.length ? (\n <DashPathEffect intervals={[...options.tick.dash]} />\n ) : null}\n </SkiaLine>\n ) : null}\n {label?.visible !== false ? (\n <Label\n text={formatAxisTick(tick.value, options?.format)}\n rect={tick.labelRect}\n horizontalAlign=\"center\"\n color={label?.color}\n fontSize={fontSize}\n fontFamily={label?.fontFamily}\n fontWeight={label?.fontWeight}\n fontManager={fontManager}\n maxLines={label?.maxLines}\n rotation={label?.rotation}\n theme={theme}\n tnum={typeof tick.value === \"number\"}\n />\n ) : null}\n </Fragment>\n ))}\n </Group>\n );\n});\n"],"mappings":"AAiEY,cAMJ,YANI;AAjEZ,SAAS,UAAU,eAAe;AAClC;AAAA,EACE;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,OACH;AAEP,SAAS,YAAY;AAErB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,mBAAmB,sBAAsB;AAClD,SAAS,aAAa;AAEf,MAAM,QAAQ,KAAK,SAASA,OACjC,OACA;AACA,QAAM;AAAA,IACJ;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,EAChB,IAAI;AAEJ,QAAM,OAAO,SAAS;AACtB,QAAM,OAAO,SAAS;AACtB,QAAM,QAAQ,SAAS;AACvB,QAAM,aAAa,MAAM,UAAU;AACnC,QAAM,WAAW,OAAO,OAAO;AAC/B,QAAM,WAAW,OAAO,YAAY,MAAM,SAAS;AAEnD,QAAM,SAAS;AAAA,IACb,MACE,kBAAkB;AAAA,MAChB,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,IACH,CAAC,UAAU,MAAM,QAAQ,OAAO,YAAY,KAAK;AAAA,EACnD;AAEA,SACE,qBAAC,SACE;AAAA,mBAAe,MAAM,YAAY,QAChC;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,OAAO,KAAK;AAAA,QAChB,IAAI,OAAO,KAAK;AAAA,QAChB,OAAO,MAAM,SAAS,MAAM,OAAO,OAAO,QAAQ;AAAA,QAClD,SAAS,MAAM,WAAW;AAAA,QAC1B,aAAa,MAAM,SAAS;AAAA,QAE3B,gBAAM,MAAM,SACX,oBAAC,kBAAe,WAAW,CAAC,GAAG,KAAK,IAAI,GAAG,IACzC;AAAA;AAAA,IACN,IACE;AAAA,IAEH,OAAO,MAAM,IAAI,CAACC,OAAM,UACvB,qBAAC,YACE;AAAA,qBAAe,SAAS,MAAM,YAAY,QACzC;AAAA,QAAC;AAAA;AAAA,UACC,IAAIA,MAAK;AAAA,UACT,IAAIA,MAAK;AAAA,UACT,OAAO,SAAS,MAAM,SAAS,MAAM,OAAO,OAAO,QAAQ;AAAA,UAC3D,SAAS,SAAS,MAAM,WAAW;AAAA,UACnC,aAAa,SAAS,MAAM,SAAS;AAAA,UAEpC,mBAAS,MAAM,MAAM,SACpB,oBAAC,kBAAe,WAAW,CAAC,GAAG,QAAQ,KAAK,IAAI,GAAG,IACjD;AAAA;AAAA,MACN,IACE;AAAA,MACH,OAAO,YAAY,QAClB;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,eAAeA,MAAK,OAAO,SAAS,MAAM;AAAA,UAChD,MAAMA,MAAK;AAAA,UACX,iBAAgB;AAAA,UAChB,OAAO,OAAO;AAAA,UACd;AAAA,UACA,YAAY,OAAO;AAAA,UACnB,YAAY,OAAO;AAAA,UACnB;AAAA,UACA,UAAU,OAAO;AAAA,UACjB,UAAU,OAAO;AAAA,UACjB;AAAA,UACA,MAAM,OAAOA,MAAK,UAAU;AAAA;AAAA,MAC9B,IACE;AAAA,SA7BS,GAAG,OAAOA,MAAK,KAAK,CAAC,IAAI,KAAK,EA8B7C,CACD;AAAA,KACH;AAEJ,CAAC;","names":["XAxis","tick"]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { YAxisProps } from '../../types/axis.types.mjs';
|
|
3
|
+
import '@shopify/react-native-skia';
|
|
4
|
+
import '@impulse-ui-native/theme';
|
|
5
|
+
import '../../types/common.types.mjs';
|
|
6
|
+
import '../../types/style.types.mjs';
|
|
7
|
+
import '../../line-chart.types-yxru5uWc.mjs';
|
|
8
|
+
|
|
9
|
+
declare const YAxis: (props: YAxisProps) => react_jsx_runtime.JSX.Element;
|
|
10
|
+
|
|
11
|
+
export { YAxis };
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Fragment, useMemo } from "react";
|
|
3
|
+
import {
|
|
4
|
+
DashPathEffect,
|
|
5
|
+
Group,
|
|
6
|
+
Line as SkiaLine
|
|
7
|
+
} from "@shopify/react-native-skia";
|
|
8
|
+
import { memo } from "@impulse-ui-native/core";
|
|
9
|
+
import {
|
|
10
|
+
AxisDefaultLabelGap,
|
|
11
|
+
AxisDefaultOpacity,
|
|
12
|
+
AxisDefaultTickLength,
|
|
13
|
+
AxisDefaultWidth
|
|
14
|
+
} from "../../constants";
|
|
15
|
+
import { createYAxisLayout, formatAxisTick } from "../../utils";
|
|
16
|
+
import { Label } from "./label";
|
|
17
|
+
const YAxis = memo(function YAxis2(props) {
|
|
18
|
+
const {
|
|
19
|
+
fontManager,
|
|
20
|
+
lineVisible = true,
|
|
21
|
+
options,
|
|
22
|
+
plot,
|
|
23
|
+
region,
|
|
24
|
+
scale,
|
|
25
|
+
theme,
|
|
26
|
+
ticks,
|
|
27
|
+
tickVisible = true
|
|
28
|
+
} = props;
|
|
29
|
+
const line = options?.line;
|
|
30
|
+
const tick = options?.tick;
|
|
31
|
+
const label = options?.label;
|
|
32
|
+
const tickLength = tick?.length ?? AxisDefaultTickLength;
|
|
33
|
+
const labelGap = label?.gap ?? AxisDefaultLabelGap;
|
|
34
|
+
const fontSize = label?.fontSize ?? theme.fontSize.xs;
|
|
35
|
+
const layout = useMemo(
|
|
36
|
+
() => createYAxisLayout({
|
|
37
|
+
values: ticks,
|
|
38
|
+
scale,
|
|
39
|
+
plot,
|
|
40
|
+
region,
|
|
41
|
+
tickLength,
|
|
42
|
+
labelGap,
|
|
43
|
+
fontSize
|
|
44
|
+
}),
|
|
45
|
+
[fontSize, labelGap, plot, region, scale, tickLength, ticks]
|
|
46
|
+
);
|
|
47
|
+
return /* @__PURE__ */ jsxs(Group, { children: [
|
|
48
|
+
lineVisible && line?.visible !== false ? /* @__PURE__ */ jsx(
|
|
49
|
+
SkiaLine,
|
|
50
|
+
{
|
|
51
|
+
p1: layout.line.start,
|
|
52
|
+
p2: layout.line.end,
|
|
53
|
+
color: line?.color ?? theme.colors.border.default.value,
|
|
54
|
+
opacity: line?.opacity ?? AxisDefaultOpacity,
|
|
55
|
+
strokeWidth: line?.width ?? AxisDefaultWidth,
|
|
56
|
+
children: line?.dash?.length ? /* @__PURE__ */ jsx(DashPathEffect, { intervals: [...line.dash] }) : null
|
|
57
|
+
}
|
|
58
|
+
) : null,
|
|
59
|
+
layout.ticks.map((tick2, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
60
|
+
tickVisible && options?.tick?.visible !== false ? /* @__PURE__ */ jsx(
|
|
61
|
+
SkiaLine,
|
|
62
|
+
{
|
|
63
|
+
p1: tick2.start,
|
|
64
|
+
p2: tick2.end,
|
|
65
|
+
color: options?.tick?.color ?? theme.colors.border.default.value,
|
|
66
|
+
opacity: options?.tick?.opacity ?? AxisDefaultOpacity,
|
|
67
|
+
strokeWidth: options?.tick?.width ?? AxisDefaultWidth,
|
|
68
|
+
children: options?.tick?.dash?.length ? /* @__PURE__ */ jsx(DashPathEffect, { intervals: [...options.tick.dash] }) : null
|
|
69
|
+
}
|
|
70
|
+
) : null,
|
|
71
|
+
label?.visible !== false ? /* @__PURE__ */ jsx(
|
|
72
|
+
Label,
|
|
73
|
+
{
|
|
74
|
+
text: formatAxisTick(tick2.value, options?.format),
|
|
75
|
+
rect: tick2.labelRect,
|
|
76
|
+
horizontalAlign: "right",
|
|
77
|
+
verticalAlign: "center",
|
|
78
|
+
color: label?.color,
|
|
79
|
+
fontSize,
|
|
80
|
+
fontFamily: label?.fontFamily,
|
|
81
|
+
fontWeight: label?.fontWeight,
|
|
82
|
+
fontManager,
|
|
83
|
+
maxLines: label?.maxLines,
|
|
84
|
+
rotation: label?.rotation,
|
|
85
|
+
theme,
|
|
86
|
+
tnum: true
|
|
87
|
+
}
|
|
88
|
+
) : null
|
|
89
|
+
] }, `${tick2.value}-${index}`))
|
|
90
|
+
] });
|
|
91
|
+
});
|
|
92
|
+
export {
|
|
93
|
+
YAxis
|
|
94
|
+
};
|
|
95
|
+
//# sourceMappingURL=y-axis.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/primitives/y-axis.tsx"],"sourcesContent":["import { Fragment, useMemo } from \"react\";\nimport {\n DashPathEffect,\n Group,\n Line as SkiaLine,\n} from \"@shopify/react-native-skia\";\n\nimport { memo } from \"@impulse-ui-native/core\";\n\nimport {\n AxisDefaultLabelGap,\n AxisDefaultOpacity,\n AxisDefaultTickLength,\n AxisDefaultWidth,\n} from \"../../constants\";\nimport { YAxisProps } from \"../../types\";\nimport { createYAxisLayout, formatAxisTick } from \"../../utils\";\nimport { Label } from \"./label\";\n\nexport const YAxis = memo(function YAxis(props: YAxisProps) {\n const {\n fontManager,\n lineVisible = true,\n options,\n plot,\n region,\n scale,\n theme,\n ticks,\n tickVisible = true,\n } = props;\n\n const line = options?.line;\n const tick = options?.tick;\n const label = options?.label;\n const tickLength = tick?.length ?? AxisDefaultTickLength;\n const labelGap = label?.gap ?? AxisDefaultLabelGap;\n const fontSize = label?.fontSize ?? theme.fontSize.xs;\n\n const layout = useMemo(\n () =>\n createYAxisLayout({\n values: ticks,\n scale,\n plot,\n region,\n tickLength,\n labelGap,\n fontSize,\n }),\n [fontSize, labelGap, plot, region, scale, tickLength, ticks],\n );\n\n return (\n <Group>\n {lineVisible && line?.visible !== false ? (\n <SkiaLine\n p1={layout.line.start}\n p2={layout.line.end}\n color={line?.color ?? theme.colors.border.default.value}\n opacity={line?.opacity ?? AxisDefaultOpacity}\n strokeWidth={line?.width ?? AxisDefaultWidth}\n >\n {line?.dash?.length ? (\n <DashPathEffect intervals={[...line.dash]} />\n ) : null}\n </SkiaLine>\n ) : null}\n\n {layout.ticks.map((tick, index) => (\n <Fragment key={`${tick.value}-${index}`}>\n {tickVisible && options?.tick?.visible !== false ? (\n <SkiaLine\n p1={tick.start}\n p2={tick.end}\n color={options?.tick?.color ?? theme.colors.border.default.value}\n opacity={options?.tick?.opacity ?? AxisDefaultOpacity}\n strokeWidth={options?.tick?.width ?? AxisDefaultWidth}\n >\n {options?.tick?.dash?.length ? (\n <DashPathEffect intervals={[...options.tick.dash]} />\n ) : null}\n </SkiaLine>\n ) : null}\n {label?.visible !== false ? (\n <Label\n text={formatAxisTick(tick.value, options?.format)}\n rect={tick.labelRect}\n horizontalAlign=\"right\"\n verticalAlign=\"center\"\n color={label?.color}\n fontSize={fontSize}\n fontFamily={label?.fontFamily}\n fontWeight={label?.fontWeight}\n fontManager={fontManager}\n maxLines={label?.maxLines}\n rotation={label?.rotation}\n theme={theme}\n tnum\n />\n ) : null}\n </Fragment>\n ))}\n </Group>\n );\n});\n"],"mappings":"AAgEY,cAMJ,YANI;AAhEZ,SAAS,UAAU,eAAe;AAClC;AAAA,EACE;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,OACH;AAEP,SAAS,YAAY;AAErB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,mBAAmB,sBAAsB;AAClD,SAAS,aAAa;AAEf,MAAM,QAAQ,KAAK,SAASA,OAAM,OAAmB;AAC1D,QAAM;AAAA,IACJ;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,EAChB,IAAI;AAEJ,QAAM,OAAO,SAAS;AACtB,QAAM,OAAO,SAAS;AACtB,QAAM,QAAQ,SAAS;AACvB,QAAM,aAAa,MAAM,UAAU;AACnC,QAAM,WAAW,OAAO,OAAO;AAC/B,QAAM,WAAW,OAAO,YAAY,MAAM,SAAS;AAEnD,QAAM,SAAS;AAAA,IACb,MACE,kBAAkB;AAAA,MAChB,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,IACH,CAAC,UAAU,UAAU,MAAM,QAAQ,OAAO,YAAY,KAAK;AAAA,EAC7D;AAEA,SACE,qBAAC,SACE;AAAA,mBAAe,MAAM,YAAY,QAChC;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,OAAO,KAAK;AAAA,QAChB,IAAI,OAAO,KAAK;AAAA,QAChB,OAAO,MAAM,SAAS,MAAM,OAAO,OAAO,QAAQ;AAAA,QAClD,SAAS,MAAM,WAAW;AAAA,QAC1B,aAAa,MAAM,SAAS;AAAA,QAE3B,gBAAM,MAAM,SACX,oBAAC,kBAAe,WAAW,CAAC,GAAG,KAAK,IAAI,GAAG,IACzC;AAAA;AAAA,IACN,IACE;AAAA,IAEH,OAAO,MAAM,IAAI,CAACC,OAAM,UACvB,qBAAC,YACE;AAAA,qBAAe,SAAS,MAAM,YAAY,QACzC;AAAA,QAAC;AAAA;AAAA,UACC,IAAIA,MAAK;AAAA,UACT,IAAIA,MAAK;AAAA,UACT,OAAO,SAAS,MAAM,SAAS,MAAM,OAAO,OAAO,QAAQ;AAAA,UAC3D,SAAS,SAAS,MAAM,WAAW;AAAA,UACnC,aAAa,SAAS,MAAM,SAAS;AAAA,UAEpC,mBAAS,MAAM,MAAM,SACpB,oBAAC,kBAAe,WAAW,CAAC,GAAG,QAAQ,KAAK,IAAI,GAAG,IACjD;AAAA;AAAA,MACN,IACE;AAAA,MACH,OAAO,YAAY,QAClB;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,eAAeA,MAAK,OAAO,SAAS,MAAM;AAAA,UAChD,MAAMA,MAAK;AAAA,UACX,iBAAgB;AAAA,UAChB,eAAc;AAAA,UACd,OAAO,OAAO;AAAA,UACd;AAAA,UACA,YAAY,OAAO;AAAA,UACnB,YAAY,OAAO;AAAA,UACnB;AAAA,UACA,UAAU,OAAO;AAAA,UACjB,UAAU,OAAO;AAAA,UACjB;AAAA,UACA,MAAI;AAAA;AAAA,MACN,IACE;AAAA,SA9BS,GAAGA,MAAK,KAAK,IAAI,KAAK,EA+BrC,CACD;AAAA,KACH;AAEJ,CAAC;","names":["YAxis","tick"]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
const AxisDefaultWidth = 1;
|
|
2
|
+
const AxisDefaultOpacity = 1;
|
|
3
|
+
const AxisDefaultTickLength = 4;
|
|
4
|
+
const AxisDefaultLabelGap = 4;
|
|
5
|
+
export {
|
|
6
|
+
AxisDefaultLabelGap,
|
|
7
|
+
AxisDefaultOpacity,
|
|
8
|
+
AxisDefaultTickLength,
|
|
9
|
+
AxisDefaultWidth
|
|
10
|
+
};
|
|
11
|
+
//# sourceMappingURL=axis.constants.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/constants/axis.constants.ts"],"sourcesContent":["export const AxisDefaultWidth = 1;\nexport const AxisDefaultOpacity = 1;\nexport const AxisDefaultTickLength = 4;\nexport const AxisDefaultLabelGap = 4;\n"],"mappings":"AAAO,MAAM,mBAAmB;AACzB,MAAM,qBAAqB;AAC3B,MAAM,wBAAwB;AAC9B,MAAM,sBAAsB;","names":[]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
const GridDefaultWidth = 1;
|
|
2
|
+
const GridDefaultOpacity = 1;
|
|
3
|
+
const GridDefaultXVisible = true;
|
|
4
|
+
const GridDefaultYVisible = true;
|
|
5
|
+
export {
|
|
6
|
+
GridDefaultOpacity,
|
|
7
|
+
GridDefaultWidth,
|
|
8
|
+
GridDefaultXVisible,
|
|
9
|
+
GridDefaultYVisible
|
|
10
|
+
};
|
|
11
|
+
//# sourceMappingURL=grid.constants.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/constants/grid.constants.ts"],"sourcesContent":["export const GridDefaultWidth = 1;\nexport const GridDefaultOpacity = 1;\nexport const GridDefaultXVisible = true;\nexport const GridDefaultYVisible = true;\n"],"mappings":"AAAO,MAAM,mBAAmB;AACzB,MAAM,qBAAqB;AAC3B,MAAM,sBAAsB;AAC5B,MAAM,sBAAsB;","names":[]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export { AxisDefaultLabelGap, AxisDefaultOpacity, AxisDefaultTickLength, AxisDefaultWidth } from './axis.constants.mjs';
|
|
2
|
+
export { GridDefaultOpacity, GridDefaultWidth, GridDefaultXVisible, GridDefaultYVisible } from './grid.constants.mjs';
|
|
3
|
+
export { LabelDefaultHorizontalAlignment, LabelDefaultVerticalAlignment, TabularNumsFeature } from './label.constants.mjs';
|
|
4
|
+
export { LineDefaultCap, LineDefaultColor, LineDefaultColors, LineDefaultCurve, LineDefaultJoin, LineDefaultOpacity, LineDefaultWidth } from './line.constants.mjs';
|
|
5
|
+
export { LineChartDefaultNumericDomain, LineChartDefaultTickCount } from './line-chart.constants.mjs';
|
|
6
|
+
import '@shopify/react-native-skia';
|
|
7
|
+
import '../types/label.types.mjs';
|
|
8
|
+
import '@impulse-ui-native/theme';
|
|
9
|
+
import '../types/common.types.mjs';
|
|
10
|
+
import '../types/style.types.mjs';
|
|
11
|
+
import '../line-chart.types-yxru5uWc.mjs';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/constants/index.ts"],"sourcesContent":["export * from \"./axis.constants\";\nexport * from \"./grid.constants\";\nexport * from \"./label.constants\";\nexport * from \"./line.constants\";\nexport * from \"./line-chart.constants\";\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { SkTextFontFeatures } from '@shopify/react-native-skia';
|
|
2
|
+
import { LabelHorizontalAlignment, LabelVerticalAlignment } from '../types/label.types.mjs';
|
|
3
|
+
import '@impulse-ui-native/theme';
|
|
4
|
+
import '../types/common.types.mjs';
|
|
5
|
+
import '../types/style.types.mjs';
|
|
6
|
+
|
|
7
|
+
declare const TabularNumsFeature: SkTextFontFeatures;
|
|
8
|
+
declare const LabelDefaultHorizontalAlignment: LabelHorizontalAlignment;
|
|
9
|
+
declare const LabelDefaultVerticalAlignment: LabelVerticalAlignment;
|
|
10
|
+
|
|
11
|
+
export { LabelDefaultHorizontalAlignment, LabelDefaultVerticalAlignment, TabularNumsFeature };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
const TabularNumsFeature = {
|
|
2
|
+
name: "tnum",
|
|
3
|
+
value: 1
|
|
4
|
+
};
|
|
5
|
+
const LabelDefaultHorizontalAlignment = "left";
|
|
6
|
+
const LabelDefaultVerticalAlignment = "top";
|
|
7
|
+
export {
|
|
8
|
+
LabelDefaultHorizontalAlignment,
|
|
9
|
+
LabelDefaultVerticalAlignment,
|
|
10
|
+
TabularNumsFeature
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=label.constants.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/constants/label.constants.ts"],"sourcesContent":["import { SkTextFontFeatures } from \"@shopify/react-native-skia\";\n\nimport { LabelHorizontalAlignment, LabelVerticalAlignment } from \"../types\";\n\nexport const TabularNumsFeature: SkTextFontFeatures = {\n name: \"tnum\",\n value: 1,\n};\n\nexport const LabelDefaultHorizontalAlignment: LabelHorizontalAlignment = \"left\";\nexport const LabelDefaultVerticalAlignment: LabelVerticalAlignment = \"top\";\n"],"mappings":"AAIO,MAAM,qBAAyC;AAAA,EACpD,MAAM;AAAA,EACN,OAAO;AACT;AAEO,MAAM,kCAA4D;AAClE,MAAM,gCAAwD;","names":[]}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ChartNumericDomain } from '../types/common.types.mjs';
|
|
2
|
+
import '../types/style.types.mjs';
|
|
3
|
+
import '@shopify/react-native-skia';
|
|
4
|
+
|
|
5
|
+
declare const LineChartDefaultTickCount = 5;
|
|
6
|
+
declare const LineChartDefaultNumericDomain: ChartNumericDomain;
|
|
7
|
+
|
|
8
|
+
export { LineChartDefaultNumericDomain, LineChartDefaultTickCount };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/constants/line-chart.constants.ts"],"sourcesContent":["import { ChartNumericDomain } from \"../types\";\n\nexport const LineChartDefaultTickCount = 5;\n\nexport const LineChartDefaultNumericDomain: ChartNumericDomain = [0, 1];\n"],"mappings":"AAEO,MAAM,4BAA4B;AAElC,MAAM,gCAAoD,CAAC,GAAG,CAAC;","names":[]}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import * as _impulse_ui_native_theme from '@impulse-ui-native/theme';
|
|
2
|
+
import { ChartStrokeCap, ChartStrokeJoin } from '../types/style.types.mjs';
|
|
3
|
+
import { d as LineChartCurve } from '../line-chart.types-yxru5uWc.mjs';
|
|
4
|
+
import '@shopify/react-native-skia';
|
|
5
|
+
import '../types/common.types.mjs';
|
|
6
|
+
|
|
7
|
+
declare const LineDefaultColor: string;
|
|
8
|
+
declare const LineDefaultColors: _impulse_ui_native_theme.ChartColorPalette;
|
|
9
|
+
declare const LineDefaultWidth = 2;
|
|
10
|
+
declare const LineDefaultOpacity = 1;
|
|
11
|
+
declare const LineDefaultCurve: LineChartCurve;
|
|
12
|
+
declare const LineDefaultCap: ChartStrokeCap;
|
|
13
|
+
declare const LineDefaultJoin: ChartStrokeJoin;
|
|
14
|
+
|
|
15
|
+
export { LineDefaultCap, LineDefaultColor, LineDefaultColors, LineDefaultCurve, LineDefaultJoin, LineDefaultOpacity, LineDefaultWidth };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { ChartColorTokens } from "@impulse-ui-native/theme";
|
|
2
|
+
const LineDefaultColor = ChartColorTokens[0];
|
|
3
|
+
const LineDefaultColors = ChartColorTokens;
|
|
4
|
+
const LineDefaultWidth = 2;
|
|
5
|
+
const LineDefaultOpacity = 1;
|
|
6
|
+
const LineDefaultCurve = "linear";
|
|
7
|
+
const LineDefaultCap = "round";
|
|
8
|
+
const LineDefaultJoin = "round";
|
|
9
|
+
export {
|
|
10
|
+
LineDefaultCap,
|
|
11
|
+
LineDefaultColor,
|
|
12
|
+
LineDefaultColors,
|
|
13
|
+
LineDefaultCurve,
|
|
14
|
+
LineDefaultJoin,
|
|
15
|
+
LineDefaultOpacity,
|
|
16
|
+
LineDefaultWidth
|
|
17
|
+
};
|
|
18
|
+
//# sourceMappingURL=line.constants.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/constants/line.constants.ts"],"sourcesContent":["import { ChartColorTokens } from \"@impulse-ui-native/theme\";\n\nimport { ChartStrokeCap, ChartStrokeJoin, LineChartCurve } from \"../types\";\n\nexport const LineDefaultColor = ChartColorTokens[0];\nexport const LineDefaultColors = ChartColorTokens;\nexport const LineDefaultWidth = 2;\nexport const LineDefaultOpacity = 1;\nexport const LineDefaultCurve: LineChartCurve = \"linear\";\nexport const LineDefaultCap: ChartStrokeCap = \"round\";\nexport const LineDefaultJoin: ChartStrokeJoin = \"round\";\n"],"mappings":"AAAA,SAAS,wBAAwB;AAI1B,MAAM,mBAAmB,iBAAiB,CAAC;AAC3C,MAAM,oBAAoB;AAC1B,MAAM,mBAAmB;AACzB,MAAM,qBAAqB;AAC3B,MAAM,mBAAmC;AACzC,MAAM,iBAAiC;AACvC,MAAM,kBAAmC;","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export { useChartCanvas } from './use-chart-canvas.hook.mjs';
|
|
2
|
+
export { useLineChart } from './use-line-chart.hook.mjs';
|
|
3
|
+
export { useMultiLineChart } from './use-multi-line-chart.hook.mjs';
|
|
4
|
+
import 'react';
|
|
5
|
+
import '@shopify/react-native-skia';
|
|
6
|
+
import '../line-chart.types-yxru5uWc.mjs';
|
|
7
|
+
import '../types/common.types.mjs';
|
|
8
|
+
import '../types/style.types.mjs';
|
|
9
|
+
import '@impulse-ui-native/theme';
|
|
10
|
+
import '../types/use-line-chart.types.mjs';
|
|
11
|
+
import '../types/use-multi-line-chart.types.mjs';
|
|
12
|
+
import '../types/multi-line-chart.types.mjs';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { useChartCanvas } from "./use-chart-canvas.hook";
|
|
2
|
+
import { useLineChart } from "./use-line-chart.hook";
|
|
3
|
+
import { useMultiLineChart } from "./use-multi-line-chart.hook";
|
|
4
|
+
export {
|
|
5
|
+
useChartCanvas,
|
|
6
|
+
useLineChart,
|
|
7
|
+
useMultiLineChart
|
|
8
|
+
};
|
|
9
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/index.ts"],"sourcesContent":["export { useChartCanvas } from \"./use-chart-canvas.hook\";\nexport { useLineChart } from \"./use-line-chart.hook\";\nexport { useMultiLineChart } from \"./use-multi-line-chart.hook\";\n"],"mappings":"AAAA,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;","names":[]}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import * as _shopify_react_native_skia from '@shopify/react-native-skia';
|
|
3
|
+
|
|
4
|
+
declare function useChartCanvas(): {
|
|
5
|
+
ref: react.RefObject<_shopify_react_native_skia.CanvasRef | null>;
|
|
6
|
+
size: _shopify_react_native_skia.SkSize;
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
export { useChartCanvas };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { useCanvasRef, useCanvasSize } from "@shopify/react-native-skia";
|
|
2
|
+
function useChartCanvas() {
|
|
3
|
+
const ref = useCanvasRef();
|
|
4
|
+
const { size } = useCanvasSize(ref);
|
|
5
|
+
return { ref, size };
|
|
6
|
+
}
|
|
7
|
+
export {
|
|
8
|
+
useChartCanvas
|
|
9
|
+
};
|
|
10
|
+
//# sourceMappingURL=use-chart-canvas.hook.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/use-chart-canvas.hook.ts"],"sourcesContent":["import { useCanvasRef, useCanvasSize } from \"@shopify/react-native-skia\";\n\nexport function useChartCanvas() {\n const ref = useCanvasRef();\n const { size } = useCanvasSize(ref);\n\n return { ref, size };\n}\n"],"mappings":"AAAA,SAAS,cAAc,qBAAqB;AAErC,SAAS,iBAAiB;AAC/B,QAAM,MAAM,aAAa;AACzB,QAAM,EAAE,KAAK,IAAI,cAAc,GAAG;AAElC,SAAO,EAAE,KAAK,KAAK;AACrB;","names":[]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { b as ChartXValue } from '../line-chart.types-yxru5uWc.mjs';
|
|
2
|
+
import { UseLineChartProps, UseLineChartResult } from '../types/use-line-chart.types.mjs';
|
|
3
|
+
import '@shopify/react-native-skia';
|
|
4
|
+
import '../types/common.types.mjs';
|
|
5
|
+
import '../types/style.types.mjs';
|
|
6
|
+
import '@impulse-ui-native/theme';
|
|
7
|
+
|
|
8
|
+
declare function useLineChart<X extends ChartXValue = number>(props: UseLineChartProps<X>): UseLineChartResult<X>;
|
|
9
|
+
|
|
10
|
+
export { useLineChart };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { useMemo } from "react";
|
|
2
|
+
import { createLineChartModel } from "../utils";
|
|
3
|
+
function useLineChart(props) {
|
|
4
|
+
const { data, plot, xAxis, xScaleType, yAxis } = props;
|
|
5
|
+
return useMemo(
|
|
6
|
+
() => createLineChartModel({ data, plot, xAxis, xScaleType, yAxis }),
|
|
7
|
+
[data, plot, xAxis, xScaleType, yAxis]
|
|
8
|
+
);
|
|
9
|
+
}
|
|
10
|
+
export {
|
|
11
|
+
useLineChart
|
|
12
|
+
};
|
|
13
|
+
//# sourceMappingURL=use-line-chart.hook.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/use-line-chart.hook.ts"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { ChartXValue, UseLineChartProps, UseLineChartResult } from \"../types\";\nimport { createLineChartModel } from \"../utils\";\n\nexport function useLineChart<X extends ChartXValue = number>(\n props: UseLineChartProps<X>,\n): UseLineChartResult<X> {\n const { data, plot, xAxis, xScaleType, yAxis } = props;\n\n return useMemo(\n () => createLineChartModel({ data, plot, xAxis, xScaleType, yAxis }),\n [data, plot, xAxis, xScaleType, yAxis],\n );\n}\n"],"mappings":"AAAA,SAAS,eAAe;AAGxB,SAAS,4BAA4B;AAE9B,SAAS,aACd,OACuB;AACvB,QAAM,EAAE,MAAM,MAAM,OAAO,YAAY,MAAM,IAAI;AAEjD,SAAO;AAAA,IACL,MAAM,qBAAqB,EAAE,MAAM,MAAM,OAAO,YAAY,MAAM,CAAC;AAAA,IACnE,CAAC,MAAM,MAAM,OAAO,YAAY,KAAK;AAAA,EACvC;AACF;","names":[]}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { b as ChartXValue } from '../line-chart.types-yxru5uWc.mjs';
|
|
2
|
+
import { UseMultiLineChartProps, UseMultiLineChartResult } from '../types/use-multi-line-chart.types.mjs';
|
|
3
|
+
import '@shopify/react-native-skia';
|
|
4
|
+
import '../types/common.types.mjs';
|
|
5
|
+
import '../types/style.types.mjs';
|
|
6
|
+
import '@impulse-ui-native/theme';
|
|
7
|
+
import '../types/multi-line-chart.types.mjs';
|
|
8
|
+
import '../types/use-line-chart.types.mjs';
|
|
9
|
+
|
|
10
|
+
declare function useMultiLineChart<X extends ChartXValue = number>(props: UseMultiLineChartProps<X>): UseMultiLineChartResult<X>;
|
|
11
|
+
|
|
12
|
+
export { useMultiLineChart };
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { useMemo } from "react";
|
|
2
|
+
import { createLineChartCoordinates } from "../utils";
|
|
3
|
+
import { useLineChart } from "./use-line-chart.hook";
|
|
4
|
+
function useMultiLineChart(props) {
|
|
5
|
+
const { plot, series, xAxis, xScaleType, yAxis } = props;
|
|
6
|
+
const data = useMemo(
|
|
7
|
+
() => series.flatMap((currentSeries) => currentSeries.data),
|
|
8
|
+
[series]
|
|
9
|
+
);
|
|
10
|
+
const { xDomain, xScale, xTicks, yDomain, yScale, yTicks } = useLineChart({
|
|
11
|
+
data,
|
|
12
|
+
plot,
|
|
13
|
+
xAxis,
|
|
14
|
+
xScaleType,
|
|
15
|
+
yAxis
|
|
16
|
+
});
|
|
17
|
+
const seriesModels = useMemo(
|
|
18
|
+
() => series.map((currentSeries) => ({
|
|
19
|
+
...currentSeries,
|
|
20
|
+
coordinates: createLineChartCoordinates(
|
|
21
|
+
currentSeries.data,
|
|
22
|
+
xScale,
|
|
23
|
+
yScale
|
|
24
|
+
)
|
|
25
|
+
})),
|
|
26
|
+
[series, xScale, yScale]
|
|
27
|
+
);
|
|
28
|
+
return useMemo(
|
|
29
|
+
() => ({
|
|
30
|
+
series: seriesModels,
|
|
31
|
+
xDomain,
|
|
32
|
+
xScale,
|
|
33
|
+
xTicks,
|
|
34
|
+
yDomain,
|
|
35
|
+
yScale,
|
|
36
|
+
yTicks
|
|
37
|
+
}),
|
|
38
|
+
[seriesModels, xDomain, xScale, xTicks, yDomain, yScale, yTicks]
|
|
39
|
+
);
|
|
40
|
+
}
|
|
41
|
+
export {
|
|
42
|
+
useMultiLineChart
|
|
43
|
+
};
|
|
44
|
+
//# sourceMappingURL=use-multi-line-chart.hook.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/use-multi-line-chart.hook.ts"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport {\n ChartXValue,\n UseMultiLineChartProps,\n UseMultiLineChartResult,\n} from \"../types\";\nimport { createLineChartCoordinates } from \"../utils\";\nimport { useLineChart } from \"./use-line-chart.hook\";\n\nexport function useMultiLineChart<X extends ChartXValue = number>(\n props: UseMultiLineChartProps<X>,\n): UseMultiLineChartResult<X> {\n const { plot, series, xAxis, xScaleType, yAxis } = props;\n\n const data = useMemo(\n () => series.flatMap((currentSeries) => currentSeries.data),\n [series],\n );\n\n const { xDomain, xScale, xTicks, yDomain, yScale, yTicks } = useLineChart({\n data,\n plot,\n xAxis,\n xScaleType,\n yAxis,\n });\n\n const seriesModels = useMemo(\n () =>\n series.map((currentSeries) => ({\n ...currentSeries,\n coordinates: createLineChartCoordinates(\n currentSeries.data,\n xScale,\n yScale,\n ),\n })),\n [series, xScale, yScale],\n );\n\n return useMemo(\n () => ({\n series: seriesModels,\n xDomain,\n xScale,\n xTicks,\n yDomain,\n yScale,\n yTicks,\n }),\n [seriesModels, xDomain, xScale, xTicks, yDomain, yScale, yTicks],\n );\n}\n"],"mappings":"AAAA,SAAS,eAAe;AAOxB,SAAS,kCAAkC;AAC3C,SAAS,oBAAoB;AAEtB,SAAS,kBACd,OAC4B;AAC5B,QAAM,EAAE,MAAM,QAAQ,OAAO,YAAY,MAAM,IAAI;AAEnD,QAAM,OAAO;AAAA,IACX,MAAM,OAAO,QAAQ,CAAC,kBAAkB,cAAc,IAAI;AAAA,IAC1D,CAAC,MAAM;AAAA,EACT;AAEA,QAAM,EAAE,SAAS,QAAQ,QAAQ,SAAS,QAAQ,OAAO,IAAI,aAAa;AAAA,IACxE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,eAAe;AAAA,IACnB,MACE,OAAO,IAAI,CAAC,mBAAmB;AAAA,MAC7B,GAAG;AAAA,MACH,aAAa;AAAA,QACX,cAAc;AAAA,QACd;AAAA,QACA;AAAA,MACF;AAAA,IACF,EAAE;AAAA,IACJ,CAAC,QAAQ,QAAQ,MAAM;AAAA,EACzB;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,MACL,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,cAAc,SAAS,QAAQ,QAAQ,SAAS,QAAQ,MAAM;AAAA,EACjE;AACF;","names":[]}
|