@coinbase/cds-web-visualization 3.4.0-beta.2 → 3.4.0-beta.20
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/CHANGELOG.md +115 -0
- package/dts/chart/CartesianChart.d.ts +56 -3
- package/dts/chart/CartesianChart.d.ts.map +1 -1
- package/dts/chart/ChartProvider.d.ts +3 -0
- package/dts/chart/ChartProvider.d.ts.map +1 -1
- package/dts/chart/Path.d.ts +64 -7
- package/dts/chart/Path.d.ts.map +1 -1
- package/dts/chart/PeriodSelector.d.ts +5 -15
- package/dts/chart/PeriodSelector.d.ts.map +1 -1
- package/dts/chart/area/Area.d.ts +50 -25
- package/dts/chart/area/Area.d.ts.map +1 -1
- package/dts/chart/area/AreaChart.d.ts +46 -6
- package/dts/chart/area/AreaChart.d.ts.map +1 -1
- package/dts/chart/area/DottedArea.d.ts +21 -44
- package/dts/chart/area/DottedArea.d.ts.map +1 -1
- package/dts/chart/area/GradientArea.d.ts +21 -12
- package/dts/chart/area/GradientArea.d.ts.map +1 -1
- package/dts/chart/area/SolidArea.d.ts +16 -1
- package/dts/chart/area/SolidArea.d.ts.map +1 -1
- package/dts/chart/axis/Axis.d.ts +109 -63
- package/dts/chart/axis/Axis.d.ts.map +1 -1
- package/dts/chart/axis/DefaultAxisTickLabel.d.ts +8 -0
- package/dts/chart/axis/DefaultAxisTickLabel.d.ts.map +1 -0
- package/dts/chart/axis/XAxis.d.ts +1 -1
- package/dts/chart/axis/XAxis.d.ts.map +1 -1
- package/dts/chart/axis/YAxis.d.ts +2 -2
- package/dts/chart/axis/YAxis.d.ts.map +1 -1
- package/dts/chart/axis/index.d.ts +1 -0
- package/dts/chart/axis/index.d.ts.map +1 -1
- package/dts/chart/bar/Bar.d.ts +50 -12
- package/dts/chart/bar/Bar.d.ts.map +1 -1
- package/dts/chart/bar/BarChart.d.ts +20 -8
- package/dts/chart/bar/BarChart.d.ts.map +1 -1
- package/dts/chart/bar/BarPlot.d.ts +3 -1
- package/dts/chart/bar/BarPlot.d.ts.map +1 -1
- package/dts/chart/bar/BarStack.d.ts +41 -46
- package/dts/chart/bar/BarStack.d.ts.map +1 -1
- package/dts/chart/bar/BarStackGroup.d.ts +2 -0
- package/dts/chart/bar/BarStackGroup.d.ts.map +1 -1
- package/dts/chart/bar/DefaultBar.d.ts.map +1 -1
- package/dts/chart/bar/DefaultBarStack.d.ts.map +1 -1
- package/dts/chart/gradient/Gradient.d.ts +35 -0
- package/dts/chart/gradient/Gradient.d.ts.map +1 -0
- package/dts/chart/gradient/index.d.ts +2 -0
- package/dts/chart/gradient/index.d.ts.map +1 -0
- package/dts/chart/index.d.ts +3 -1
- package/dts/chart/index.d.ts.map +1 -1
- package/dts/chart/legend/DefaultLegendEntry.d.ts +21 -0
- package/dts/chart/legend/DefaultLegendEntry.d.ts.map +1 -0
- package/dts/chart/legend/DefaultLegendShape.d.ts +7 -0
- package/dts/chart/legend/DefaultLegendShape.d.ts.map +1 -0
- package/dts/chart/legend/Legend.d.ts +169 -0
- package/dts/chart/legend/Legend.d.ts.map +1 -0
- package/dts/chart/legend/index.d.ts +4 -0
- package/dts/chart/legend/index.d.ts.map +1 -0
- package/dts/chart/line/DefaultReferenceLineLabel.d.ts +9 -0
- package/dts/chart/line/DefaultReferenceLineLabel.d.ts.map +1 -0
- package/dts/chart/line/DottedLine.d.ts +15 -3
- package/dts/chart/line/DottedLine.d.ts.map +1 -1
- package/dts/chart/line/Line.d.ts +84 -28
- package/dts/chart/line/Line.d.ts.map +1 -1
- package/dts/chart/line/LineChart.d.ts +28 -8
- package/dts/chart/line/LineChart.d.ts.map +1 -1
- package/dts/chart/line/ReferenceLine.d.ts +91 -44
- package/dts/chart/line/ReferenceLine.d.ts.map +1 -1
- package/dts/chart/line/SolidLine.d.ts +14 -3
- package/dts/chart/line/SolidLine.d.ts.map +1 -1
- package/dts/chart/line/index.d.ts +1 -1
- package/dts/chart/line/index.d.ts.map +1 -1
- package/dts/chart/point/DefaultPointLabel.d.ts +10 -0
- package/dts/chart/point/DefaultPointLabel.d.ts.map +1 -0
- package/dts/chart/point/Point.d.ts +217 -0
- package/dts/chart/point/Point.d.ts.map +1 -0
- package/dts/chart/point/index.d.ts +3 -0
- package/dts/chart/point/index.d.ts.map +1 -0
- package/dts/chart/scrubber/DefaultScrubberBeacon.d.ts +41 -0
- package/dts/chart/scrubber/DefaultScrubberBeacon.d.ts.map +1 -0
- package/dts/chart/scrubber/DefaultScrubberBeaconLabel.d.ts +12 -0
- package/dts/chart/scrubber/DefaultScrubberBeaconLabel.d.ts.map +1 -0
- package/dts/chart/scrubber/DefaultScrubberLabel.d.ts +10 -0
- package/dts/chart/scrubber/DefaultScrubberLabel.d.ts.map +1 -0
- package/dts/chart/scrubber/Scrubber.d.ts +287 -70
- package/dts/chart/scrubber/Scrubber.d.ts.map +1 -1
- package/dts/chart/scrubber/ScrubberBeaconGroup.d.ts +80 -0
- package/dts/chart/scrubber/ScrubberBeaconGroup.d.ts.map +1 -0
- package/dts/chart/scrubber/ScrubberBeaconLabelGroup.d.ts +47 -0
- package/dts/chart/scrubber/ScrubberBeaconLabelGroup.d.ts.map +1 -0
- package/dts/chart/scrubber/index.d.ts +3 -0
- package/dts/chart/scrubber/index.d.ts.map +1 -1
- package/dts/chart/text/ChartText.d.ts +46 -43
- package/dts/chart/text/ChartText.d.ts.map +1 -1
- package/dts/chart/text/{SmartChartTextGroup.d.ts → ChartTextGroup.d.ts} +9 -3
- package/dts/chart/text/ChartTextGroup.d.ts.map +1 -0
- package/dts/chart/text/index.d.ts +1 -1
- package/dts/chart/text/index.d.ts.map +1 -1
- package/dts/chart/utils/axis.d.ts +25 -1
- package/dts/chart/utils/axis.d.ts.map +1 -1
- package/dts/chart/utils/bar.d.ts +34 -0
- package/dts/chart/utils/bar.d.ts.map +1 -1
- package/dts/chart/utils/chart.d.ts +45 -7
- package/dts/chart/utils/chart.d.ts.map +1 -1
- package/dts/chart/utils/context.d.ts +6 -0
- package/dts/chart/utils/context.d.ts.map +1 -1
- package/dts/chart/utils/gradient.d.ts +104 -0
- package/dts/chart/utils/gradient.d.ts.map +1 -0
- package/dts/chart/utils/index.d.ts +4 -0
- package/dts/chart/utils/index.d.ts.map +1 -1
- package/dts/chart/utils/interpolate.d.ts +112 -0
- package/dts/chart/utils/interpolate.d.ts.map +1 -0
- package/dts/chart/utils/path.d.ts +30 -1
- package/dts/chart/utils/path.d.ts.map +1 -1
- package/dts/chart/utils/point.d.ts +40 -7
- package/dts/chart/utils/point.d.ts.map +1 -1
- package/dts/chart/utils/scale.d.ts +11 -0
- package/dts/chart/utils/scale.d.ts.map +1 -1
- package/dts/chart/utils/scrubber.d.ts +40 -0
- package/dts/chart/utils/scrubber.d.ts.map +1 -0
- package/dts/chart/utils/transition.d.ts +101 -0
- package/dts/chart/utils/transition.d.ts.map +1 -0
- package/dts/sparkline/sparkline-interactive/SparklineInteractiveMarkerDates.d.ts.map +1 -1
- package/esm/chart/CartesianChart.js +170 -83
- package/esm/chart/ChartProvider.js +2 -2
- package/esm/chart/Path.js +59 -54
- package/esm/chart/PeriodSelector.js +36 -32
- package/esm/chart/area/Area.js +26 -34
- package/esm/chart/area/AreaChart.js +29 -15
- package/esm/chart/area/DottedArea.js +39 -89
- package/esm/chart/area/GradientArea.js +37 -80
- package/esm/chart/area/SolidArea.js +32 -11
- package/esm/chart/axis/Axis.js +4 -39
- package/esm/chart/axis/DefaultAxisTickLabel.js +15 -0
- package/esm/chart/axis/XAxis.js +184 -63
- package/esm/chart/axis/YAxis.js +190 -57
- package/esm/chart/axis/index.js +1 -0
- package/esm/chart/bar/Bar.js +7 -1
- package/esm/chart/bar/BarChart.js +17 -32
- package/esm/chart/bar/BarPlot.js +5 -2
- package/esm/chart/bar/BarStack.js +74 -22
- package/esm/chart/bar/BarStackGroup.js +8 -18
- package/esm/chart/bar/DefaultBar.js +23 -28
- package/esm/chart/bar/DefaultBarStack.js +24 -20
- package/esm/chart/gradient/Gradient.js +104 -0
- package/esm/chart/gradient/index.js +1 -0
- package/esm/chart/index.js +3 -1
- package/esm/chart/legend/DefaultLegendEntry.css +1 -0
- package/esm/chart/legend/DefaultLegendEntry.js +50 -0
- package/esm/chart/legend/DefaultLegendShape.css +5 -0
- package/esm/chart/legend/DefaultLegendShape.js +47 -0
- package/esm/chart/legend/Legend.js +76 -0
- package/esm/chart/legend/index.js +3 -0
- package/esm/chart/line/DefaultReferenceLineLabel.js +81 -0
- package/esm/chart/line/DottedLine.js +41 -17
- package/esm/chart/line/Line.js +87 -75
- package/esm/chart/line/LineChart.js +24 -8
- package/esm/chart/line/ReferenceLine.js +41 -43
- package/esm/chart/line/SolidLine.js +39 -15
- package/esm/chart/line/index.js +1 -1
- package/esm/chart/{line/GradientLine.js → point/DefaultPointLabel.js} +31 -45
- package/esm/chart/point/Point.css +2 -0
- package/esm/chart/{Point.js → point/Point.js} +87 -62
- package/esm/chart/point/index.js +2 -0
- package/esm/chart/scrubber/DefaultScrubberBeacon.js +154 -0
- package/esm/chart/scrubber/DefaultScrubberBeaconLabel.js +57 -0
- package/esm/chart/scrubber/{ScrubberBeaconLabel.js → DefaultScrubberLabel.js} +15 -18
- package/esm/chart/scrubber/Scrubber.js +97 -392
- package/esm/chart/scrubber/ScrubberBeaconGroup.js +174 -0
- package/esm/chart/scrubber/ScrubberBeaconLabelGroup.js +201 -0
- package/esm/chart/scrubber/index.js +3 -1
- package/esm/chart/text/ChartText.js +15 -20
- package/esm/chart/text/{SmartChartTextGroup.js → ChartTextGroup.js} +4 -3
- package/esm/chart/text/index.js +1 -1
- package/esm/chart/utils/axis.js +47 -31
- package/esm/chart/utils/bar.js +48 -0
- package/esm/chart/utils/chart.js +42 -3
- package/esm/chart/utils/gradient.js +257 -0
- package/esm/chart/utils/index.js +4 -0
- package/esm/chart/utils/interpolate.js +644 -0
- package/esm/chart/utils/path.js +41 -9
- package/esm/chart/utils/point.js +99 -12
- package/esm/chart/utils/scale.js +13 -2
- package/esm/chart/utils/scrubber.js +137 -0
- package/esm/chart/utils/transition.js +133 -0
- package/esm/sparkline/__figma__/Sparkline.figma.js +1 -1
- package/esm/sparkline/sparkline-interactive/SparklineInteractiveMarkerDates.js +8 -4
- package/esm/sparkline/sparkline-interactive/__figma__/SparklineInteractive.figma.js +1 -1
- package/esm/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.js +1 -1
- package/package.json +12 -11
- package/dts/chart/Point.d.ts +0 -153
- package/dts/chart/Point.d.ts.map +0 -1
- package/dts/chart/line/GradientLine.d.ts +0 -42
- package/dts/chart/line/GradientLine.d.ts.map +0 -1
- package/dts/chart/scrubber/ScrubberBeacon.d.ts +0 -93
- package/dts/chart/scrubber/ScrubberBeacon.d.ts.map +0 -1
- package/dts/chart/scrubber/ScrubberBeaconLabel.d.ts +0 -7
- package/dts/chart/scrubber/ScrubberBeaconLabel.d.ts.map +0 -1
- package/dts/chart/text/SmartChartTextGroup.d.ts.map +0 -1
- package/esm/chart/Point.css +0 -2
- package/esm/chart/scrubber/ScrubberBeacon.js +0 -195
|
@@ -1,30 +1,39 @@
|
|
|
1
1
|
import { type PathProps } from '../Path';
|
|
2
2
|
import type { AreaComponentProps } from './Area';
|
|
3
|
-
export type GradientAreaProps =
|
|
3
|
+
export type GradientAreaProps = Pick<
|
|
4
|
+
PathProps,
|
|
5
|
+
| 'stroke'
|
|
6
|
+
| 'strokeWidth'
|
|
7
|
+
| 'strokeOpacity'
|
|
8
|
+
| 'strokeLinecap'
|
|
9
|
+
| 'strokeLinejoin'
|
|
10
|
+
| 'strokeDasharray'
|
|
11
|
+
| 'strokeDashoffset'
|
|
12
|
+
| 'clipRect'
|
|
13
|
+
| 'clipOffset'
|
|
14
|
+
| 'children'
|
|
15
|
+
> &
|
|
4
16
|
AreaComponentProps & {
|
|
5
|
-
/**
|
|
6
|
-
* The color at peak values (top/bottom of gradient).
|
|
7
|
-
* @default fill or 'var(--color-fgPrimary)'
|
|
8
|
-
*/
|
|
9
|
-
peakColor?: string;
|
|
10
|
-
/**
|
|
11
|
-
* The color at the baseline (0 or edge closest to 0).
|
|
12
|
-
* @default peakColor or fill
|
|
13
|
-
*/
|
|
14
|
-
baselineColor?: string;
|
|
15
17
|
/**
|
|
16
18
|
* Opacity at peak values.
|
|
19
|
+
* @note only used when no gradient is provided
|
|
17
20
|
* @default 0.3
|
|
18
21
|
*/
|
|
19
22
|
peakOpacity?: number;
|
|
20
23
|
/**
|
|
21
24
|
* Opacity at the baseline.
|
|
25
|
+
* @note only used when no gradient is provided
|
|
22
26
|
* @default 0
|
|
23
27
|
*/
|
|
24
28
|
baselineOpacity?: number;
|
|
25
29
|
};
|
|
26
30
|
/**
|
|
27
|
-
* A customizable gradient area component which uses Path.
|
|
31
|
+
* A customizable gradient area component which uses Path with SVG linearGradient.
|
|
32
|
+
*
|
|
33
|
+
* When no gradient is provided, automatically creates an appropriate gradient:
|
|
34
|
+
* - For data crossing zero: Creates a diverging gradient with peak opacity at both extremes
|
|
35
|
+
* and baseline opacity at zero (or the specified baseline).
|
|
36
|
+
* - For all-positive or all-negative data: Creates a simple gradient from baseline to peak.
|
|
28
37
|
*/
|
|
29
38
|
export declare const GradientArea: import('react').NamedExoticComponent<GradientAreaProps>;
|
|
30
39
|
//# sourceMappingURL=GradientArea.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GradientArea.d.ts","sourceRoot":"","sources":["../../../src/chart/area/GradientArea.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"GradientArea.d.ts","sourceRoot":"","sources":["../../../src/chart/area/GradientArea.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAG/C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,SAAS,EACP,QAAQ,GACR,aAAa,GACb,eAAe,GACf,eAAe,GACf,gBAAgB,GAChB,iBAAiB,GACjB,kBAAkB,GAClB,UAAU,GACV,YAAY,GACZ,UAAU,CACb,GACC,kBAAkB,GAAG;IACnB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEJ;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,yDAqDxB,CAAC"}
|
|
@@ -1,8 +1,23 @@
|
|
|
1
1
|
import { type PathProps } from '../Path';
|
|
2
2
|
import type { AreaComponentProps } from './Area';
|
|
3
|
-
export type SolidAreaProps =
|
|
3
|
+
export type SolidAreaProps = Pick<
|
|
4
|
+
PathProps,
|
|
5
|
+
| 'stroke'
|
|
6
|
+
| 'strokeWidth'
|
|
7
|
+
| 'strokeOpacity'
|
|
8
|
+
| 'strokeLinecap'
|
|
9
|
+
| 'strokeLinejoin'
|
|
10
|
+
| 'strokeDasharray'
|
|
11
|
+
| 'strokeDashoffset'
|
|
12
|
+
| 'clipRect'
|
|
13
|
+
| 'clipOffset'
|
|
14
|
+
| 'children'
|
|
15
|
+
> &
|
|
16
|
+
AreaComponentProps;
|
|
4
17
|
/**
|
|
5
18
|
* A customizable solid area component which uses Path.
|
|
19
|
+
* When a gradient is provided, renders with gradient fill.
|
|
20
|
+
* Otherwise, renders with solid fill.
|
|
6
21
|
*/
|
|
7
22
|
export declare const SolidArea: import('react').NamedExoticComponent<SolidAreaProps>;
|
|
8
23
|
//# sourceMappingURL=SolidArea.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SolidArea.d.ts","sourceRoot":"","sources":["../../../src/chart/area/SolidArea.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SolidArea.d.ts","sourceRoot":"","sources":["../../../src/chart/area/SolidArea.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAE/C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAEjD,MAAM,MAAM,cAAc,GAAG,IAAI,CAC/B,SAAS,EACP,QAAQ,GACR,aAAa,GACb,eAAe,GACf,eAAe,GACf,gBAAgB,GAChB,iBAAiB,GACjB,kBAAkB,GAClB,UAAU,GACV,YAAY,GACZ,UAAU,CACb,GACC,kBAAkB,CAAC;AAErB;;;;GAIG;AACH,eAAO,MAAM,SAAS,sDAuCrB,CAAC"}
|
package/dts/chart/axis/Axis.d.ts
CHANGED
|
@@ -1,58 +1,68 @@
|
|
|
1
1
|
import type React from 'react';
|
|
2
|
+
import type { SharedProps } from '@coinbase/cds-common/types';
|
|
3
|
+
import type { Transition } from 'framer-motion';
|
|
2
4
|
import { type LineComponent } from '../line';
|
|
3
|
-
import type { ChartTextChildren } from '../text/ChartText';
|
|
5
|
+
import type { ChartTextChildren, ChartTextProps } from '../text/ChartText';
|
|
6
|
+
import { type AxisBandPlacement } from '../utils';
|
|
4
7
|
export declare const axisLineStyles =
|
|
5
8
|
'\n stroke: var(--color-fg);\n stroke-linecap: square;\n stroke-width: 1px;\n';
|
|
6
9
|
export declare const axisTickMarkStyles =
|
|
7
10
|
'\n stroke: var(--color-fg);\n stroke-linecap: square;\n stroke-width: 1px;\n';
|
|
8
|
-
/**
|
|
9
|
-
* Animation variants for grouped axis tick labels - initial mount
|
|
10
|
-
*/
|
|
11
|
-
export declare const axisTickLabelsInitialAnimationVariants: {
|
|
12
|
-
initial: {
|
|
13
|
-
opacity: number;
|
|
14
|
-
};
|
|
15
|
-
animate: {
|
|
16
|
-
opacity: number;
|
|
17
|
-
transition: {
|
|
18
|
-
duration: number;
|
|
19
|
-
delay: number;
|
|
20
|
-
};
|
|
21
|
-
};
|
|
22
|
-
exit: {
|
|
23
|
-
opacity: number;
|
|
24
|
-
transition: {
|
|
25
|
-
duration: number;
|
|
26
|
-
};
|
|
27
|
-
};
|
|
28
|
-
};
|
|
29
11
|
/**
|
|
30
12
|
* Animation variants for axis elements - updates (used for both grid lines and tick labels)
|
|
31
13
|
*/
|
|
32
|
-
export declare const
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
14
|
+
export declare const axisUpdateAnimationTransition: Transition;
|
|
15
|
+
export type AxisTickLabelComponentProps = Pick<
|
|
16
|
+
ChartTextProps,
|
|
17
|
+
| 'x'
|
|
18
|
+
| 'y'
|
|
19
|
+
| 'children'
|
|
20
|
+
| 'testID'
|
|
21
|
+
| 'dx'
|
|
22
|
+
| 'dy'
|
|
23
|
+
| 'font'
|
|
24
|
+
| 'fontFamily'
|
|
25
|
+
| 'fontSize'
|
|
26
|
+
| 'fontWeight'
|
|
27
|
+
| 'color'
|
|
28
|
+
| 'elevated'
|
|
29
|
+
| 'inset'
|
|
30
|
+
| 'background'
|
|
31
|
+
| 'borderRadius'
|
|
32
|
+
| 'disableRepositioning'
|
|
33
|
+
| 'bounds'
|
|
34
|
+
| 'styles'
|
|
35
|
+
| 'classNames'
|
|
36
|
+
| 'horizontalAlignment'
|
|
37
|
+
| 'verticalAlignment'
|
|
38
|
+
| 'className'
|
|
39
|
+
| 'style'
|
|
40
|
+
>;
|
|
41
|
+
export type AxisTickLabelComponent = React.FC<AxisTickLabelComponentProps>;
|
|
42
|
+
export type AxisBaseProps = SharedProps & {
|
|
43
|
+
/**
|
|
44
|
+
* Placement of grid lines relative to each band.
|
|
45
|
+
* Options: 'start', 'middle', 'end', 'edges'
|
|
46
|
+
* @note This property only applies to band scales.
|
|
47
|
+
* @default 'edges'
|
|
48
|
+
*/
|
|
49
|
+
bandGridLinePlacement?: AxisBandPlacement;
|
|
50
|
+
/**
|
|
51
|
+
* Placement of tick marks relative to each band.
|
|
52
|
+
* Options: 'start', 'middle', 'end', 'edges'
|
|
53
|
+
* @note This property only applies to band scales.
|
|
54
|
+
* @default 'middle'
|
|
55
|
+
*/
|
|
56
|
+
bandTickMarkPlacement?: AxisBandPlacement;
|
|
57
|
+
/**
|
|
58
|
+
* Label text to display for the axis.
|
|
59
|
+
*/
|
|
60
|
+
label?: string;
|
|
61
|
+
/**
|
|
62
|
+
* Gap between the tick labels and the axis label.
|
|
63
|
+
* @default 4
|
|
54
64
|
*/
|
|
55
|
-
|
|
65
|
+
labelGap?: number;
|
|
56
66
|
/**
|
|
57
67
|
* Minimum gap between tick labels.
|
|
58
68
|
* Labels will be hidden if they are closer than this gap.
|
|
@@ -102,24 +112,6 @@ export type AxisBaseProps = {
|
|
|
102
112
|
* ticks: (index) => index % 12 === 0
|
|
103
113
|
*/
|
|
104
114
|
ticks?: number[] | ((value: number) => boolean);
|
|
105
|
-
/**
|
|
106
|
-
* Formatter function for axis tick values.
|
|
107
|
-
* Tick values will be wrapped in ChartText component.
|
|
108
|
-
*
|
|
109
|
-
* @example
|
|
110
|
-
* // Simple string formatting
|
|
111
|
-
* tickLabelFormatter: (value) => `$${prices[value]}`
|
|
112
|
-
*
|
|
113
|
-
* @example
|
|
114
|
-
* // ReactNode with conditional styling
|
|
115
|
-
* tickLabelFormatter: (index) => {
|
|
116
|
-
* if (index % 12 === 0) {
|
|
117
|
-
* return <tspan style={{ fontWeight: 'bold' }}>${prices[index]}</tspan>;
|
|
118
|
-
* }
|
|
119
|
-
* return `$${prices[index]}`;
|
|
120
|
-
* }
|
|
121
|
-
*/
|
|
122
|
-
tickLabelFormatter?: (value: any) => ChartTextChildren;
|
|
123
115
|
/**
|
|
124
116
|
* Space between the axis tick mark and labels.
|
|
125
117
|
* If tick marks are not shown, this is the gap between the axis and the chart.
|
|
@@ -158,6 +150,10 @@ export type AxisProps = AxisBaseProps & {
|
|
|
158
150
|
* Custom className for the root element.
|
|
159
151
|
*/
|
|
160
152
|
root?: string;
|
|
153
|
+
/**
|
|
154
|
+
* Custom className for the axis label.
|
|
155
|
+
*/
|
|
156
|
+
label?: string;
|
|
161
157
|
/**
|
|
162
158
|
* Custom className for the tick labels.
|
|
163
159
|
*/
|
|
@@ -187,6 +183,10 @@ export type AxisProps = AxisBaseProps & {
|
|
|
187
183
|
* Custom style for the root element.
|
|
188
184
|
*/
|
|
189
185
|
root?: React.CSSProperties;
|
|
186
|
+
/**
|
|
187
|
+
* Custom style for the axis label.
|
|
188
|
+
*/
|
|
189
|
+
label?: React.CSSProperties;
|
|
190
190
|
/**
|
|
191
191
|
* Custom style for the tick labels.
|
|
192
192
|
*/
|
|
@@ -204,5 +204,51 @@ export type AxisProps = AxisBaseProps & {
|
|
|
204
204
|
*/
|
|
205
205
|
tickMark?: React.CSSProperties;
|
|
206
206
|
};
|
|
207
|
+
/**
|
|
208
|
+
* Component to render the grid lines.
|
|
209
|
+
* @default DottedLine
|
|
210
|
+
*/
|
|
211
|
+
GridLineComponent?: LineComponent;
|
|
212
|
+
/**
|
|
213
|
+
* Component to render the axis line.
|
|
214
|
+
* @default SolidLine
|
|
215
|
+
*/
|
|
216
|
+
LineComponent?: LineComponent;
|
|
217
|
+
/**
|
|
218
|
+
* Component to render the tick marks.
|
|
219
|
+
* @default SolidLine
|
|
220
|
+
*/
|
|
221
|
+
TickMarkLineComponent?: LineComponent;
|
|
222
|
+
/**
|
|
223
|
+
* Formatter function for axis tick values.
|
|
224
|
+
* Tick values will be wrapped in ChartText component.
|
|
225
|
+
*
|
|
226
|
+
* @example
|
|
227
|
+
* // XAxis
|
|
228
|
+
* tickLabelFormatter: (index) => {
|
|
229
|
+
* if (index % 12 === 0) {
|
|
230
|
+
* return <tspan style={{ fontWeight: 'bold' }}>${prices[index]}</tspan>;
|
|
231
|
+
* }
|
|
232
|
+
* return `$${prices[index]}`;
|
|
233
|
+
* }
|
|
234
|
+
*
|
|
235
|
+
* @example
|
|
236
|
+
* // YAxis
|
|
237
|
+
* tickLabelFormatter: (value) => `$${prices[value]}`
|
|
238
|
+
*/
|
|
239
|
+
tickLabelFormatter?: (value: number) => ChartTextChildren;
|
|
240
|
+
/**
|
|
241
|
+
* Component to render tick labels.
|
|
242
|
+
* Allows for custom styling and formatting that works cross-platform.
|
|
243
|
+
*
|
|
244
|
+
* @example
|
|
245
|
+
* // Custom tick label component with elevation
|
|
246
|
+
* TickLabelComponent={(props) => (
|
|
247
|
+
* <DefaultAxisTickLabel {...props} elevated color="var(--color-fgPrimary)" />
|
|
248
|
+
* )}
|
|
249
|
+
*
|
|
250
|
+
* @default DefaultAxisTickLabel
|
|
251
|
+
*/
|
|
252
|
+
TickLabelComponent?: AxisTickLabelComponent;
|
|
207
253
|
};
|
|
208
254
|
//# sourceMappingURL=Axis.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Axis.d.ts","sourceRoot":"","sources":["../../../src/chart/axis/Axis.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Axis.d.ts","sourceRoot":"","sources":["../../../src/chart/axis/Axis.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAC3E,OAAO,EAAmC,KAAK,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAEnF,eAAO,MAAM,cAAc,oFAI1B,CAAC;AAEF,eAAO,MAAM,kBAAkB,oFAI9B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,6BAA6B,EAAE,UAG3C,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG,IAAI,CAC5C,cAAc,EACZ,GAAG,GACH,GAAG,GACH,UAAU,GACV,QAAQ,GACR,IAAI,GACJ,IAAI,GACJ,MAAM,GACN,YAAY,GACZ,UAAU,GACV,YAAY,GACZ,OAAO,GACP,UAAU,GACV,OAAO,GACP,YAAY,GACZ,cAAc,GACd,sBAAsB,GACtB,QAAQ,GACR,QAAQ,GACR,YAAY,GACZ,qBAAqB,GACrB,mBAAmB,GACnB,WAAW,GACX,OAAO,CACV,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAAC,CAAC;AAE3E,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG;IACxC;;;;;OAKG;IACH,qBAAqB,CAAC,EAAE,iBAAiB,CAAC;IAC1C;;;;;OAKG;IACH,qBAAqB,CAAC,EAAE,iBAAiB,CAAC;IAC1C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;;;;;;;;;;;;OAgBG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC;IAChD;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,aAAa,GAAG;IACtC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE;QACX;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,KAAK,CAAC,EAAE,MAAM,CAAC;QACf;;WAEG;QACH,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB;;WAEG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;IACF;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B;;WAEG;QACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC5B;;WAEG;QACH,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAChC;;WAEG;QACH,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC/B;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B;;WAEG;QACH,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAChC,CAAC;IACF;;;OAGG;IACH,iBAAiB,CAAC,EAAE,aAAa,CAAC;IAClC;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;;OAGG;IACH,qBAAqB,CAAC,EAAE,aAAa,CAAC;IACtC;;;;;;;;;;;;;;;;OAgBG;IACH,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,iBAAiB,CAAC;IAC1D;;;;;;;;;;;OAWG;IACH,kBAAkB,CAAC,EAAE,sBAAsB,CAAC;CAC7C,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { AxisTickLabelComponentProps } from './Axis';
|
|
2
|
+
export type DefaultAxisTickLabelProps = AxisTickLabelComponentProps;
|
|
3
|
+
/**
|
|
4
|
+
* DefaultAxisTickLabel is the default label component for axis tick labels.
|
|
5
|
+
* Provides standard styling for both X and Y axis tick labels.
|
|
6
|
+
*/
|
|
7
|
+
export declare const DefaultAxisTickLabel: import('react').NamedExoticComponent<AxisTickLabelComponentProps>;
|
|
8
|
+
//# sourceMappingURL=DefaultAxisTickLabel.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DefaultAxisTickLabel.d.ts","sourceRoot":"","sources":["../../../src/chart/axis/DefaultAxisTickLabel.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,QAAQ,CAAC;AAE1D,MAAM,MAAM,yBAAyB,GAAG,2BAA2B,CAAC;AAEpE;;;GAGG;AACH,eAAO,MAAM,oBAAoB,mEAE/B,CAAC"}
|
|
@@ -7,7 +7,7 @@ export type XAxisBaseProps = AxisBaseProps & {
|
|
|
7
7
|
position?: 'top' | 'bottom';
|
|
8
8
|
/**
|
|
9
9
|
* Height of the axis. This value is inclusive of the padding.
|
|
10
|
-
* @default 32
|
|
10
|
+
* @default 32 when no label is provided, 52 when a label is provided
|
|
11
11
|
*/
|
|
12
12
|
height?: number;
|
|
13
13
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"XAxis.d.ts","sourceRoot":"","sources":["../../../src/chart/axis/XAxis.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"XAxis.d.ts","sourceRoot":"","sources":["../../../src/chart/axis/XAxis.tsx"],"names":[],"mappings":"AAmBA,OAAO,EACL,KAAK,aAAa,EAElB,KAAK,SAAS,EAGf,MAAM,QAAQ,CAAC;AAahB,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG;IAC3C;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,cAAc,CAAC;AAEpD,eAAO,MAAM,KAAK,kDAmVjB,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type
|
|
1
|
+
import { type AxisBaseProps, type AxisProps } from './Axis';
|
|
2
2
|
export type YAxisBaseProps = AxisBaseProps & {
|
|
3
3
|
/**
|
|
4
4
|
* The ID of the axis to render.
|
|
@@ -12,7 +12,7 @@ export type YAxisBaseProps = AxisBaseProps & {
|
|
|
12
12
|
position?: 'left' | 'right';
|
|
13
13
|
/**
|
|
14
14
|
* Width of the axis. This value is inclusive of the padding.
|
|
15
|
-
* @default 44
|
|
15
|
+
* @default 44 when no label is provided, 64 when a label is provided
|
|
16
16
|
*/
|
|
17
17
|
width?: number;
|
|
18
18
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YAxis.d.ts","sourceRoot":"","sources":["../../../src/chart/axis/YAxis.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"YAxis.d.ts","sourceRoot":"","sources":["../../../src/chart/axis/YAxis.tsx"],"names":[],"mappings":"AAmBA,OAAO,EACL,KAAK,aAAa,EAElB,KAAK,SAAS,EAGf,MAAM,QAAQ,CAAC;AAahB,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG;IAC3C;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,cAAc,CAAC;AAEpD,eAAO,MAAM,KAAK,kDAgVjB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/chart/axis/index.ts"],"names":[],"mappings":"AACA,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/chart/axis/index.ts"],"names":[],"mappings":"AACA,cAAc,QAAQ,CAAC;AACvB,cAAc,wBAAwB,CAAC;AACvC,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
|
package/dts/chart/bar/Bar.d.ts
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { SVGProps } from 'react';
|
|
3
|
-
|
|
3
|
+
import type { Transition } from 'framer-motion';
|
|
4
|
+
import { type BarTransition } from '../utils';
|
|
5
|
+
export type BarBaseProps = {
|
|
4
6
|
/**
|
|
5
7
|
* X coordinate of the bar (left edge).
|
|
6
8
|
*/
|
|
@@ -18,7 +20,8 @@ export type BarComponentProps = {
|
|
|
18
20
|
*/
|
|
19
21
|
height: number;
|
|
20
22
|
/**
|
|
21
|
-
* Border radius
|
|
23
|
+
* Border radius for the bar.
|
|
24
|
+
* @default 4
|
|
22
25
|
*/
|
|
23
26
|
borderRadius?: number;
|
|
24
27
|
/**
|
|
@@ -43,9 +46,9 @@ export type BarComponentProps = {
|
|
|
43
46
|
*/
|
|
44
47
|
dataY?: number | [number, number] | null;
|
|
45
48
|
/**
|
|
46
|
-
* The
|
|
49
|
+
* The ID of the series this bar belongs to.
|
|
47
50
|
*/
|
|
48
|
-
|
|
51
|
+
seriesId?: string;
|
|
49
52
|
/**
|
|
50
53
|
* Fill color for the bar.
|
|
51
54
|
*/
|
|
@@ -62,19 +65,54 @@ export type BarComponentProps = {
|
|
|
62
65
|
* Stroke width for the bar outline.
|
|
63
66
|
*/
|
|
64
67
|
strokeWidth?: number;
|
|
65
|
-
};
|
|
66
|
-
export type BarComponent = React.FC<BarComponentProps>;
|
|
67
|
-
export type BarProps = Omit<BarComponentProps, 'd'> & {
|
|
68
|
-
/**
|
|
69
|
-
* Border radius for the bar.
|
|
70
|
-
* @default 4
|
|
71
|
-
*/
|
|
72
|
-
borderRadius?: BarComponentProps['borderRadius'];
|
|
73
68
|
/**
|
|
74
69
|
* Component to render the bar.
|
|
75
70
|
*/
|
|
76
71
|
BarComponent?: BarComponent;
|
|
77
72
|
};
|
|
73
|
+
export type BarProps = BarBaseProps & {
|
|
74
|
+
/**
|
|
75
|
+
* Transition configuration for enter and update animations.
|
|
76
|
+
* @note Disable an animation by passing in null.
|
|
77
|
+
*
|
|
78
|
+
* @default transitions = {{
|
|
79
|
+
* enter: { type: 'spring', stiffness: 900, damping: 120, mass: 4, staggerDelay: 0.25 },
|
|
80
|
+
* update: { type: 'spring', stiffness: 900, damping: 120, mass: 4 }
|
|
81
|
+
* }}
|
|
82
|
+
*
|
|
83
|
+
* @example
|
|
84
|
+
* // Custom staggered enter and spring update
|
|
85
|
+
* transitions={{ enter: { type: 'tween', duration: 0.5, staggerDelay: 0.3 }, update: { type: 'spring', damping: 20 } }}
|
|
86
|
+
*
|
|
87
|
+
* @example
|
|
88
|
+
* // Disable enter animation
|
|
89
|
+
* transitions={{ enter: null }}
|
|
90
|
+
*/
|
|
91
|
+
transitions?: {
|
|
92
|
+
/**
|
|
93
|
+
* Transition for the initial enter/reveal animation.
|
|
94
|
+
* Set to `null` to disable.
|
|
95
|
+
*/
|
|
96
|
+
enter?: BarTransition | null;
|
|
97
|
+
/**
|
|
98
|
+
* Transition for subsequent data update animations.
|
|
99
|
+
* Set to `null` to disable.
|
|
100
|
+
*/
|
|
101
|
+
update?: BarTransition | null;
|
|
102
|
+
};
|
|
103
|
+
/**
|
|
104
|
+
* Transition for updates.
|
|
105
|
+
* @deprecated Use `transitions.update` instead.
|
|
106
|
+
*/
|
|
107
|
+
transition?: Transition;
|
|
108
|
+
};
|
|
109
|
+
export type BarComponentProps = Omit<BarProps, 'BarComponent'> & {
|
|
110
|
+
/**
|
|
111
|
+
* The path data for the bar shape.
|
|
112
|
+
*/
|
|
113
|
+
d: SVGProps<SVGPathElement>['d'];
|
|
114
|
+
};
|
|
115
|
+
export type BarComponent = React.FC<BarComponentProps>;
|
|
78
116
|
/**
|
|
79
117
|
* Simple bar component that renders a single bar at the specified position.
|
|
80
118
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Bar.d.ts","sourceRoot":"","sources":["../../../src/chart/bar/Bar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Bar.d.ts","sourceRoot":"","sources":["../../../src/chart/bar/Bar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,EAAE,KAAK,aAAa,EAAc,MAAM,UAAU,CAAC;AAI1D,MAAM,MAAM,YAAY,GAAG;IACzB;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;IACV;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;IACV;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC;IACzC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,YAAY,GAAG;IACpC;;;;;;;;;;;;;;;;OAgBG;IACH,WAAW,CAAC,EAAE;QACZ;;;WAGG;QACH,KAAK,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;QAC7B;;;WAGG;QACH,MAAM,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;KAC/B,CAAC;IACF;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,QAAQ,EAAE,cAAc,CAAC,GAAG;IAC/D;;OAEG;IACH,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,GAAG,CAAC,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC;AAEvD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,GAAG,sCAsDf,CAAC"}
|
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
import { type XAxisProps, type YAxisProps } from '../axis';
|
|
2
|
-
import { type CartesianChartProps } from '../CartesianChart';
|
|
3
|
-
import { type AxisConfigProps
|
|
4
|
-
import { type BarProps } from './Bar';
|
|
2
|
+
import { type CartesianChartBaseProps, type CartesianChartProps } from '../CartesianChart';
|
|
3
|
+
import { type AxisConfigProps } from '../utils';
|
|
5
4
|
import { type BarPlotProps } from './BarPlot';
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
export type BarChartProps = Omit<CartesianChartProps, 'xAxis' | 'yAxis' | 'series'> &
|
|
5
|
+
import type { BarSeries } from './BarStack';
|
|
6
|
+
export type BarChartBaseProps = Omit<CartesianChartBaseProps, 'xAxis' | 'yAxis' | 'series'> &
|
|
9
7
|
Pick<
|
|
10
8
|
BarPlotProps,
|
|
11
9
|
| 'barPadding'
|
|
@@ -19,17 +17,19 @@ export type BarChartProps = Omit<CartesianChartProps, 'xAxis' | 'yAxis' | 'serie
|
|
|
19
17
|
| 'stackGap'
|
|
20
18
|
| 'barMinSize'
|
|
21
19
|
| 'stackMinSize'
|
|
20
|
+
| 'transitions'
|
|
21
|
+
| 'transition'
|
|
22
22
|
> & {
|
|
23
23
|
/**
|
|
24
24
|
* Configuration objects that define how to visualize the data.
|
|
25
|
-
* Each series
|
|
25
|
+
* Each series can optionally define its own BarComponent.
|
|
26
26
|
*/
|
|
27
27
|
series?: Array<BarSeries>;
|
|
28
28
|
/**
|
|
29
29
|
* Whether to stack the areas on top of each other.
|
|
30
30
|
* When true, each series builds cumulative values on top of the previous series.
|
|
31
31
|
*
|
|
32
|
-
*
|
|
32
|
+
* @note only applies to series data containing singular numbers (e.g., `[10, 20, 30]`).
|
|
33
33
|
* Series with start & end value tuples (e.g., `[[0, 10], [5, 20]]`) will be skipped during stacking
|
|
34
34
|
* and rendered as-is.
|
|
35
35
|
*/
|
|
@@ -42,9 +42,21 @@ export type BarChartProps = Omit<CartesianChartProps, 'xAxis' | 'yAxis' | 'serie
|
|
|
42
42
|
* Whether to show the Y axis.
|
|
43
43
|
*/
|
|
44
44
|
showYAxis?: boolean;
|
|
45
|
+
/**
|
|
46
|
+
* Configuration for x-axis.
|
|
47
|
+
* Accepts axis config and axis props.
|
|
48
|
+
* To show the axis, set `showXAxis` to true.
|
|
49
|
+
*/
|
|
45
50
|
xAxis?: Partial<AxisConfigProps> & XAxisProps;
|
|
51
|
+
/**
|
|
52
|
+
* Configuration for y-axis.
|
|
53
|
+
* Accepts axis config and axis props.
|
|
54
|
+
* To show the axis, set `showYAxis` to true.
|
|
55
|
+
*/
|
|
46
56
|
yAxis?: Partial<AxisConfigProps> & YAxisProps;
|
|
47
57
|
};
|
|
58
|
+
export type BarChartProps = BarChartBaseProps &
|
|
59
|
+
Omit<CartesianChartProps, 'xAxis' | 'yAxis' | 'series'>;
|
|
48
60
|
export declare const BarChart: import('react').MemoExoticComponent<
|
|
49
61
|
import('react').ForwardRefExoticComponent<
|
|
50
62
|
Omit<BarChartProps, 'ref'> & import('react').RefAttributes<SVGSVGElement>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../src/chart/bar/BarChart.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,UAAU,EAAS,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AACzE,OAAO,
|
|
1
|
+
{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../src/chart/bar/BarChart.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,UAAU,EAAS,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AACzE,OAAO,EAEL,KAAK,uBAAuB,EAC5B,KAAK,mBAAmB,EACzB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,KAAK,eAAe,EAAoD,MAAM,UAAU,CAAC;AAElG,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AACvD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAE5C,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,uBAAuB,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC,GACzF,IAAI,CACF,YAAY,EACV,YAAY,GACZ,cAAc,GACd,aAAa,GACb,QAAQ,GACR,aAAa,GACb,cAAc,GACd,mBAAmB,GACnB,eAAe,GACf,UAAU,GACV,YAAY,GACZ,cAAc,GACd,aAAa,GACb,YAAY,CACf,GAAG;IACF;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAC1B;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,UAAU,CAAC;IAC9C;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,UAAU,CAAC;CAC/C,CAAC;AAEJ,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAC3C,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC,CAAC;AAE1D,eAAO,MAAM,QAAQ,2JA4HpB,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { BarStackGroupProps } from './BarStackGroup';
|
|
2
|
-
export type
|
|
2
|
+
export type BarPlotBaseProps = Pick<
|
|
3
3
|
BarStackGroupProps,
|
|
4
4
|
| 'barPadding'
|
|
5
5
|
| 'BarComponent'
|
|
@@ -19,6 +19,8 @@ export type BarPlotProps = Pick<
|
|
|
19
19
|
*/
|
|
20
20
|
seriesIds?: string[];
|
|
21
21
|
};
|
|
22
|
+
export type BarPlotProps = BarPlotBaseProps &
|
|
23
|
+
Pick<BarStackGroupProps, 'transitions' | 'transition'>;
|
|
22
24
|
/**
|
|
23
25
|
* BarPlot component that handles multiple series with proper stacking coordination.
|
|
24
26
|
* Groups series by stack ID + y-axis ID combination and renders BarStackGroup for each group.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BarPlot.d.ts","sourceRoot":"","sources":["../../../src/chart/bar/BarPlot.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAG1D,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"BarPlot.d.ts","sourceRoot":"","sources":["../../../src/chart/bar/BarPlot.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAG1D,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,kBAAkB,EAChB,YAAY,GACZ,cAAc,GACd,aAAa,GACb,QAAQ,GACR,aAAa,GACb,cAAc,GACd,eAAe,GACf,UAAU,GACV,YAAY,GACZ,cAAc,GACd,mBAAmB,CACtB,GAAG;IACF;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,gBAAgB,GACzC,IAAI,CAAC,kBAAkB,EAAE,aAAa,GAAG,YAAY,CAAC,CAAC;AAEzD;;;;;GAKG;AACH,eAAO,MAAM,OAAO,oDAuGnB,CAAC"}
|