@impulse-ui-native/charts 2.3.0 → 2.3.3
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/README.md +13 -3
- package/dist/components/bar-chart/bar-chart-body.js +2 -1
- package/dist/components/bar-chart/bar-chart-body.js.map +1 -1
- package/dist/components/line-chart/line-chart-body.js +2 -2
- package/dist/components/line-chart/line-chart-body.js.map +1 -1
- package/dist/components/multi-bar-chart/multi-bar-chart-body.js +2 -1
- package/dist/components/multi-bar-chart/multi-bar-chart-body.js.map +1 -1
- package/dist/components/multi-line-chart/multi-line-chart-body.js +2 -1
- package/dist/components/multi-line-chart/multi-line-chart-body.js.map +1 -1
- package/dist/constants/chart-layout.constants.d.mts +7 -0
- package/dist/constants/chart-layout.constants.js +10 -0
- package/dist/constants/chart-layout.constants.js.map +1 -0
- package/dist/constants/index.d.mts +3 -2
- package/dist/constants/index.js +1 -0
- package/dist/constants/index.js.map +1 -1
- package/dist/hooks/use-chart-layout.hook.d.mts +1 -1
- package/dist/hooks/use-chart-layout.hook.js +5 -2
- package/dist/hooks/use-chart-layout.hook.js.map +1 -1
- package/dist/index.d.mts +1 -0
- package/dist/utils/chart-layout.util.d.mts +1 -1
- package/dist/utils/chart-layout.util.js +5 -5
- package/dist/utils/chart-layout.util.js.map +1 -1
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -2,6 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
Skia-rendered chart components and primitives for Impulse UI Native.
|
|
4
4
|
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```sh
|
|
8
|
+
pnpm add @impulse-ui-native/charts @shopify/react-native-skia
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
Follow Skia's platform setup instructions before rendering a chart.
|
|
12
|
+
|
|
5
13
|
## Components
|
|
6
14
|
|
|
7
15
|
The package provides Skia-rendered `LineChart`, `MultiLineChart`, `BarChart`, `MultiBarChart`, `PieChart`, and `MultiPieChart` components. Charts fill their parent, so give the surrounding view an explicit height.
|
|
@@ -15,11 +23,14 @@ import { BarChart } from "@impulse-ui-native/charts";
|
|
|
15
23
|
{ x: "Feb", y: 24 },
|
|
16
24
|
{ x: "Mar", y: 16 },
|
|
17
25
|
]}
|
|
18
|
-
insets={{ left: 40, bottom: 28 }}
|
|
19
26
|
bar={{ color: "#6366f1", radius: 4 }}
|
|
20
27
|
/>;
|
|
21
28
|
```
|
|
22
29
|
|
|
30
|
+
Cartesian charts reserve enough space for their default axes and endpoint
|
|
31
|
+
labels. Use partial `insets` to override individual sides when custom labels,
|
|
32
|
+
font sizes, or rotations need different spacing.
|
|
33
|
+
|
|
23
34
|
Use `MultiBarChart` for grouped series. Categories are shared across the series, and each series can supply its own bar style.
|
|
24
35
|
|
|
25
36
|
```tsx
|
|
@@ -44,7 +55,6 @@ import { MultiBarChart } from "@impulse-ui-native/charts";
|
|
|
44
55
|
]}
|
|
45
56
|
categoryPadding={0.2}
|
|
46
57
|
seriesPadding={0.1}
|
|
47
|
-
insets={{ left: 40, bottom: 28 }}
|
|
48
58
|
/>;
|
|
49
59
|
```
|
|
50
60
|
|
|
@@ -108,4 +118,4 @@ import { MultiPieChart } from "@impulse-ui-native/charts";
|
|
|
108
118
|
|
|
109
119
|
## Native prerequisite
|
|
110
120
|
|
|
111
|
-
Chart APIs require `@shopify/react-native-skia` version 2 or newer.
|
|
121
|
+
Chart APIs require `@shopify/react-native-skia` version 2 or newer.
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Group } from "@shopify/react-native-skia";
|
|
3
3
|
import { memo } from "@impulse-ui-native/core";
|
|
4
|
+
import { CartesianChartDefaultInsets } from "../../constants";
|
|
4
5
|
import { useBarChart, useChartLayout } from "../../hooks";
|
|
5
6
|
import { ChartAxes } from "../chart-axes";
|
|
6
7
|
import { Bar } from "../primitives";
|
|
@@ -17,7 +18,7 @@ const BarChartBody = memo(function BarChartBodyComponent(props) {
|
|
|
17
18
|
xAxis,
|
|
18
19
|
yAxis
|
|
19
20
|
} = props;
|
|
20
|
-
const layout = useChartLayout(size, insets);
|
|
21
|
+
const layout = useChartLayout(size, insets, CartesianChartDefaultInsets);
|
|
21
22
|
const { coordinates, xScale, xTicks, yScale, yTicks } = useBarChart({
|
|
22
23
|
categoryPadding,
|
|
23
24
|
data,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/bar-chart/bar-chart-body.tsx"],"sourcesContent":["import { Group } from \"@shopify/react-native-skia\";\n\nimport { memo } from \"@impulse-ui-native/core\";\nimport { AppTheme } from \"@impulse-ui-native/theme\";\n\nimport { useBarChart, useChartLayout } from \"../../hooks\";\nimport { BarChartProps, ChartSize, ChartXValue } from \"../../types\";\nimport { ChartAxes } from \"../chart-axes\";\nimport { Bar } from \"../primitives\";\n\ninterface BarChartBodyProps<X extends ChartXValue> extends BarChartProps<X> {\n size: ChartSize;\n theme: AppTheme;\n}\n\nexport const BarChartBody = memo(function BarChartBodyComponent<\n X extends ChartXValue = string,\n>(props: BarChartBodyProps<X>) {\n const {\n bar,\n categoryPadding,\n data,\n fontManager,\n grid,\n insets,\n size,\n theme,\n xAxis,\n yAxis,\n } = props;\n const layout = useChartLayout(size, insets);\n const { coordinates, xScale, xTicks, yScale, yTicks } = useBarChart({\n categoryPadding,\n data,\n plot: layout.plot,\n xAxis,\n yAxis,\n });\n\n return (\n <>\n <ChartAxes\n fontManager={fontManager}\n grid={grid}\n layout={layout}\n theme={theme}\n xAxis={xAxis}\n xScale={xScale}\n xTicks={xTicks}\n yAxis={yAxis}\n yScale={yScale}\n yTicks={yTicks}\n />\n\n <Group clip={layout.plot}>\n <Bar coordinates={coordinates} {...bar} />\n </Group>\n </>\n );\n});\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/bar-chart/bar-chart-body.tsx"],"sourcesContent":["import { Group } from \"@shopify/react-native-skia\";\n\nimport { memo } from \"@impulse-ui-native/core\";\nimport { AppTheme } from \"@impulse-ui-native/theme\";\n\nimport { CartesianChartDefaultInsets } from \"../../constants\";\nimport { useBarChart, useChartLayout } from \"../../hooks\";\nimport { BarChartProps, ChartSize, ChartXValue } from \"../../types\";\nimport { ChartAxes } from \"../chart-axes\";\nimport { Bar } from \"../primitives\";\n\ninterface BarChartBodyProps<X extends ChartXValue> extends BarChartProps<X> {\n size: ChartSize;\n theme: AppTheme;\n}\n\nexport const BarChartBody = memo(function BarChartBodyComponent<\n X extends ChartXValue = string,\n>(props: BarChartBodyProps<X>) {\n const {\n bar,\n categoryPadding,\n data,\n fontManager,\n grid,\n insets,\n size,\n theme,\n xAxis,\n yAxis,\n } = props;\n const layout = useChartLayout(size, insets, CartesianChartDefaultInsets);\n const { coordinates, xScale, xTicks, yScale, yTicks } = useBarChart({\n categoryPadding,\n data,\n plot: layout.plot,\n xAxis,\n yAxis,\n });\n\n return (\n <>\n <ChartAxes\n fontManager={fontManager}\n grid={grid}\n layout={layout}\n theme={theme}\n xAxis={xAxis}\n xScale={xScale}\n xTicks={xTicks}\n yAxis={yAxis}\n yScale={yScale}\n yTicks={yTicks}\n />\n\n <Group clip={layout.plot}>\n <Bar coordinates={coordinates} {...bar} />\n </Group>\n </>\n );\n});\n"],"mappings":"AAyCI,mBACE,KADF;AAzCJ,SAAS,aAAa;AAEtB,SAAS,YAAY;AAGrB,SAAS,mCAAmC;AAC5C,SAAS,aAAa,sBAAsB;AAE5C,SAAS,iBAAiB;AAC1B,SAAS,WAAW;AAOb,MAAM,eAAe,KAAK,SAAS,sBAExC,OAA6B;AAC7B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,SAAS,eAAe,MAAM,QAAQ,2BAA2B;AACvE,QAAM,EAAE,aAAa,QAAQ,QAAQ,QAAQ,OAAO,IAAI,YAAY;AAAA,IAClE;AAAA,IACA;AAAA,IACA,MAAM,OAAO;AAAA,IACb;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,IAEA,oBAAC,SAAM,MAAM,OAAO,MAClB,8BAAC,OAAI,aAA2B,GAAG,KAAK,GAC1C;AAAA,KACF;AAEJ,CAAC;","names":[]}
|
|
@@ -2,7 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { useMemo } from "react";
|
|
3
3
|
import { Group } from "@shopify/react-native-skia";
|
|
4
4
|
import { memo } from "@impulse-ui-native/core";
|
|
5
|
-
import { LineDefaultWidth } from "../../constants";
|
|
5
|
+
import { CartesianChartDefaultInsets, LineDefaultWidth } from "../../constants";
|
|
6
6
|
import { useChartLayout, useLineChart } from "../../hooks";
|
|
7
7
|
import { createInsetRect, fitLineCoordinatesToRect } from "../../utils";
|
|
8
8
|
import { Grid, Line, XAxis, YAxis } from "../primitives";
|
|
@@ -19,7 +19,7 @@ const LineChartBody = memo(function LineChartBodyComponent(props) {
|
|
|
19
19
|
xScaleType,
|
|
20
20
|
yAxis
|
|
21
21
|
} = props;
|
|
22
|
-
const layout = useChartLayout(size, insets);
|
|
22
|
+
const layout = useChartLayout(size, insets, CartesianChartDefaultInsets);
|
|
23
23
|
const { coordinates, xScale, xTicks, yScale, yTicks } = useLineChart({
|
|
24
24
|
data,
|
|
25
25
|
plot: layout.plot,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/line-chart/line-chart-body.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { Group } from \"@shopify/react-native-skia\";\n\nimport { memo } from \"@impulse-ui-native/core\";\nimport { AppTheme } from \"@impulse-ui-native/theme\";\n\nimport { LineDefaultWidth } from \"../../constants\";\nimport { useChartLayout, useLineChart } from \"../../hooks\";\nimport { ChartSize, ChartXValue, LineChartProps } from \"../../types\";\nimport { createInsetRect, fitLineCoordinatesToRect } from \"../../utils\";\nimport { Grid, Line, XAxis, YAxis } from \"../primitives\";\n\ninterface LineChartBodyProps<X extends ChartXValue> extends LineChartProps<X> {\n size: ChartSize;\n theme: AppTheme;\n}\n\nexport const LineChartBody = memo(function LineChartBodyComponent<\n X extends ChartXValue = number,\n>(props: LineChartBodyProps<X>) {\n const {\n data,\n fontManager,\n grid,\n insets,\n line,\n size,\n theme,\n xAxis,\n xScaleType,\n yAxis,\n } = props;\n\n const layout = useChartLayout(size, insets);\n\n const { coordinates, xScale, xTicks, yScale, yTicks } = useLineChart({\n data,\n plot: layout.plot,\n xAxis,\n xScaleType,\n yAxis,\n });\n\n const linePlot = useMemo(\n () => createInsetRect(layout.plot, (line?.width ?? LineDefaultWidth) / 2),\n [layout.plot, line?.width],\n );\n\n const lineCoordinates = useMemo(\n () => fitLineCoordinatesToRect(coordinates, layout.plot, linePlot),\n [coordinates, layout.plot, linePlot],\n );\n\n const isGridStyle = grid !== undefined;\n\n return (\n <>\n {isGridStyle ? (\n <Grid\n options={grid}\n plot={layout.plot}\n theme={theme}\n xTicks={xTicks}\n xScale={xScale}\n yTicks={yTicks}\n yScale={yScale}\n />\n ) : null}\n\n {xAxis?.visible !== false ? (\n <XAxis\n ticks={xTicks}\n scale={xScale}\n plot={layout.plot}\n region={layout.xAxis}\n theme={theme}\n options={xAxis}\n fontManager={fontManager}\n lineVisible={!isGridStyle}\n tickVisible={!isGridStyle}\n />\n ) : null}\n\n {yAxis?.visible !== false ? (\n <YAxis\n ticks={yTicks}\n scale={yScale}\n plot={layout.plot}\n region={layout.yAxis}\n theme={theme}\n options={yAxis}\n fontManager={fontManager}\n lineVisible={!isGridStyle}\n tickVisible={!isGridStyle}\n />\n ) : null}\n\n <Group clip={layout.plot}>\n <Line coordinates={lineCoordinates} {...line} />\n </Group>\n </>\n );\n});\n"],"mappings":"AAwDI,mBAEI,KAFJ;AAxDJ,SAAS,eAAe;AACxB,SAAS,aAAa;AAEtB,SAAS,YAAY;AAGrB,SAAS,wBAAwB;
|
|
1
|
+
{"version":3,"sources":["../../../src/components/line-chart/line-chart-body.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { Group } from \"@shopify/react-native-skia\";\n\nimport { memo } from \"@impulse-ui-native/core\";\nimport { AppTheme } from \"@impulse-ui-native/theme\";\n\nimport { CartesianChartDefaultInsets, LineDefaultWidth } from \"../../constants\";\nimport { useChartLayout, useLineChart } from \"../../hooks\";\nimport { ChartSize, ChartXValue, LineChartProps } from \"../../types\";\nimport { createInsetRect, fitLineCoordinatesToRect } from \"../../utils\";\nimport { Grid, Line, XAxis, YAxis } from \"../primitives\";\n\ninterface LineChartBodyProps<X extends ChartXValue> extends LineChartProps<X> {\n size: ChartSize;\n theme: AppTheme;\n}\n\nexport const LineChartBody = memo(function LineChartBodyComponent<\n X extends ChartXValue = number,\n>(props: LineChartBodyProps<X>) {\n const {\n data,\n fontManager,\n grid,\n insets,\n line,\n size,\n theme,\n xAxis,\n xScaleType,\n yAxis,\n } = props;\n\n const layout = useChartLayout(size, insets, CartesianChartDefaultInsets);\n\n const { coordinates, xScale, xTicks, yScale, yTicks } = useLineChart({\n data,\n plot: layout.plot,\n xAxis,\n xScaleType,\n yAxis,\n });\n\n const linePlot = useMemo(\n () => createInsetRect(layout.plot, (line?.width ?? LineDefaultWidth) / 2),\n [layout.plot, line?.width],\n );\n\n const lineCoordinates = useMemo(\n () => fitLineCoordinatesToRect(coordinates, layout.plot, linePlot),\n [coordinates, layout.plot, linePlot],\n );\n\n const isGridStyle = grid !== undefined;\n\n return (\n <>\n {isGridStyle ? (\n <Grid\n options={grid}\n plot={layout.plot}\n theme={theme}\n xTicks={xTicks}\n xScale={xScale}\n yTicks={yTicks}\n yScale={yScale}\n />\n ) : null}\n\n {xAxis?.visible !== false ? (\n <XAxis\n ticks={xTicks}\n scale={xScale}\n plot={layout.plot}\n region={layout.xAxis}\n theme={theme}\n options={xAxis}\n fontManager={fontManager}\n lineVisible={!isGridStyle}\n tickVisible={!isGridStyle}\n />\n ) : null}\n\n {yAxis?.visible !== false ? (\n <YAxis\n ticks={yTicks}\n scale={yScale}\n plot={layout.plot}\n region={layout.yAxis}\n theme={theme}\n options={yAxis}\n fontManager={fontManager}\n lineVisible={!isGridStyle}\n tickVisible={!isGridStyle}\n />\n ) : null}\n\n <Group clip={layout.plot}>\n <Line coordinates={lineCoordinates} {...line} />\n </Group>\n </>\n );\n});\n"],"mappings":"AAwDI,mBAEI,KAFJ;AAxDJ,SAAS,eAAe;AACxB,SAAS,aAAa;AAEtB,SAAS,YAAY;AAGrB,SAAS,6BAA6B,wBAAwB;AAC9D,SAAS,gBAAgB,oBAAoB;AAE7C,SAAS,iBAAiB,gCAAgC;AAC1D,SAAS,MAAM,MAAM,OAAO,aAAa;AAOlC,MAAM,gBAAgB,KAAK,SAAS,uBAEzC,OAA8B;AAC9B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,SAAS,eAAe,MAAM,QAAQ,2BAA2B;AAEvE,QAAM,EAAE,aAAa,QAAQ,QAAQ,QAAQ,OAAO,IAAI,aAAa;AAAA,IACnE;AAAA,IACA,MAAM,OAAO;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,WAAW;AAAA,IACf,MAAM,gBAAgB,OAAO,OAAO,MAAM,SAAS,oBAAoB,CAAC;AAAA,IACxE,CAAC,OAAO,MAAM,MAAM,KAAK;AAAA,EAC3B;AAEA,QAAM,kBAAkB;AAAA,IACtB,MAAM,yBAAyB,aAAa,OAAO,MAAM,QAAQ;AAAA,IACjE,CAAC,aAAa,OAAO,MAAM,QAAQ;AAAA,EACrC;AAEA,QAAM,cAAc,SAAS;AAE7B,SACE,iCACG;AAAA,kBACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,MAAM,OAAO;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF,IACE;AAAA,IAEH,OAAO,YAAY,QAClB;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM,OAAO;AAAA,QACb,QAAQ,OAAO;AAAA,QACf;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA,aAAa,CAAC;AAAA,QACd,aAAa,CAAC;AAAA;AAAA,IAChB,IACE;AAAA,IAEH,OAAO,YAAY,QAClB;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM,OAAO;AAAA,QACb,QAAQ,OAAO;AAAA,QACf;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA,aAAa,CAAC;AAAA,QACd,aAAa,CAAC;AAAA;AAAA,IAChB,IACE;AAAA,IAEJ,oBAAC,SAAM,MAAM,OAAO,MAClB,8BAAC,QAAK,aAAa,iBAAkB,GAAG,MAAM,GAChD;AAAA,KACF;AAEJ,CAAC;","names":[]}
|
|
@@ -2,6 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { useMemo } from "react";
|
|
3
3
|
import { Group } from "@shopify/react-native-skia";
|
|
4
4
|
import { memo } from "@impulse-ui-native/core";
|
|
5
|
+
import { CartesianChartDefaultInsets } from "../../constants";
|
|
5
6
|
import { useChartLayout, useMultiBarChart } from "../../hooks";
|
|
6
7
|
import { createDrawableMultiBarChartSeries } from "../../utils";
|
|
7
8
|
import { ChartAxes } from "../chart-axes";
|
|
@@ -19,7 +20,7 @@ const MultiBarChartBody = memo(function MultiBarChartBodyComponent(props) {
|
|
|
19
20
|
xAxis,
|
|
20
21
|
yAxis
|
|
21
22
|
} = props;
|
|
22
|
-
const layout = useChartLayout(size, insets);
|
|
23
|
+
const layout = useChartLayout(size, insets, CartesianChartDefaultInsets);
|
|
23
24
|
const {
|
|
24
25
|
series: seriesModels,
|
|
25
26
|
xScale,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/multi-bar-chart/multi-bar-chart-body.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { Group } from \"@shopify/react-native-skia\";\n\nimport { memo } from \"@impulse-ui-native/core\";\nimport { AppTheme } from \"@impulse-ui-native/theme\";\n\nimport { useChartLayout, useMultiBarChart } from \"../../hooks\";\nimport { ChartSize, ChartXValue, MultiBarChartProps } from \"../../types\";\nimport { createDrawableMultiBarChartSeries } from \"../../utils\";\nimport { ChartAxes } from \"../chart-axes\";\nimport { Bar } from \"../primitives\";\n\ninterface MultiBarChartBodyProps<\n X extends ChartXValue,\n> extends MultiBarChartProps<X> {\n size: ChartSize;\n theme: AppTheme;\n}\n\nexport const MultiBarChartBody = memo(function MultiBarChartBodyComponent<\n X extends ChartXValue = string,\n>(props: MultiBarChartBodyProps<X>) {\n const {\n categoryPadding,\n fontManager,\n grid,\n insets,\n series,\n seriesPadding,\n size,\n theme,\n xAxis,\n yAxis,\n } = props;\n const layout = useChartLayout(size, insets);\n const {\n series: seriesModels,\n xScale,\n xTicks,\n yScale,\n yTicks,\n } = useMultiBarChart({\n categoryPadding,\n plot: layout.plot,\n series,\n seriesPadding,\n xAxis,\n yAxis,\n });\n const drawableSeries = useMemo(\n () =>\n seriesModels.map((currentSeries, index) =>\n createDrawableMultiBarChartSeries(currentSeries, index),\n ),\n [seriesModels],\n );\n\n return (\n <>\n <ChartAxes\n fontManager={fontManager}\n grid={grid}\n layout={layout}\n theme={theme}\n xAxis={xAxis}\n xScale={xScale}\n xTicks={xTicks}\n yAxis={yAxis}\n yScale={yScale}\n yTicks={yTicks}\n />\n\n <Group clip={layout.plot}>\n {drawableSeries.map((currentSeries) => (\n <Bar\n key={currentSeries.id}\n coordinates={currentSeries.coordinates}\n {...currentSeries.bar}\n />\n ))}\n </Group>\n </>\n );\n});\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/multi-bar-chart/multi-bar-chart-body.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { Group } from \"@shopify/react-native-skia\";\n\nimport { memo } from \"@impulse-ui-native/core\";\nimport { AppTheme } from \"@impulse-ui-native/theme\";\n\nimport { CartesianChartDefaultInsets } from \"../../constants\";\nimport { useChartLayout, useMultiBarChart } from \"../../hooks\";\nimport { ChartSize, ChartXValue, MultiBarChartProps } from \"../../types\";\nimport { createDrawableMultiBarChartSeries } from \"../../utils\";\nimport { ChartAxes } from \"../chart-axes\";\nimport { Bar } from \"../primitives\";\n\ninterface MultiBarChartBodyProps<\n X extends ChartXValue,\n> extends MultiBarChartProps<X> {\n size: ChartSize;\n theme: AppTheme;\n}\n\nexport const MultiBarChartBody = memo(function MultiBarChartBodyComponent<\n X extends ChartXValue = string,\n>(props: MultiBarChartBodyProps<X>) {\n const {\n categoryPadding,\n fontManager,\n grid,\n insets,\n series,\n seriesPadding,\n size,\n theme,\n xAxis,\n yAxis,\n } = props;\n const layout = useChartLayout(size, insets, CartesianChartDefaultInsets);\n const {\n series: seriesModels,\n xScale,\n xTicks,\n yScale,\n yTicks,\n } = useMultiBarChart({\n categoryPadding,\n plot: layout.plot,\n series,\n seriesPadding,\n xAxis,\n yAxis,\n });\n const drawableSeries = useMemo(\n () =>\n seriesModels.map((currentSeries, index) =>\n createDrawableMultiBarChartSeries(currentSeries, index),\n ),\n [seriesModels],\n );\n\n return (\n <>\n <ChartAxes\n fontManager={fontManager}\n grid={grid}\n layout={layout}\n theme={theme}\n xAxis={xAxis}\n xScale={xScale}\n xTicks={xTicks}\n yAxis={yAxis}\n yScale={yScale}\n yTicks={yTicks}\n />\n\n <Group clip={layout.plot}>\n {drawableSeries.map((currentSeries) => (\n <Bar\n key={currentSeries.id}\n coordinates={currentSeries.coordinates}\n {...currentSeries.bar}\n />\n ))}\n </Group>\n </>\n );\n});\n"],"mappings":"AA2DI,mBACE,KADF;AA3DJ,SAAS,eAAe;AACxB,SAAS,aAAa;AAEtB,SAAS,YAAY;AAGrB,SAAS,mCAAmC;AAC5C,SAAS,gBAAgB,wBAAwB;AAEjD,SAAS,yCAAyC;AAClD,SAAS,iBAAiB;AAC1B,SAAS,WAAW;AASb,MAAM,oBAAoB,KAAK,SAAS,2BAE7C,OAAkC;AAClC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,SAAS,eAAe,MAAM,QAAQ,2BAA2B;AACvE,QAAM;AAAA,IACJ,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,iBAAiB;AAAA,IACnB;AAAA,IACA,MAAM,OAAO;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,iBAAiB;AAAA,IACrB,MACE,aAAa;AAAA,MAAI,CAAC,eAAe,UAC/B,kCAAkC,eAAe,KAAK;AAAA,IACxD;AAAA,IACF,CAAC,YAAY;AAAA,EACf;AAEA,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,IAEA,oBAAC,SAAM,MAAM,OAAO,MACjB,yBAAe,IAAI,CAAC,kBACnB;AAAA,MAAC;AAAA;AAAA,QAEC,aAAa,cAAc;AAAA,QAC1B,GAAG,cAAc;AAAA;AAAA,MAFb,cAAc;AAAA,IAGrB,CACD,GACH;AAAA,KACF;AAEJ,CAAC;","names":[]}
|
|
@@ -2,6 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { useMemo } from "react";
|
|
3
3
|
import { Group } from "@shopify/react-native-skia";
|
|
4
4
|
import { memo } from "@impulse-ui-native/core";
|
|
5
|
+
import { CartesianChartDefaultInsets } from "../../constants";
|
|
5
6
|
import { useChartLayout, useMultiLineChart } from "../../hooks";
|
|
6
7
|
import { createDrawableMultiLineChartSeries } from "../../utils";
|
|
7
8
|
import { Grid, Line, XAxis, YAxis } from "../primitives";
|
|
@@ -17,7 +18,7 @@ const MultiLineChartBody = memo(function MultiLineChartBodyComponent(props) {
|
|
|
17
18
|
xScaleType,
|
|
18
19
|
yAxis
|
|
19
20
|
} = props;
|
|
20
|
-
const layout = useChartLayout(size, insets);
|
|
21
|
+
const layout = useChartLayout(size, insets, CartesianChartDefaultInsets);
|
|
21
22
|
const {
|
|
22
23
|
series: seriesModels,
|
|
23
24
|
xScale,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/multi-line-chart/multi-line-chart-body.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { Group } from \"@shopify/react-native-skia\";\n\nimport { memo } from \"@impulse-ui-native/core\";\n\nimport { useChartLayout, useMultiLineChart } from \"../../hooks\";\nimport { ChartXValue, MultiLineChartBodyProps } from \"../../types\";\nimport { createDrawableMultiLineChartSeries } from \"../../utils\";\nimport { Grid, Line, XAxis, YAxis } from \"../primitives\";\n\nexport const MultiLineChartBody = memo(function MultiLineChartBodyComponent<\n X extends ChartXValue = number,\n>(props: MultiLineChartBodyProps<X>) {\n const {\n fontManager,\n grid,\n insets,\n series,\n size,\n theme,\n xAxis,\n xScaleType,\n yAxis,\n } = props;\n\n const layout = useChartLayout(size, insets);\n\n const {\n series: seriesModels,\n xScale,\n xTicks,\n yScale,\n yTicks,\n } = useMultiLineChart({\n plot: layout.plot,\n series,\n xAxis,\n xScaleType,\n yAxis,\n });\n\n const drawableSeries = useMemo(\n () =>\n seriesModels.map((currentSeries, index) =>\n createDrawableMultiLineChartSeries(currentSeries, index, layout.plot),\n ),\n [layout.plot, seriesModels],\n );\n\n const isGridStyle = grid !== undefined;\n\n return (\n <>\n {isGridStyle ? (\n <Grid\n options={grid}\n plot={layout.plot}\n theme={theme}\n xTicks={xTicks}\n xScale={xScale}\n yTicks={yTicks}\n yScale={yScale}\n />\n ) : null}\n\n {xAxis?.visible !== false ? (\n <XAxis\n ticks={xTicks}\n scale={xScale}\n plot={layout.plot}\n region={layout.xAxis}\n theme={theme}\n options={xAxis}\n fontManager={fontManager}\n lineVisible={!isGridStyle}\n tickVisible={!isGridStyle}\n />\n ) : null}\n\n {yAxis?.visible !== false ? (\n <YAxis\n ticks={yTicks}\n scale={yScale}\n plot={layout.plot}\n region={layout.yAxis}\n theme={theme}\n options={yAxis}\n fontManager={fontManager}\n lineVisible={!isGridStyle}\n tickVisible={!isGridStyle}\n />\n ) : null}\n\n <Group clip={layout.plot}>\n {drawableSeries.map((currentSeries) => (\n <Line\n key={currentSeries.id}\n coordinates={currentSeries.coordinates}\n {...currentSeries.line}\n />\n ))}\n </Group>\n </>\n );\n});\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/multi-line-chart/multi-line-chart-body.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { Group } from \"@shopify/react-native-skia\";\n\nimport { memo } from \"@impulse-ui-native/core\";\n\nimport { CartesianChartDefaultInsets } from \"../../constants\";\nimport { useChartLayout, useMultiLineChart } from \"../../hooks\";\nimport { ChartXValue, MultiLineChartBodyProps } from \"../../types\";\nimport { createDrawableMultiLineChartSeries } from \"../../utils\";\nimport { Grid, Line, XAxis, YAxis } from \"../primitives\";\n\nexport const MultiLineChartBody = memo(function MultiLineChartBodyComponent<\n X extends ChartXValue = number,\n>(props: MultiLineChartBodyProps<X>) {\n const {\n fontManager,\n grid,\n insets,\n series,\n size,\n theme,\n xAxis,\n xScaleType,\n yAxis,\n } = props;\n\n const layout = useChartLayout(size, insets, CartesianChartDefaultInsets);\n\n const {\n series: seriesModels,\n xScale,\n xTicks,\n yScale,\n yTicks,\n } = useMultiLineChart({\n plot: layout.plot,\n series,\n xAxis,\n xScaleType,\n yAxis,\n });\n\n const drawableSeries = useMemo(\n () =>\n seriesModels.map((currentSeries, index) =>\n createDrawableMultiLineChartSeries(currentSeries, index, layout.plot),\n ),\n [layout.plot, seriesModels],\n );\n\n const isGridStyle = grid !== undefined;\n\n return (\n <>\n {isGridStyle ? (\n <Grid\n options={grid}\n plot={layout.plot}\n theme={theme}\n xTicks={xTicks}\n xScale={xScale}\n yTicks={yTicks}\n yScale={yScale}\n />\n ) : null}\n\n {xAxis?.visible !== false ? (\n <XAxis\n ticks={xTicks}\n scale={xScale}\n plot={layout.plot}\n region={layout.xAxis}\n theme={theme}\n options={xAxis}\n fontManager={fontManager}\n lineVisible={!isGridStyle}\n tickVisible={!isGridStyle}\n />\n ) : null}\n\n {yAxis?.visible !== false ? (\n <YAxis\n ticks={yTicks}\n scale={yScale}\n plot={layout.plot}\n region={layout.yAxis}\n theme={theme}\n options={yAxis}\n fontManager={fontManager}\n lineVisible={!isGridStyle}\n tickVisible={!isGridStyle}\n />\n ) : null}\n\n <Group clip={layout.plot}>\n {drawableSeries.map((currentSeries) => (\n <Line\n key={currentSeries.id}\n coordinates={currentSeries.coordinates}\n {...currentSeries.line}\n />\n ))}\n </Group>\n </>\n );\n});\n"],"mappings":"AAqDI,mBAEI,KAFJ;AArDJ,SAAS,eAAe;AACxB,SAAS,aAAa;AAEtB,SAAS,YAAY;AAErB,SAAS,mCAAmC;AAC5C,SAAS,gBAAgB,yBAAyB;AAElD,SAAS,0CAA0C;AACnD,SAAS,MAAM,MAAM,OAAO,aAAa;AAElC,MAAM,qBAAqB,KAAK,SAAS,4BAE9C,OAAmC;AACnC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,SAAS,eAAe,MAAM,QAAQ,2BAA2B;AAEvE,QAAM;AAAA,IACJ,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,kBAAkB;AAAA,IACpB,MAAM,OAAO;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,iBAAiB;AAAA,IACrB,MACE,aAAa;AAAA,MAAI,CAAC,eAAe,UAC/B,mCAAmC,eAAe,OAAO,OAAO,IAAI;AAAA,IACtE;AAAA,IACF,CAAC,OAAO,MAAM,YAAY;AAAA,EAC5B;AAEA,QAAM,cAAc,SAAS;AAE7B,SACE,iCACG;AAAA,kBACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,MAAM,OAAO;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF,IACE;AAAA,IAEH,OAAO,YAAY,QAClB;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM,OAAO;AAAA,QACb,QAAQ,OAAO;AAAA,QACf;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA,aAAa,CAAC;AAAA,QACd,aAAa,CAAC;AAAA;AAAA,IAChB,IACE;AAAA,IAEH,OAAO,YAAY,QAClB;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM,OAAO;AAAA,QACb,QAAQ,OAAO;AAAA,QACf;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA,aAAa,CAAC;AAAA,QACd,aAAa,CAAC;AAAA;AAAA,IAChB,IACE;AAAA,IAEJ,oBAAC,SAAM,MAAM,OAAO,MACjB,yBAAe,IAAI,CAAC,kBACnB;AAAA,MAAC;AAAA;AAAA,QAEC,aAAa,cAAc;AAAA,QAC1B,GAAG,cAAc;AAAA;AAAA,MAFb,cAAc;AAAA,IAGrB,CACD,GACH;AAAA,KACF;AAEJ,CAAC;","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/constants/chart-layout.constants.ts"],"sourcesContent":["import type { ChartInsets } from \"../types\";\n\nexport const CartesianChartDefaultInsets: ChartInsets = {\n top: 32,\n right: 32,\n bottom: 32,\n left: 32,\n};\n"],"mappings":"AAEO,MAAM,8BAA2C;AAAA,EACtD,KAAK;AAAA,EACL,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AACR;","names":[]}
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
export { AxisDefaultLabelGap, AxisDefaultOpacity, AxisDefaultTickLength, AxisDefaultWidth } from './axis.constants.mjs';
|
|
2
2
|
export { BarDefaultColor, BarDefaultColors, BarDefaultOpacity, BarDefaultRadius } from './bar.constants.mjs';
|
|
3
3
|
export { BarChartDefaultCategoryPadding, MultiBarChartDefaultSeriesPadding } from './bar-chart.constants.mjs';
|
|
4
|
+
export { CartesianChartDefaultInsets } from './chart-layout.constants.mjs';
|
|
4
5
|
export { GridDefaultOpacity, GridDefaultWidth, GridDefaultXVisible, GridDefaultYVisible } from './grid.constants.mjs';
|
|
5
6
|
export { LabelDefaultHorizontalAlignment, LabelDefaultVerticalAlignment, TabularNumsFeature } from './label.constants.mjs';
|
|
6
7
|
export { LineDefaultCap, LineDefaultColor, LineDefaultColors, LineDefaultCurve, LineDefaultJoin, LineDefaultOpacity, LineDefaultWidth } from './line.constants.mjs';
|
|
7
8
|
export { LineChartDefaultNumericDomain, LineChartDefaultTickCount } from './line-chart.constants.mjs';
|
|
8
9
|
export { MultiPieDefaultRingPadding, PieDefaultColor, PieDefaultColors, PieDefaultCornerRadius, PieDefaultEndAngle, PieDefaultInnerRadius, PieDefaultOpacity, PieDefaultOuterRadius, PieDefaultPadAngle, PieDefaultStartAngle, PieDefaultStrokeWidth } from './pie.constants.mjs';
|
|
9
10
|
import '@impulse-ui-native/theme';
|
|
10
|
-
import '@shopify/react-native-skia';
|
|
11
|
-
import '../types/label.types.mjs';
|
|
12
11
|
import '../types/common.types.mjs';
|
|
13
12
|
import '../types/style.types.mjs';
|
|
13
|
+
import '@shopify/react-native-skia';
|
|
14
|
+
import '../types/label.types.mjs';
|
|
14
15
|
import '../line-chart.types-yxru5uWc.mjs';
|
package/dist/constants/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/constants/index.ts"],"sourcesContent":["export * from \"./axis.constants\";\nexport * from \"./bar.constants\";\nexport * from \"./bar-chart.constants\";\nexport * from \"./grid.constants\";\nexport * from \"./label.constants\";\nexport * from \"./line.constants\";\nexport * from \"./line-chart.constants\";\nexport * from \"./pie.constants\";\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/constants/index.ts"],"sourcesContent":["export * from \"./axis.constants\";\nexport * from \"./bar.constants\";\nexport * from \"./bar-chart.constants\";\nexport * from \"./chart-layout.constants\";\nexport * from \"./grid.constants\";\nexport * from \"./label.constants\";\nexport * from \"./line.constants\";\nexport * from \"./line-chart.constants\";\nexport * from \"./pie.constants\";\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
|
|
@@ -2,6 +2,6 @@ import { ChartSize, ChartInsets, ChartLayout } from '../types/common.types.mjs';
|
|
|
2
2
|
import '../types/style.types.mjs';
|
|
3
3
|
import '@shopify/react-native-skia';
|
|
4
4
|
|
|
5
|
-
declare function useChartLayout(size: ChartSize, insets?: Partial<ChartInsets>): ChartLayout;
|
|
5
|
+
declare function useChartLayout(size: ChartSize, insets?: Partial<ChartInsets>, defaultInsets?: Partial<ChartInsets>): ChartLayout;
|
|
6
6
|
|
|
7
7
|
export { useChartLayout };
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import { useMemo } from "react";
|
|
2
2
|
import { createChartLayout } from "../utils/chart-layout.util";
|
|
3
|
-
function useChartLayout(size, insets) {
|
|
4
|
-
return useMemo(
|
|
3
|
+
function useChartLayout(size, insets, defaultInsets) {
|
|
4
|
+
return useMemo(
|
|
5
|
+
() => createChartLayout(size, insets, defaultInsets),
|
|
6
|
+
[defaultInsets, insets, size]
|
|
7
|
+
);
|
|
5
8
|
}
|
|
6
9
|
export {
|
|
7
10
|
useChartLayout
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/use-chart-layout.hook.ts"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { ChartInsets, ChartLayout, ChartSize } from \"../types\";\nimport { createChartLayout } from \"../utils/chart-layout.util\";\n\nexport function useChartLayout(\n size: ChartSize,\n insets?: Partial<ChartInsets>,\n): ChartLayout {\n return useMemo(() => createChartLayout(size, insets),
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/use-chart-layout.hook.ts"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { ChartInsets, ChartLayout, ChartSize } from \"../types\";\nimport { createChartLayout } from \"../utils/chart-layout.util\";\n\nexport function useChartLayout(\n size: ChartSize,\n insets?: Partial<ChartInsets>,\n defaultInsets?: Partial<ChartInsets>,\n): ChartLayout {\n return useMemo(\n () => createChartLayout(size, insets, defaultInsets),\n [defaultInsets, insets, size],\n );\n}\n"],"mappings":"AAAA,SAAS,eAAe;AAGxB,SAAS,yBAAyB;AAE3B,SAAS,eACd,MACA,QACA,eACa;AACb,SAAO;AAAA,IACL,MAAM,kBAAkB,MAAM,QAAQ,aAAa;AAAA,IACnD,CAAC,eAAe,QAAQ,IAAI;AAAA,EAC9B;AACF;","names":[]}
|
package/dist/index.d.mts
CHANGED
|
@@ -14,6 +14,7 @@ export { PieChart } from './components/pie-chart/pie-chart.mjs';
|
|
|
14
14
|
export { AxisDefaultLabelGap, AxisDefaultOpacity, AxisDefaultTickLength, AxisDefaultWidth } from './constants/axis.constants.mjs';
|
|
15
15
|
export { BarDefaultColor, BarDefaultColors, BarDefaultOpacity, BarDefaultRadius } from './constants/bar.constants.mjs';
|
|
16
16
|
export { BarChartDefaultCategoryPadding, MultiBarChartDefaultSeriesPadding } from './constants/bar-chart.constants.mjs';
|
|
17
|
+
export { CartesianChartDefaultInsets } from './constants/chart-layout.constants.mjs';
|
|
17
18
|
export { GridDefaultOpacity, GridDefaultWidth, GridDefaultXVisible, GridDefaultYVisible } from './constants/grid.constants.mjs';
|
|
18
19
|
export { LabelDefaultHorizontalAlignment, LabelDefaultVerticalAlignment, TabularNumsFeature } from './constants/label.constants.mjs';
|
|
19
20
|
export { LineDefaultCap, LineDefaultColor, LineDefaultColors, LineDefaultCurve, LineDefaultJoin, LineDefaultOpacity, LineDefaultWidth } from './constants/line.constants.mjs';
|
|
@@ -2,7 +2,7 @@ import { ChartSize, ChartInsets, ChartLayout, ChartRect } from '../types/common.
|
|
|
2
2
|
import '../types/style.types.mjs';
|
|
3
3
|
import '@shopify/react-native-skia';
|
|
4
4
|
|
|
5
|
-
declare function createChartLayout(size: ChartSize, insets?: Partial<ChartInsets>): ChartLayout;
|
|
5
|
+
declare function createChartLayout(size: ChartSize, insets?: Partial<ChartInsets>, defaultInsets?: Partial<ChartInsets>): ChartLayout;
|
|
6
6
|
declare function createInsetRect(rect: ChartRect, amount: number): ChartRect;
|
|
7
7
|
|
|
8
8
|
export { createChartLayout, createInsetRect };
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
function createChartLayout(size, insets = {}) {
|
|
1
|
+
function createChartLayout(size, insets = {}, defaultInsets = {}) {
|
|
2
2
|
const resolvedInsets = {
|
|
3
|
-
top: insets.top ?? 0,
|
|
4
|
-
right: insets.right ?? 0,
|
|
5
|
-
bottom: insets.bottom ?? 0,
|
|
6
|
-
left: insets.left ?? 0
|
|
3
|
+
top: insets.top ?? defaultInsets.top ?? 0,
|
|
4
|
+
right: insets.right ?? defaultInsets.right ?? 0,
|
|
5
|
+
bottom: insets.bottom ?? defaultInsets.bottom ?? 0,
|
|
6
|
+
left: insets.left ?? defaultInsets.left ?? 0
|
|
7
7
|
};
|
|
8
8
|
const plotWidth = Math.max(
|
|
9
9
|
0,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/chart-layout.util.ts"],"sourcesContent":["import { ChartInsets, ChartLayout, ChartRect, ChartSize } from \"../types\";\n\nexport function createChartLayout(\n size: ChartSize,\n insets: Partial<ChartInsets> = {},\n): ChartLayout {\n const resolvedInsets: ChartInsets = {\n top: insets.top ?? 0,\n right: insets.right ?? 0,\n bottom: insets.bottom ?? 0,\n left: insets.left ?? 0,\n };\n\n const plotWidth = Math.max(\n 0,\n size.width - resolvedInsets.left - resolvedInsets.right,\n );\n const plotHeight = Math.max(\n 0,\n size.height - resolvedInsets.top - resolvedInsets.bottom,\n );\n\n const plot = {\n x: resolvedInsets.left,\n y: resolvedInsets.top,\n width: plotWidth,\n height: plotHeight,\n };\n\n return {\n size,\n insets: resolvedInsets,\n plot,\n xAxis: {\n x: plot.x,\n y: plot.y + plot.height,\n width: plot.width,\n height: resolvedInsets.bottom,\n },\n yAxis: {\n x: 0,\n y: plot.y,\n width: resolvedInsets.left,\n height: plot.height,\n },\n };\n}\n\nexport function createInsetRect(rect: ChartRect, amount: number): ChartRect {\n const inset = Math.max(0, amount);\n const horizontalInset = Math.min(inset, rect.width / 2);\n const verticalInset = Math.min(inset, rect.height / 2);\n\n return {\n x: rect.x + horizontalInset,\n y: rect.y + verticalInset,\n width: Math.max(0, rect.width - horizontalInset * 2),\n height: Math.max(0, rect.height - verticalInset * 2),\n };\n}\n"],"mappings":"AAEO,SAAS,kBACd,MACA,SAA+B,CAAC,
|
|
1
|
+
{"version":3,"sources":["../../src/utils/chart-layout.util.ts"],"sourcesContent":["import { ChartInsets, ChartLayout, ChartRect, ChartSize } from \"../types\";\n\nexport function createChartLayout(\n size: ChartSize,\n insets: Partial<ChartInsets> = {},\n defaultInsets: Partial<ChartInsets> = {},\n): ChartLayout {\n const resolvedInsets: ChartInsets = {\n top: insets.top ?? defaultInsets.top ?? 0,\n right: insets.right ?? defaultInsets.right ?? 0,\n bottom: insets.bottom ?? defaultInsets.bottom ?? 0,\n left: insets.left ?? defaultInsets.left ?? 0,\n };\n\n const plotWidth = Math.max(\n 0,\n size.width - resolvedInsets.left - resolvedInsets.right,\n );\n const plotHeight = Math.max(\n 0,\n size.height - resolvedInsets.top - resolvedInsets.bottom,\n );\n\n const plot = {\n x: resolvedInsets.left,\n y: resolvedInsets.top,\n width: plotWidth,\n height: plotHeight,\n };\n\n return {\n size,\n insets: resolvedInsets,\n plot,\n xAxis: {\n x: plot.x,\n y: plot.y + plot.height,\n width: plot.width,\n height: resolvedInsets.bottom,\n },\n yAxis: {\n x: 0,\n y: plot.y,\n width: resolvedInsets.left,\n height: plot.height,\n },\n };\n}\n\nexport function createInsetRect(rect: ChartRect, amount: number): ChartRect {\n const inset = Math.max(0, amount);\n const horizontalInset = Math.min(inset, rect.width / 2);\n const verticalInset = Math.min(inset, rect.height / 2);\n\n return {\n x: rect.x + horizontalInset,\n y: rect.y + verticalInset,\n width: Math.max(0, rect.width - horizontalInset * 2),\n height: Math.max(0, rect.height - verticalInset * 2),\n };\n}\n"],"mappings":"AAEO,SAAS,kBACd,MACA,SAA+B,CAAC,GAChC,gBAAsC,CAAC,GAC1B;AACb,QAAM,iBAA8B;AAAA,IAClC,KAAK,OAAO,OAAO,cAAc,OAAO;AAAA,IACxC,OAAO,OAAO,SAAS,cAAc,SAAS;AAAA,IAC9C,QAAQ,OAAO,UAAU,cAAc,UAAU;AAAA,IACjD,MAAM,OAAO,QAAQ,cAAc,QAAQ;AAAA,EAC7C;AAEA,QAAM,YAAY,KAAK;AAAA,IACrB;AAAA,IACA,KAAK,QAAQ,eAAe,OAAO,eAAe;AAAA,EACpD;AACA,QAAM,aAAa,KAAK;AAAA,IACtB;AAAA,IACA,KAAK,SAAS,eAAe,MAAM,eAAe;AAAA,EACpD;AAEA,QAAM,OAAO;AAAA,IACX,GAAG,eAAe;AAAA,IAClB,GAAG,eAAe;AAAA,IAClB,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAEA,SAAO;AAAA,IACL;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA,OAAO;AAAA,MACL,GAAG,KAAK;AAAA,MACR,GAAG,KAAK,IAAI,KAAK;AAAA,MACjB,OAAO,KAAK;AAAA,MACZ,QAAQ,eAAe;AAAA,IACzB;AAAA,IACA,OAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG,KAAK;AAAA,MACR,OAAO,eAAe;AAAA,MACtB,QAAQ,KAAK;AAAA,IACf;AAAA,EACF;AACF;AAEO,SAAS,gBAAgB,MAAiB,QAA2B;AAC1E,QAAM,QAAQ,KAAK,IAAI,GAAG,MAAM;AAChC,QAAM,kBAAkB,KAAK,IAAI,OAAO,KAAK,QAAQ,CAAC;AACtD,QAAM,gBAAgB,KAAK,IAAI,OAAO,KAAK,SAAS,CAAC;AAErD,SAAO;AAAA,IACL,GAAG,KAAK,IAAI;AAAA,IACZ,GAAG,KAAK,IAAI;AAAA,IACZ,OAAO,KAAK,IAAI,GAAG,KAAK,QAAQ,kBAAkB,CAAC;AAAA,IACnD,QAAQ,KAAK,IAAI,GAAG,KAAK,SAAS,gBAAgB,CAAC;AAAA,EACrD;AACF;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@impulse-ui-native/charts",
|
|
3
|
-
"version": "2.3.
|
|
3
|
+
"version": "2.3.3",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"module": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.mts",
|
|
@@ -25,9 +25,9 @@
|
|
|
25
25
|
"d3-shape": "3.2.0",
|
|
26
26
|
"d3-time": "3.1.0",
|
|
27
27
|
"d3-time-format": "4.1.0",
|
|
28
|
-
"@impulse-ui-native/primitives": "2.1.
|
|
29
|
-
"@impulse-ui-native/core": "2.1.
|
|
30
|
-
"@impulse-ui-native/theme": "2.1.
|
|
28
|
+
"@impulse-ui-native/primitives": "2.1.6",
|
|
29
|
+
"@impulse-ui-native/core": "2.1.6",
|
|
30
|
+
"@impulse-ui-native/theme": "2.1.6"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
33
|
"@shopify/react-native-skia": "2.6.2",
|
|
@@ -43,9 +43,9 @@
|
|
|
43
43
|
"react": "19.2.3",
|
|
44
44
|
"react-native": "0.86.2",
|
|
45
45
|
"typescript": "~6.0.3",
|
|
46
|
+
"@impulse-ui-native/tsconfig": "1.0.0",
|
|
46
47
|
"@impulse-ui-native/prettier-config": "1.0.0",
|
|
47
|
-
"@impulse-ui-native/eslint-config": "1.0.0"
|
|
48
|
-
"@impulse-ui-native/tsconfig": "1.0.0"
|
|
48
|
+
"@impulse-ui-native/eslint-config": "1.0.0"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|
|
51
51
|
"@shopify/react-native-skia": ">=2",
|