@ledgerhq/lumen-ui-react-visualization 0.1.3 → 0.1.4
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/dist/lib/Components/Axis/Axis.types.d.ts +33 -0
- package/dist/lib/Components/Axis/Axis.types.d.ts.map +1 -0
- package/dist/lib/Components/Axis/XAxis/XAxis.d.ts +4 -0
- package/dist/lib/Components/Axis/XAxis/XAxis.d.ts.map +1 -0
- package/dist/lib/Components/Axis/XAxis/XAxis.js +84 -0
- package/dist/lib/Components/Axis/XAxis/index.d.ts.map +1 -0
- package/dist/lib/Components/Axis/XAxis/types.d.ts +9 -0
- package/dist/lib/Components/Axis/XAxis/types.d.ts.map +1 -0
- package/dist/lib/Components/Axis/YAxis/YAxis.d.ts +4 -0
- package/dist/lib/Components/Axis/YAxis/YAxis.d.ts.map +1 -0
- package/dist/lib/Components/Axis/YAxis/YAxis.js +81 -0
- package/dist/lib/Components/Axis/YAxis/index.d.ts.map +1 -0
- package/dist/lib/Components/Axis/YAxis/types.d.ts +14 -0
- package/dist/lib/Components/Axis/YAxis/types.d.ts.map +1 -0
- package/dist/lib/Components/CartesianChart/CartesianChart.d.ts.map +1 -1
- package/dist/lib/Components/CartesianChart/CartesianChart.js +29 -20
- package/dist/lib/Components/Line/Line.d.ts.map +1 -1
- package/dist/lib/Components/Line/Line.js +43 -23
- package/dist/lib/Components/LineChart/LineChart.d.ts.map +1 -1
- package/dist/lib/Components/LineChart/LineChart.js +32 -31
- package/dist/lib/Components/LineChart/types.d.ts +5 -3
- package/dist/lib/Components/LineChart/types.d.ts.map +1 -1
- package/dist/lib/utils/index.d.ts +1 -1
- package/dist/lib/utils/index.d.ts.map +1 -1
- package/dist/lib/utils/types.d.ts +0 -42
- package/dist/lib/utils/types.d.ts.map +1 -1
- package/dist/libs/ui-react/dist/lib/Components/ThemeProvider/ThemeProvider.js +8 -0
- package/dist/libs/ui-react/dist/libs/utils-shared/dist/index.js +35 -0
- package/dist/package.json +2 -2
- package/package.json +2 -2
- package/dist/lib/Components/XAxis/XAxis.d.ts +0 -4
- package/dist/lib/Components/XAxis/XAxis.d.ts.map +0 -1
- package/dist/lib/Components/XAxis/XAxis.js +0 -79
- package/dist/lib/Components/XAxis/index.d.ts.map +0 -1
- package/dist/lib/Components/XAxis/types.d.ts +0 -3
- package/dist/lib/Components/XAxis/types.d.ts.map +0 -1
- package/dist/lib/Components/YAxis/YAxis.d.ts +0 -4
- package/dist/lib/Components/YAxis/YAxis.d.ts.map +0 -1
- package/dist/lib/Components/YAxis/YAxis.js +0 -79
- package/dist/lib/Components/YAxis/index.d.ts.map +0 -1
- package/dist/lib/Components/YAxis/types.d.ts +0 -3
- package/dist/lib/Components/YAxis/types.d.ts.map +0 -1
- /package/dist/lib/Components/{XAxis → Axis/XAxis}/index.d.ts +0 -0
- /package/dist/lib/Components/{YAxis → Axis/YAxis}/index.d.ts +0 -0
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
export type BaseAxisProps = {
|
|
2
|
+
/**
|
|
3
|
+
* Whether to render grid lines at each tick.
|
|
4
|
+
* @default false
|
|
5
|
+
*/
|
|
6
|
+
showGrid?: boolean;
|
|
7
|
+
/**
|
|
8
|
+
* Appearance of the grid lines.
|
|
9
|
+
* @default 'dashed'
|
|
10
|
+
*/
|
|
11
|
+
gridLineStyle?: 'solid' | 'dashed';
|
|
12
|
+
/**
|
|
13
|
+
* Whether to render the axis baseline.
|
|
14
|
+
* @default false
|
|
15
|
+
*/
|
|
16
|
+
showLine?: boolean;
|
|
17
|
+
/**
|
|
18
|
+
* Whether to render tick marks at each tick position.
|
|
19
|
+
* @default false
|
|
20
|
+
*/
|
|
21
|
+
showTickMark?: boolean;
|
|
22
|
+
/**
|
|
23
|
+
* Explicit tick positions along the axis.
|
|
24
|
+
* When omitted, ticks are computed automatically from the scale.
|
|
25
|
+
*/
|
|
26
|
+
ticks?: number[];
|
|
27
|
+
/**
|
|
28
|
+
* Formats a tick value into its display label.
|
|
29
|
+
* Receives the raw tick value (number or string label) and must return a string.
|
|
30
|
+
*/
|
|
31
|
+
tickLabelFormatter?: (value: number | string) => string;
|
|
32
|
+
};
|
|
33
|
+
//# sourceMappingURL=Axis.types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Axis.types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Axis/Axis.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,MAAM,CAAC;CACzD,CAAC"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { XAxisProps } from './types';
|
|
2
|
+
export declare const DEFAULT_AXIS_HEIGHT = 28;
|
|
3
|
+
export declare function XAxis({ gridLineStyle, position, showGrid, showLine, showTickMark, ticks: ticksProp, tickLabelFormatter, }: XAxisProps): import("react/jsx-runtime").JSX.Element | null;
|
|
4
|
+
//# sourceMappingURL=XAxis.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"XAxis.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Axis/XAxis/XAxis.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAK1C,eAAO,MAAM,mBAAmB,KAAK,CAAC;AAEtC,wBAAgB,KAAK,CAAC,EACpB,aAAwB,EACxB,QAAmB,EACnB,QAAgB,EAChB,QAAgB,EAChB,YAAoB,EACpB,KAAK,EAAE,SAAS,EAChB,kBAAkB,GACnB,EAAE,UAAU,kDAqFZ"}
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import { jsxs as y, jsx as r, Fragment as C } from "react/jsx-runtime";
|
|
2
|
+
import { useTheme as _ } from "../../../../libs/ui-react/dist/lib/Components/ThemeProvider/ThemeProvider.js";
|
|
3
|
+
import { useMemo as D } from "react";
|
|
4
|
+
import { buildTicksData as I } from "../../../utils/ticks/ticks.js";
|
|
5
|
+
import { useCartesianChartContext as $ } from "../../CartesianChart/context/cartesianChartContext.js";
|
|
6
|
+
const l = 1, u = 4, k = 6, w = 28;
|
|
7
|
+
function H({
|
|
8
|
+
gridLineStyle: f = "dashed",
|
|
9
|
+
position: d = "bottom",
|
|
10
|
+
showGrid: g = !1,
|
|
11
|
+
showLine: b = !1,
|
|
12
|
+
showTickMark: T = !1,
|
|
13
|
+
ticks: m,
|
|
14
|
+
tickLabelFormatter: x
|
|
15
|
+
}) {
|
|
16
|
+
const { theme: o } = _(), { getXScale: A, getXAxisConfig: S, drawingArea: e } = $(), n = A(), c = S(), a = D(
|
|
17
|
+
() => n ? I(n, c, m, x) : [],
|
|
18
|
+
[n, c, m, x]
|
|
19
|
+
);
|
|
20
|
+
if (!n || e.width <= 0)
|
|
21
|
+
return null;
|
|
22
|
+
const h = d === "top", s = h ? e.y : e.y + e.height, p = h ? -1 : 1, E = s + p * (u + k);
|
|
23
|
+
return /* @__PURE__ */ y("g", { "data-testid": "x-axis", children: [
|
|
24
|
+
g && a.map((t, i) => /* @__PURE__ */ r(
|
|
25
|
+
"line",
|
|
26
|
+
{
|
|
27
|
+
x1: t.position,
|
|
28
|
+
y1: e.y,
|
|
29
|
+
x2: t.position,
|
|
30
|
+
y2: e.y + e.height,
|
|
31
|
+
style: { stroke: o.colors.border.mutedSubtle },
|
|
32
|
+
strokeWidth: l,
|
|
33
|
+
strokeDasharray: f === "dashed" ? "3 3" : void 0
|
|
34
|
+
},
|
|
35
|
+
`grid-${t.value}-${i}`
|
|
36
|
+
)),
|
|
37
|
+
b && /* @__PURE__ */ r(
|
|
38
|
+
"line",
|
|
39
|
+
{
|
|
40
|
+
x1: e.x,
|
|
41
|
+
y1: s,
|
|
42
|
+
x2: e.x + e.width,
|
|
43
|
+
y2: s,
|
|
44
|
+
style: { stroke: o.colors.border.muted },
|
|
45
|
+
strokeWidth: l,
|
|
46
|
+
shapeRendering: "crispEdges",
|
|
47
|
+
strokeLinecap: "square"
|
|
48
|
+
}
|
|
49
|
+
),
|
|
50
|
+
T && a.map((t, i) => /* @__PURE__ */ r(
|
|
51
|
+
"line",
|
|
52
|
+
{
|
|
53
|
+
x1: t.position,
|
|
54
|
+
y1: s,
|
|
55
|
+
x2: t.position,
|
|
56
|
+
y2: s + p * u,
|
|
57
|
+
style: { stroke: o.colors.border.muted },
|
|
58
|
+
strokeWidth: l
|
|
59
|
+
},
|
|
60
|
+
`tick-${t.value}-${i}`
|
|
61
|
+
)),
|
|
62
|
+
a.map((t, i) => /* @__PURE__ */ y(C, { children: [
|
|
63
|
+
" ",
|
|
64
|
+
/* @__PURE__ */ r(
|
|
65
|
+
"text",
|
|
66
|
+
{
|
|
67
|
+
x: t.position,
|
|
68
|
+
y: E,
|
|
69
|
+
textAnchor: "middle",
|
|
70
|
+
dominantBaseline: d === "top" ? "auto" : "hanging",
|
|
71
|
+
style: { fill: o.colors.text.muted },
|
|
72
|
+
fontSize: o.typographies.xs.body.body4.fontSize,
|
|
73
|
+
fontFamily: o.fontFamilies.sans,
|
|
74
|
+
children: t.label
|
|
75
|
+
},
|
|
76
|
+
`label-${t.value}-${i}`
|
|
77
|
+
)
|
|
78
|
+
] }))
|
|
79
|
+
] });
|
|
80
|
+
}
|
|
81
|
+
export {
|
|
82
|
+
w as DEFAULT_AXIS_HEIGHT,
|
|
83
|
+
H as XAxis
|
|
84
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Axis/XAxis/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AACrD,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Axis/XAxis/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnD,MAAM,MAAM,UAAU,GAAG,aAAa,GAAG;IACvC;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CAC7B,CAAC"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { YAxisProps } from './types';
|
|
2
|
+
export declare const DEFAULT_AXIS_WIDTH = 40;
|
|
3
|
+
export declare function YAxis({ gridLineStyle, position, showGrid, showLine, showTickMark, ticks: ticksProp, tickLabelFormatter, }: YAxisProps): import("react/jsx-runtime").JSX.Element | null;
|
|
4
|
+
//# sourceMappingURL=YAxis.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"YAxis.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Axis/YAxis/YAxis.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAK1C,eAAO,MAAM,kBAAkB,KAAK,CAAC;AAErC,wBAAgB,KAAK,CAAC,EACpB,aAAwB,EACxB,QAAkB,EAClB,QAAgB,EAChB,QAAgB,EAChB,YAAoB,EACpB,KAAK,EAAE,SAAS,EAChB,kBAAkB,GACnB,EAAE,UAAU,kDAkFZ"}
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import { jsxs as C, jsx as n } from "react/jsx-runtime";
|
|
2
|
+
import { useTheme as D } from "../../../../libs/ui-react/dist/lib/Components/ThemeProvider/ThemeProvider.js";
|
|
3
|
+
import { useMemo as E } from "react";
|
|
4
|
+
import { buildTicksData as _ } from "../../../utils/ticks/ticks.js";
|
|
5
|
+
import { useCartesianChartContext as I } from "../../CartesianChart/context/cartesianChartContext.js";
|
|
6
|
+
const l = 1, f = 4, $ = 6, w = 40;
|
|
7
|
+
function L({
|
|
8
|
+
gridLineStyle: p = "dashed",
|
|
9
|
+
position: d = "start",
|
|
10
|
+
showGrid: u = !1,
|
|
11
|
+
showLine: g = !1,
|
|
12
|
+
showTickMark: S = !1,
|
|
13
|
+
ticks: c,
|
|
14
|
+
tickLabelFormatter: x
|
|
15
|
+
}) {
|
|
16
|
+
const { theme: s } = D(), { getYScale: b, getYAxisConfig: A, drawingArea: e } = I(), r = b(), m = A(), a = E(
|
|
17
|
+
() => r ? _(r, m, c, x) : [],
|
|
18
|
+
[r, m, c, x]
|
|
19
|
+
);
|
|
20
|
+
if (!r || e.height <= 0)
|
|
21
|
+
return null;
|
|
22
|
+
const y = d === "start", o = y ? e.x : e.x + e.width, h = y ? -1 : 1, T = o + h * (f + $);
|
|
23
|
+
return /* @__PURE__ */ C("g", { "data-testid": "y-axis", children: [
|
|
24
|
+
u && a.map((t, i) => /* @__PURE__ */ n(
|
|
25
|
+
"line",
|
|
26
|
+
{
|
|
27
|
+
x1: e.x,
|
|
28
|
+
y1: t.position,
|
|
29
|
+
x2: e.x + e.width,
|
|
30
|
+
y2: t.position,
|
|
31
|
+
style: { stroke: s.colors.border.mutedSubtle },
|
|
32
|
+
strokeWidth: l,
|
|
33
|
+
strokeDasharray: p === "dashed" ? "3 3" : void 0
|
|
34
|
+
},
|
|
35
|
+
`grid-${t.value}-${i}`
|
|
36
|
+
)),
|
|
37
|
+
g && /* @__PURE__ */ n(
|
|
38
|
+
"line",
|
|
39
|
+
{
|
|
40
|
+
x1: o,
|
|
41
|
+
y1: e.y,
|
|
42
|
+
x2: o,
|
|
43
|
+
y2: e.y + e.height,
|
|
44
|
+
style: { stroke: s.colors.border.muted },
|
|
45
|
+
strokeWidth: l,
|
|
46
|
+
shapeRendering: "crispEdges",
|
|
47
|
+
strokeLinecap: "square"
|
|
48
|
+
}
|
|
49
|
+
),
|
|
50
|
+
S && a.map((t, i) => /* @__PURE__ */ n(
|
|
51
|
+
"line",
|
|
52
|
+
{
|
|
53
|
+
x1: o,
|
|
54
|
+
y1: t.position,
|
|
55
|
+
x2: o + h * f,
|
|
56
|
+
y2: t.position,
|
|
57
|
+
style: { stroke: s.colors.border.muted },
|
|
58
|
+
strokeWidth: l
|
|
59
|
+
},
|
|
60
|
+
`tick-${t.value}-${i}`
|
|
61
|
+
)),
|
|
62
|
+
a.map((t, i) => /* @__PURE__ */ n(
|
|
63
|
+
"text",
|
|
64
|
+
{
|
|
65
|
+
x: T,
|
|
66
|
+
y: t.position,
|
|
67
|
+
textAnchor: d === "start" ? "end" : "start",
|
|
68
|
+
dominantBaseline: "central",
|
|
69
|
+
style: { fill: s.colors.text.muted },
|
|
70
|
+
fontSize: s.typographies.xs.body.body4.fontSize,
|
|
71
|
+
fontFamily: s.fontFamilies.sans,
|
|
72
|
+
children: t.label
|
|
73
|
+
},
|
|
74
|
+
`label-${t.value}-${i}`
|
|
75
|
+
))
|
|
76
|
+
] });
|
|
77
|
+
}
|
|
78
|
+
export {
|
|
79
|
+
w as DEFAULT_AXIS_WIDTH,
|
|
80
|
+
L as YAxis
|
|
81
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Axis/YAxis/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AACpD,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { BaseAxisProps } from '../Axis.types';
|
|
2
|
+
export type YAxisProps = BaseAxisProps & {
|
|
3
|
+
/**
|
|
4
|
+
* Where the y-axis is rendered relative to the drawing area.
|
|
5
|
+
* @default 'start'
|
|
6
|
+
*/
|
|
7
|
+
position?: 'start' | 'end';
|
|
8
|
+
/**
|
|
9
|
+
* Width of the axis in pixels.
|
|
10
|
+
* @default 40
|
|
11
|
+
*/
|
|
12
|
+
width?: number;
|
|
13
|
+
};
|
|
14
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Axis/YAxis/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnD,MAAM,MAAM,UAAU,GAAG,aAAa,GAAG;IACvC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CartesianChart.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/CartesianChart/CartesianChart.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAoCnD,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,KAAK,EACL,KAAK,EACL,KAAc,EACd,MAAuB,EACvB,KAAK,EACL,WAAW,EACX,SAAmB,EACnB,QAAQ,GACT,EAAE,mBAAmB,
|
|
1
|
+
{"version":3,"file":"CartesianChart.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/CartesianChart/CartesianChart.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAoCnD,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,KAAK,EACL,KAAK,EACL,KAAc,EACd,MAAuB,EACvB,KAAK,EACL,WAAW,EACX,SAAmB,EACnB,QAAQ,GACT,EAAE,mBAAmB,2CA4ErB"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useRef as A, useState as I, useCallback as D, useEffect as P, useMemo as
|
|
1
|
+
import { jsx as c } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as A, useState as I, useCallback as D, useEffect as P, useMemo as b } from "react";
|
|
3
3
|
import { useBuildChartContext as T } from "./context/useBuildChartContext.js";
|
|
4
4
|
import { CartesianChartProvider as z } from "./context/cartesianChartContext.js";
|
|
5
5
|
const M = 160, o = {
|
|
@@ -20,50 +20,59 @@ const M = 160, o = {
|
|
|
20
20
|
};
|
|
21
21
|
function L({
|
|
22
22
|
series: t,
|
|
23
|
-
xAxis:
|
|
24
|
-
yAxis:
|
|
23
|
+
xAxis: h,
|
|
24
|
+
yAxis: p,
|
|
25
25
|
width: e = "100%",
|
|
26
26
|
height: n = M,
|
|
27
|
-
inset:
|
|
28
|
-
axisPadding:
|
|
27
|
+
inset: l,
|
|
28
|
+
axisPadding: f,
|
|
29
29
|
ariaLabel: C = "Chart",
|
|
30
30
|
children: y
|
|
31
31
|
}) {
|
|
32
32
|
const s = A(null), [u, g] = I(
|
|
33
33
|
typeof e == "number" ? e : void 0
|
|
34
|
-
),
|
|
34
|
+
), i = typeof e != "number", a = D((r) => {
|
|
35
35
|
const [v] = r;
|
|
36
36
|
v && g(v.contentRect.width);
|
|
37
37
|
}, []);
|
|
38
38
|
P(() => {
|
|
39
|
-
if (!
|
|
39
|
+
if (!i || !s.current || typeof ResizeObserver > "u")
|
|
40
40
|
return;
|
|
41
|
-
const r = new ResizeObserver(
|
|
41
|
+
const r = new ResizeObserver(a);
|
|
42
42
|
return r.observe(s.current), () => r.disconnect();
|
|
43
|
-
}, [
|
|
44
|
-
const
|
|
45
|
-
() => _(
|
|
46
|
-
[
|
|
43
|
+
}, [i, a]);
|
|
44
|
+
const m = typeof e == "number" ? e : u ?? 0, R = b(() => W(l), [l]), x = b(
|
|
45
|
+
() => _(f),
|
|
46
|
+
[f]
|
|
47
47
|
), E = T({
|
|
48
48
|
series: t,
|
|
49
|
-
xAxis:
|
|
50
|
-
yAxis:
|
|
51
|
-
width:
|
|
49
|
+
xAxis: h,
|
|
50
|
+
yAxis: p,
|
|
51
|
+
width: m,
|
|
52
52
|
height: n,
|
|
53
53
|
inset: R,
|
|
54
54
|
axisPadding: x
|
|
55
|
-
}),
|
|
55
|
+
}), d = /* @__PURE__ */ c(
|
|
56
56
|
"svg",
|
|
57
57
|
{
|
|
58
|
-
|
|
58
|
+
"data-testid": "chart-svg",
|
|
59
|
+
width: m,
|
|
59
60
|
height: n,
|
|
60
61
|
role: "img",
|
|
61
62
|
"aria-label": C || "Chart",
|
|
62
63
|
style: { display: "block", overflow: "visible" },
|
|
63
|
-
children: /* @__PURE__ */
|
|
64
|
+
children: /* @__PURE__ */ c(z, { value: E, children: y })
|
|
64
65
|
}
|
|
65
66
|
);
|
|
66
|
-
return
|
|
67
|
+
return i ? /* @__PURE__ */ c(
|
|
68
|
+
"div",
|
|
69
|
+
{
|
|
70
|
+
ref: s,
|
|
71
|
+
"data-testid": "chart-container",
|
|
72
|
+
style: { width: e, height: n },
|
|
73
|
+
children: u !== void 0 && d
|
|
74
|
+
}
|
|
75
|
+
) : d;
|
|
67
76
|
}
|
|
68
77
|
export {
|
|
69
78
|
L as CartesianChart
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Line.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Line/Line.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAMzC,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,MAAM,EACN,QAAgB,EAChB,QAAQ,EAAE,SAAsB,GACjC,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"Line.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Line/Line.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAMzC,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,MAAM,EACN,QAAgB,EAChB,QAAQ,EAAE,SAAsB,GACjC,EAAE,SAAS,kDA6EX"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsxs as l, Fragment as m, jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import { useId as y, useMemo as
|
|
2
|
+
import { useId as y, useMemo as d } from "react";
|
|
3
3
|
import { isNumericScale as A } from "../../utils/scales/scales.js";
|
|
4
4
|
import { toScaledPoints as P, buildLinePath as T, buildAreaPath as I } from "./utils.js";
|
|
5
5
|
import { useCartesianChartContext as L } from "../CartesianChart/context/cartesianChartContext.js";
|
|
@@ -7,40 +7,60 @@ const O = 2, _ = 0.2;
|
|
|
7
7
|
function M({
|
|
8
8
|
seriesId: g,
|
|
9
9
|
stroke: h,
|
|
10
|
-
showArea:
|
|
10
|
+
showArea: i = !1,
|
|
11
11
|
areaType: j = "gradient"
|
|
12
12
|
}) {
|
|
13
|
-
const { getXScale: x, getYScale: C, getXAxisConfig: S, drawingArea:
|
|
14
|
-
() => n?.data &&
|
|
15
|
-
[n,
|
|
16
|
-
), f =
|
|
13
|
+
const { getXScale: x, getYScale: C, getXAxisConfig: S, drawingArea: r, seriesMap: k } = L(), s = x(), o = C(), c = S(), p = y(), n = k.get(g), a = h ?? n?.stroke, t = d(
|
|
14
|
+
() => n?.data && s && o && A(o) ? P(n.data, s, o, c?.data) : null,
|
|
15
|
+
[n, s, o, c]
|
|
16
|
+
), f = d(
|
|
17
17
|
() => t ? T(t) : null,
|
|
18
18
|
[t]
|
|
19
|
-
), u =
|
|
20
|
-
() =>
|
|
21
|
-
[
|
|
19
|
+
), u = d(
|
|
20
|
+
() => i && t && r ? I(t, r) : null,
|
|
21
|
+
[i, t, r]
|
|
22
22
|
);
|
|
23
23
|
return f ? /* @__PURE__ */ l(m, { children: [
|
|
24
|
-
|
|
25
|
-
/* @__PURE__ */ e("defs", { children: /* @__PURE__ */ l(
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
24
|
+
i && u && a && /* @__PURE__ */ l(m, { children: [
|
|
25
|
+
/* @__PURE__ */ e("defs", { children: /* @__PURE__ */ l(
|
|
26
|
+
"linearGradient",
|
|
27
|
+
{
|
|
28
|
+
"data-testid": "line-gradient",
|
|
29
|
+
id: p,
|
|
30
|
+
x1: "0",
|
|
31
|
+
y1: "0",
|
|
32
|
+
x2: "0",
|
|
33
|
+
y2: "1",
|
|
34
|
+
children: [
|
|
35
|
+
/* @__PURE__ */ e(
|
|
36
|
+
"stop",
|
|
37
|
+
{
|
|
38
|
+
offset: "0%",
|
|
39
|
+
stopColor: a,
|
|
40
|
+
stopOpacity: _
|
|
41
|
+
}
|
|
42
|
+
),
|
|
43
|
+
/* @__PURE__ */ e("stop", { offset: "100%", stopColor: a, stopOpacity: 0 })
|
|
44
|
+
]
|
|
45
|
+
}
|
|
46
|
+
) }),
|
|
47
|
+
/* @__PURE__ */ e(
|
|
48
|
+
"path",
|
|
49
|
+
{
|
|
50
|
+
"data-testid": "line-area",
|
|
51
|
+
d: u,
|
|
52
|
+
fill: `url(#${p})`,
|
|
53
|
+
stroke: "none"
|
|
54
|
+
}
|
|
55
|
+
)
|
|
37
56
|
] }),
|
|
38
57
|
/* @__PURE__ */ e(
|
|
39
58
|
"path",
|
|
40
59
|
{
|
|
60
|
+
"data-testid": "line-path",
|
|
41
61
|
d: f,
|
|
42
62
|
fill: "none",
|
|
43
|
-
stroke:
|
|
63
|
+
stroke: a,
|
|
44
64
|
strokeWidth: O,
|
|
45
65
|
strokeLinecap: "round",
|
|
46
66
|
strokeLinejoin: "round"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/LineChart/LineChart.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,QAAgB,EAChB,QAAqB,EACrB,SAAiB,EACjB,SAAiB,EACjB,KAAK,EACL,KAAK,EACL,KAAc,EACd,MAAY,EACZ,KAAK,EACL,QAAQ,GACT,EAAE,cAAc,
|
|
1
|
+
{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/LineChart/LineChart.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,QAAgB,EAChB,QAAqB,EACrB,SAAiB,EACjB,SAAiB,EACjB,KAAK,EACL,KAAK,EACL,KAAc,EACd,MAAY,EACZ,KAAK,EACL,QAAQ,GACT,EAAE,cAAc,2CAwEhB"}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import { jsxs as b, jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import { useMemo as E } from "react";
|
|
3
|
-
import { DEFAULT_AXIS_WIDTH as
|
|
4
|
-
import { DEFAULT_AXIS_HEIGHT as m, XAxis as
|
|
5
|
-
import { CartesianChart as
|
|
6
|
-
import { Line as
|
|
3
|
+
import { DEFAULT_AXIS_WIDTH as H, YAxis as j } from "../Axis/YAxis/YAxis.js";
|
|
4
|
+
import { DEFAULT_AXIS_HEIGHT as m, XAxis as F } from "../Axis/XAxis/XAxis.js";
|
|
5
|
+
import { CartesianChart as U } from "../CartesianChart/CartesianChart.js";
|
|
6
|
+
import { Line as V } from "../Line/Line.js";
|
|
7
7
|
function q({
|
|
8
8
|
series: r,
|
|
9
9
|
showArea: d = !1,
|
|
10
|
-
areaType:
|
|
10
|
+
areaType: c = "gradient",
|
|
11
11
|
showXAxis: t = !1,
|
|
12
|
-
showYAxis:
|
|
13
|
-
xAxis:
|
|
12
|
+
showYAxis: i = !1,
|
|
13
|
+
xAxis: f,
|
|
14
14
|
yAxis: l,
|
|
15
15
|
width: x = "100%",
|
|
16
16
|
height: y = 160,
|
|
@@ -19,39 +19,40 @@ function q({
|
|
|
19
19
|
}) {
|
|
20
20
|
const {
|
|
21
21
|
scaleType: u,
|
|
22
|
-
data:
|
|
23
|
-
domain:
|
|
24
|
-
...
|
|
25
|
-
} =
|
|
22
|
+
data: A,
|
|
23
|
+
domain: D,
|
|
24
|
+
...n
|
|
25
|
+
} = f ?? {}, {
|
|
26
26
|
scaleType: C,
|
|
27
27
|
data: I,
|
|
28
28
|
domain: P,
|
|
29
|
-
...
|
|
29
|
+
...o
|
|
30
30
|
} = l ?? {}, L = {
|
|
31
31
|
scaleType: u,
|
|
32
|
-
data:
|
|
33
|
-
domain:
|
|
32
|
+
data: A,
|
|
33
|
+
domain: D
|
|
34
34
|
}, S = {
|
|
35
35
|
scaleType: C,
|
|
36
36
|
data: I,
|
|
37
37
|
domain: P
|
|
38
38
|
}, _ = E(() => {
|
|
39
|
-
if (!t && !
|
|
40
|
-
const
|
|
39
|
+
if (!t && !i) return;
|
|
40
|
+
const a = n.position === "top" ? "top" : "bottom", s = o.position === "end" ? "right" : "left", p = o.width ?? H;
|
|
41
41
|
return {
|
|
42
|
-
top: t &&
|
|
43
|
-
bottom: t &&
|
|
44
|
-
left:
|
|
45
|
-
right:
|
|
42
|
+
top: t && a === "top" ? m : 0,
|
|
43
|
+
bottom: t && a === "bottom" ? m : 0,
|
|
44
|
+
left: i && s === "left" ? p : 0,
|
|
45
|
+
right: i && s === "right" ? p : 0
|
|
46
46
|
};
|
|
47
47
|
}, [
|
|
48
48
|
t,
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
49
|
+
i,
|
|
50
|
+
n.position,
|
|
51
|
+
o.position,
|
|
52
|
+
o.width
|
|
52
53
|
]);
|
|
53
54
|
return /* @__PURE__ */ b(
|
|
54
|
-
|
|
55
|
+
U,
|
|
55
56
|
{
|
|
56
57
|
series: r ?? [],
|
|
57
58
|
xAxis: L,
|
|
@@ -61,16 +62,16 @@ function q({
|
|
|
61
62
|
inset: T,
|
|
62
63
|
axisPadding: _,
|
|
63
64
|
children: [
|
|
64
|
-
t && /* @__PURE__ */ e(
|
|
65
|
-
|
|
66
|
-
r?.map((
|
|
67
|
-
|
|
65
|
+
t && /* @__PURE__ */ e(F, { ...n }),
|
|
66
|
+
i && /* @__PURE__ */ e(j, { ...o }),
|
|
67
|
+
r?.map((a) => /* @__PURE__ */ e(
|
|
68
|
+
V,
|
|
68
69
|
{
|
|
69
|
-
seriesId:
|
|
70
|
+
seriesId: a.id,
|
|
70
71
|
showArea: d,
|
|
71
|
-
areaType:
|
|
72
|
+
areaType: c
|
|
72
73
|
},
|
|
73
|
-
|
|
74
|
+
a.id
|
|
74
75
|
)),
|
|
75
76
|
g
|
|
76
77
|
]
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
-
import { AxisConfigProps, ChartInset, Series
|
|
2
|
+
import { AxisConfigProps, ChartInset, Series } from '../../utils/types';
|
|
3
|
+
import { XAxisProps } from '../Axis/XAxis';
|
|
4
|
+
import { YAxisProps } from '../Axis/YAxis';
|
|
3
5
|
export type LineChartProps = {
|
|
4
6
|
/**
|
|
5
7
|
* Data series to render as lines.
|
|
@@ -31,12 +33,12 @@ export type LineChartProps = {
|
|
|
31
33
|
* Combined axis configuration and visual props for the x-axis.
|
|
32
34
|
* Includes scale/domain settings as well as visual options like `showGrid` and `showLine`.
|
|
33
35
|
*/
|
|
34
|
-
xAxis?: Partial<AxisConfigProps> &
|
|
36
|
+
xAxis?: Partial<AxisConfigProps> & XAxisProps;
|
|
35
37
|
/**
|
|
36
38
|
* Combined axis configuration and visual props for the y-axis.
|
|
37
39
|
* Includes scale/domain settings as well as visual options like `showGrid` and `showLine`.
|
|
38
40
|
*/
|
|
39
|
-
yAxis?: Partial<AxisConfigProps> &
|
|
41
|
+
yAxis?: Partial<AxisConfigProps> & YAxisProps;
|
|
40
42
|
/**
|
|
41
43
|
* Width of the chart.
|
|
42
44
|
* A number is treated as pixels; a string (e.g. `'100%'`) fills the container.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/LineChart/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/LineChart/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC7E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,MAAM,MAAM,cAAc,GAAG;IAC3B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,UAAU,CAAC;IAC9C;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,UAAU,CAAC;IAC9C;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;IACrC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export type { AxisBounds, AxisConfigProps, CartesianChartContextValue, CategoricalScale, ChartInset, ChartScaleFunction, DrawingArea, NumericScale, Series,
|
|
1
|
+
export type { AxisBounds, AxisConfigProps, CartesianChartContextValue, CategoricalScale, ChartInset, ChartScaleFunction, DrawingArea, NumericScale, Series, } from './types';
|
|
2
2
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,UAAU,EACV,eAAe,EACf,0BAA0B,EAC1B,gBAAgB,EAChB,UAAU,EACV,kBAAkB,EAClB,WAAW,EACX,YAAY,EACZ,MAAM,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,UAAU,EACV,eAAe,EACf,0BAA0B,EAC1B,gBAAgB,EAChB,UAAU,EACV,kBAAkB,EAClB,WAAW,EACX,YAAY,EACZ,MAAM,GACP,MAAM,SAAS,CAAC"}
|
|
@@ -55,47 +55,6 @@ export type AxisConfigProps = {
|
|
|
55
55
|
*/
|
|
56
56
|
domain?: Partial<AxisBounds> | ((bounds: AxisBounds) => AxisBounds);
|
|
57
57
|
};
|
|
58
|
-
type AxisVisualProps = {
|
|
59
|
-
/**
|
|
60
|
-
* Whether to render grid lines at each tick.
|
|
61
|
-
* @default false
|
|
62
|
-
*/
|
|
63
|
-
showGrid?: boolean;
|
|
64
|
-
/**
|
|
65
|
-
* Whether to render the axis baseline.
|
|
66
|
-
* @default false
|
|
67
|
-
*/
|
|
68
|
-
showLine?: boolean;
|
|
69
|
-
/**
|
|
70
|
-
* Whether to render tick marks at each tick position.
|
|
71
|
-
* @default false
|
|
72
|
-
*/
|
|
73
|
-
showTickMark?: boolean;
|
|
74
|
-
/**
|
|
75
|
-
* Explicit tick positions along the axis.
|
|
76
|
-
* When omitted, ticks are computed automatically from the scale.
|
|
77
|
-
*/
|
|
78
|
-
ticks?: number[];
|
|
79
|
-
/**
|
|
80
|
-
* Formats a tick value into its display label.
|
|
81
|
-
* Receives the raw tick value (number or string label) and must return a string.
|
|
82
|
-
*/
|
|
83
|
-
tickLabelFormatter?: (value: number | string) => string;
|
|
84
|
-
};
|
|
85
|
-
export type XAxisVisualProps = {
|
|
86
|
-
/**
|
|
87
|
-
* Where the x-axis is rendered relative to the drawing area.
|
|
88
|
-
* @default 'bottom'
|
|
89
|
-
*/
|
|
90
|
-
position?: 'top' | 'bottom';
|
|
91
|
-
} & AxisVisualProps;
|
|
92
|
-
export type YAxisVisualProps = {
|
|
93
|
-
/**
|
|
94
|
-
* Where the y-axis is rendered relative to the drawing area.
|
|
95
|
-
* @default 'start'
|
|
96
|
-
*/
|
|
97
|
-
position?: 'start' | 'end';
|
|
98
|
-
} & AxisVisualProps;
|
|
99
58
|
export type NumericScale = ScaleLinear<number, number> | ScaleLogarithmic<number, number>;
|
|
100
59
|
export type CategoricalScale = ScaleBand<number>;
|
|
101
60
|
export type ChartScaleFunction = NumericScale | CategoricalScale;
|
|
@@ -133,5 +92,4 @@ export type CartesianChartContextValue = {
|
|
|
133
92
|
*/
|
|
134
93
|
dataLength: number;
|
|
135
94
|
};
|
|
136
|
-
export {};
|
|
137
95
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEzE,MAAM,MAAM,UAAU,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC;AAEtD,MAAM,MAAM,UAAU,GAAG;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,MAAM,GAAG;IACnB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;IACtC;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,EAAE,CAAC;IAC3B;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,UAAU,KAAK,UAAU,CAAC,CAAC;CACrE,CAAC;AAEF,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEzE,MAAM,MAAM,UAAU,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC;AAEtD,MAAM,MAAM,UAAU,GAAG;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,MAAM,GAAG;IACnB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;IACtC;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,EAAE,CAAC;IAC3B;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,UAAU,KAAK,UAAU,CAAC,CAAC;CACrE,CAAC;AAEF,MAAM,MAAM,YAAY,GACpB,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,GAC3B,gBAAgB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAErC,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;AAEjD,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,gBAAgB,CAAC;AAEjE,MAAM,MAAM,0BAA0B,GAAG;IACvC;;OAEG;IACH,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB;;OAEG;IACH,SAAS,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B;;OAEG;IACH,SAAS,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,kBAAkB,GAAG,SAAS,CAAC;IAC3D;;OAEG;IACH,SAAS,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,kBAAkB,GAAG,SAAS,CAAC;IAC3D;;OAEG;IACH,cAAc,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,eAAe,GAAG,SAAS,CAAC;IAC7D;;OAEG;IACH,cAAc,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,eAAe,GAAG,SAAS,CAAC;IAC7D;;OAEG;IACH,WAAW,EAAE,WAAW,CAAC;IACzB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { jsx as a } from "react/jsx-runtime";
|
|
2
|
+
import { createContext as i, useRef as l, useContext as f } from "react";
|
|
3
|
+
function d(n, o) {
|
|
4
|
+
if (Object.is(n, o)) return !0;
|
|
5
|
+
const u = n, t = o, c = Object.keys(u), s = Object.keys(t);
|
|
6
|
+
return c.length !== s.length ? !1 : c.every(
|
|
7
|
+
(e) => Object.prototype.hasOwnProperty.call(t, e) && Object.is(u[e], t[e])
|
|
8
|
+
);
|
|
9
|
+
}
|
|
10
|
+
function b(n, o) {
|
|
11
|
+
const u = i(o), t = ({ children: s, value: e }) => {
|
|
12
|
+
const r = l(e);
|
|
13
|
+
return d(r.current, e) || (r.current = e), /* @__PURE__ */ a(u.Provider, { value: r.current, children: s });
|
|
14
|
+
};
|
|
15
|
+
t.displayName = n + "Provider";
|
|
16
|
+
function c({
|
|
17
|
+
consumerName: s,
|
|
18
|
+
contextRequired: e
|
|
19
|
+
}) {
|
|
20
|
+
const r = f(u);
|
|
21
|
+
if (r)
|
|
22
|
+
return r;
|
|
23
|
+
if (e)
|
|
24
|
+
throw new Error(
|
|
25
|
+
`${s} must be used within ${n}`
|
|
26
|
+
);
|
|
27
|
+
return o || {};
|
|
28
|
+
}
|
|
29
|
+
return [t, c];
|
|
30
|
+
}
|
|
31
|
+
b("Disabled", { disabled: !1 });
|
|
32
|
+
export {
|
|
33
|
+
b as createSafeContext,
|
|
34
|
+
d as shallowEqual
|
|
35
|
+
};
|
package/dist/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ledgerhq/lumen-ui-react-visualization",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.3",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"keywords": [
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
},
|
|
35
35
|
"peerDependencies": {
|
|
36
36
|
"@ledgerhq/lumen-design-core": "0.1.11",
|
|
37
|
-
"@ledgerhq/lumen-ui-react": "0.1.
|
|
37
|
+
"@ledgerhq/lumen-ui-react": "0.1.24",
|
|
38
38
|
"class-variance-authority": "^0.7.1",
|
|
39
39
|
"clsx": "^2.1.1",
|
|
40
40
|
"react": "^18.0.0 || ^19.0.0",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ledgerhq/lumen-ui-react-visualization",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.4",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"keywords": [
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
},
|
|
35
35
|
"peerDependencies": {
|
|
36
36
|
"@ledgerhq/lumen-design-core": "0.1.11",
|
|
37
|
-
"@ledgerhq/lumen-ui-react": "0.1.
|
|
37
|
+
"@ledgerhq/lumen-ui-react": "0.1.25",
|
|
38
38
|
"class-variance-authority": "^0.7.1",
|
|
39
39
|
"clsx": "^2.1.1",
|
|
40
40
|
"react": "^18.0.0 || ^19.0.0",
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import { XAxisProps } from './types';
|
|
2
|
-
export declare const DEFAULT_AXIS_HEIGHT = 28;
|
|
3
|
-
export declare function XAxis({ position, showGrid, showLine, showTickMark, ticks: ticksProp, tickLabelFormatter, }: XAxisProps): import("react/jsx-runtime").JSX.Element | null;
|
|
4
|
-
//# sourceMappingURL=XAxis.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"XAxis.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/XAxis/XAxis.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAK1C,eAAO,MAAM,mBAAmB,KAAK,CAAC;AAEtC,wBAAgB,KAAK,CAAC,EACpB,QAAmB,EACnB,QAAgB,EAChB,QAAgB,EAChB,YAAoB,EACpB,KAAK,EAAE,SAAS,EAChB,kBAAkB,GACnB,EAAE,UAAU,kDAkFZ"}
|
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
import { jsxs as b, jsx as r } from "react/jsx-runtime";
|
|
2
|
-
import { useMemo as T } from "react";
|
|
3
|
-
import { buildTicksData as v } from "../../utils/ticks/ticks.js";
|
|
4
|
-
import { useCartesianChartContext as C } from "../CartesianChart/context/cartesianChartContext.js";
|
|
5
|
-
const l = 1, y = 4, E = 6, $ = 28;
|
|
6
|
-
function k({
|
|
7
|
-
position: n = "bottom",
|
|
8
|
-
showGrid: c = !1,
|
|
9
|
-
showLine: h = !1,
|
|
10
|
-
showTickMark: p = !1,
|
|
11
|
-
ticks: d,
|
|
12
|
-
tickLabelFormatter: x
|
|
13
|
-
}) {
|
|
14
|
-
const { getXScale: f, getXAxisConfig: g, drawingArea: e } = C(), i = f(), m = g(), a = T(
|
|
15
|
-
() => i ? v(i, m, d, x) : [],
|
|
16
|
-
[i, m, d, x]
|
|
17
|
-
);
|
|
18
|
-
if (!i || e.width <= 0)
|
|
19
|
-
return null;
|
|
20
|
-
const s = n === "top" ? e.y : e.y + e.height, u = n === "top" ? -1 : 1, A = s + u * (y + E);
|
|
21
|
-
return /* @__PURE__ */ b("g", { "data-testid": "x-axis", children: [
|
|
22
|
-
c && a.map((t, o) => /* @__PURE__ */ r(
|
|
23
|
-
"line",
|
|
24
|
-
{
|
|
25
|
-
x1: t.position,
|
|
26
|
-
y1: e.y,
|
|
27
|
-
x2: t.position,
|
|
28
|
-
y2: e.y + e.height,
|
|
29
|
-
style: { stroke: "var(--border-muted-subtle)" },
|
|
30
|
-
strokeWidth: l,
|
|
31
|
-
strokeDasharray: "2 2"
|
|
32
|
-
},
|
|
33
|
-
`grid-${t.value}-${o}`
|
|
34
|
-
)),
|
|
35
|
-
h && /* @__PURE__ */ r(
|
|
36
|
-
"line",
|
|
37
|
-
{
|
|
38
|
-
x1: e.x,
|
|
39
|
-
y1: s,
|
|
40
|
-
x2: e.x + e.width,
|
|
41
|
-
y2: s,
|
|
42
|
-
style: { stroke: "var(--border-muted)" },
|
|
43
|
-
strokeWidth: l,
|
|
44
|
-
shapeRendering: "crispEdges",
|
|
45
|
-
strokeLinecap: "square"
|
|
46
|
-
}
|
|
47
|
-
),
|
|
48
|
-
p && a.map((t, o) => /* @__PURE__ */ r(
|
|
49
|
-
"line",
|
|
50
|
-
{
|
|
51
|
-
x1: t.position,
|
|
52
|
-
y1: s,
|
|
53
|
-
x2: t.position,
|
|
54
|
-
y2: s + u * y,
|
|
55
|
-
style: { stroke: "var(--border-muted)" },
|
|
56
|
-
strokeWidth: l
|
|
57
|
-
},
|
|
58
|
-
`tick-${t.value}-${o}`
|
|
59
|
-
)),
|
|
60
|
-
a.map((t, o) => /* @__PURE__ */ r(
|
|
61
|
-
"text",
|
|
62
|
-
{
|
|
63
|
-
x: t.position,
|
|
64
|
-
y: A,
|
|
65
|
-
textAnchor: "middle",
|
|
66
|
-
dominantBaseline: n === "top" ? "auto" : "hanging",
|
|
67
|
-
style: { fill: "var(--text-muted)" },
|
|
68
|
-
fontSize: 11,
|
|
69
|
-
fontFamily: "Inter, system-ui, sans-serif",
|
|
70
|
-
children: t.label
|
|
71
|
-
},
|
|
72
|
-
`label-${t.value}-${o}`
|
|
73
|
-
))
|
|
74
|
-
] });
|
|
75
|
-
}
|
|
76
|
-
export {
|
|
77
|
-
$ as DEFAULT_AXIS_HEIGHT,
|
|
78
|
-
k as XAxis
|
|
79
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/XAxis/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AACrD,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/XAxis/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,MAAM,MAAM,UAAU,GAAG,gBAAgB,CAAC"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import { YAxisProps } from './types';
|
|
2
|
-
export declare const DEFAULT_AXIS_WIDTH = 40;
|
|
3
|
-
export declare function YAxis({ position, showGrid, showLine, showTickMark, ticks: ticksProp, tickLabelFormatter, }: YAxisProps): import("react/jsx-runtime").JSX.Element | null;
|
|
4
|
-
//# sourceMappingURL=YAxis.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"YAxis.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/YAxis/YAxis.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAK1C,eAAO,MAAM,kBAAkB,KAAK,CAAC;AAErC,wBAAgB,KAAK,CAAC,EACpB,QAAkB,EAClB,QAAgB,EAChB,QAAgB,EAChB,YAAoB,EACpB,KAAK,EAAE,SAAS,EAChB,kBAAkB,GACnB,EAAE,UAAU,kDAkFZ"}
|
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
import { jsxs as T, jsx as i } from "react/jsx-runtime";
|
|
2
|
-
import { useMemo as b } from "react";
|
|
3
|
-
import { buildTicksData as v } from "../../utils/ticks/ticks.js";
|
|
4
|
-
import { useCartesianChartContext as C } from "../CartesianChart/context/cartesianChartContext.js";
|
|
5
|
-
const l = 1, m = 4, D = 6, $ = 40;
|
|
6
|
-
function k({
|
|
7
|
-
position: o = "start",
|
|
8
|
-
showGrid: u = !1,
|
|
9
|
-
showLine: f = !1,
|
|
10
|
-
showTickMark: h = !1,
|
|
11
|
-
ticks: d,
|
|
12
|
-
tickLabelFormatter: x
|
|
13
|
-
}) {
|
|
14
|
-
const { getYScale: p, getYAxisConfig: g, drawingArea: e } = C(), a = p(), y = g(), n = b(
|
|
15
|
-
() => a ? v(a, y, d, x) : [],
|
|
16
|
-
[a, y, d, x]
|
|
17
|
-
);
|
|
18
|
-
if (!a || e.height <= 0)
|
|
19
|
-
return null;
|
|
20
|
-
const s = o === "start" ? e.x : e.x + e.width, c = o === "start" ? -1 : 1, A = s + c * (m + D);
|
|
21
|
-
return /* @__PURE__ */ T("g", { "data-testid": "y-axis", children: [
|
|
22
|
-
u && n.map((t, r) => /* @__PURE__ */ i(
|
|
23
|
-
"line",
|
|
24
|
-
{
|
|
25
|
-
x1: e.x,
|
|
26
|
-
y1: t.position,
|
|
27
|
-
x2: e.x + e.width,
|
|
28
|
-
y2: t.position,
|
|
29
|
-
style: { stroke: "var(--border-muted-subtle)" },
|
|
30
|
-
strokeWidth: l,
|
|
31
|
-
strokeDasharray: "2 2"
|
|
32
|
-
},
|
|
33
|
-
`grid-${t.value}-${r}`
|
|
34
|
-
)),
|
|
35
|
-
f && /* @__PURE__ */ i(
|
|
36
|
-
"line",
|
|
37
|
-
{
|
|
38
|
-
x1: s,
|
|
39
|
-
y1: e.y,
|
|
40
|
-
x2: s,
|
|
41
|
-
y2: e.y + e.height,
|
|
42
|
-
style: { stroke: "var(--border-muted)" },
|
|
43
|
-
strokeWidth: l,
|
|
44
|
-
shapeRendering: "crispEdges",
|
|
45
|
-
strokeLinecap: "square"
|
|
46
|
-
}
|
|
47
|
-
),
|
|
48
|
-
h && n.map((t, r) => /* @__PURE__ */ i(
|
|
49
|
-
"line",
|
|
50
|
-
{
|
|
51
|
-
x1: s,
|
|
52
|
-
y1: t.position,
|
|
53
|
-
x2: s + c * m,
|
|
54
|
-
y2: t.position,
|
|
55
|
-
style: { stroke: "var(--border-muted)" },
|
|
56
|
-
strokeWidth: l
|
|
57
|
-
},
|
|
58
|
-
`tick-${t.value}-${r}`
|
|
59
|
-
)),
|
|
60
|
-
n.map((t, r) => /* @__PURE__ */ i(
|
|
61
|
-
"text",
|
|
62
|
-
{
|
|
63
|
-
x: A,
|
|
64
|
-
y: t.position,
|
|
65
|
-
textAnchor: o === "start" ? "end" : "start",
|
|
66
|
-
dominantBaseline: "central",
|
|
67
|
-
style: { fill: "var(--text-muted)" },
|
|
68
|
-
fontSize: 11,
|
|
69
|
-
fontFamily: "Inter, system-ui, sans-serif",
|
|
70
|
-
children: t.label
|
|
71
|
-
},
|
|
72
|
-
`label-${t.value}-${r}`
|
|
73
|
-
))
|
|
74
|
-
] });
|
|
75
|
-
}
|
|
76
|
-
export {
|
|
77
|
-
$ as DEFAULT_AXIS_WIDTH,
|
|
78
|
-
k as YAxis
|
|
79
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/YAxis/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AACpD,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/YAxis/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,MAAM,MAAM,UAAU,GAAG,gBAAgB,CAAC"}
|
|
File without changes
|
|
File without changes
|