@gravity-ui/charts 1.29.0 → 1.30.0
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 +19 -3
- package/dist/cjs/components/ChartInner/useChartInnerHandlers.js +3 -1
- package/dist/cjs/hooks/useAxisScales/index.js +32 -8
- package/dist/cjs/types/chart/base.d.ts +6 -0
- package/dist/esm/components/ChartInner/useChartInnerHandlers.js +3 -1
- package/dist/esm/hooks/useAxisScales/index.js +32 -8
- package/dist/esm/types/chart/base.d.ts +6 -0
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,15 +1,31 @@
|
|
|
1
|
-
# Gravity UI Charts
|
|
1
|
+
# Gravity UI Charts
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A flexible JavaScript library for data visualization and chart rendering using React.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@gravity-ui/charts) [](https://github.com/gravity-ui/charts/actions/workflows/ci.yml?query=branch:main) [](https://preview.gravity-ui.com/charts/)
|
|
6
|
+
|
|
7
|
+
## Documentation
|
|
8
|
+
|
|
9
|
+
- [Overview](https://gravity-ui.github.io/charts/pages/overview.html)
|
|
10
|
+
- [API](https://gravity-ui.github.io/charts/pages/api/overview.html)
|
|
11
|
+
- [Guides](https://gravity-ui.github.io/charts/pages/guides/tooltip.html)
|
|
12
|
+
|
|
13
|
+
## Get started
|
|
14
|
+
|
|
15
|
+
### Install
|
|
4
16
|
|
|
5
17
|
```shell
|
|
6
18
|
npm install @gravity-ui/uikit @gravity-ui/charts
|
|
7
19
|
```
|
|
8
20
|
|
|
9
|
-
|
|
21
|
+
### Development
|
|
10
22
|
|
|
11
23
|
To start the development server with storybook run the following:
|
|
12
24
|
|
|
13
25
|
```shell
|
|
14
26
|
npm run start
|
|
15
27
|
```
|
|
28
|
+
|
|
29
|
+
## Contributing
|
|
30
|
+
|
|
31
|
+
Please refer to the [contributing document](https://github.com/gravity-ui/charts/blob/main/CONTRIBUTING.md) if you wish to make pull requests.
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { pointer } from 'd3';
|
|
2
|
+
import get from 'lodash/get';
|
|
2
3
|
import throttle from 'lodash/throttle';
|
|
3
4
|
import { IS_TOUCH_ENABLED } from '../../constants';
|
|
4
5
|
import { EventType } from '../../utils';
|
|
@@ -16,9 +17,10 @@ export function useChartInnerHandlers(props) {
|
|
|
16
17
|
dispatcher.call(EventType.POINTERMOVE_CHART, {}, undefined, event);
|
|
17
18
|
return;
|
|
18
19
|
}
|
|
20
|
+
const shapesDataWithTooltipEnabled = shapesData.filter((d) => get(d, 'series.tooltip.enabled', true));
|
|
19
21
|
const closest = getClosestPoints({
|
|
20
22
|
position: [x, y],
|
|
21
|
-
shapesData,
|
|
23
|
+
shapesData: shapesDataWithTooltipEnabled,
|
|
22
24
|
boundsHeight,
|
|
23
25
|
boundsWidth,
|
|
24
26
|
});
|
|
@@ -116,8 +116,14 @@ export function createYScale(args) {
|
|
|
116
116
|
offsetMax += bandWidth / 2;
|
|
117
117
|
}
|
|
118
118
|
}
|
|
119
|
-
const
|
|
120
|
-
const
|
|
119
|
+
const isMinSpecified = typeof get(axis, 'min') === 'number' && !zoomStateY;
|
|
120
|
+
const isMaxSpecified = typeof get(axis, 'max') === 'number' && !zoomStateY;
|
|
121
|
+
const domainOffsetMin = isMinSpecified
|
|
122
|
+
? 0
|
|
123
|
+
: Math.abs(scale.invert(offsetMin) - scale.invert(0));
|
|
124
|
+
const domainOffsetMax = isMaxSpecified
|
|
125
|
+
? 0
|
|
126
|
+
: Math.abs(scale.invert(offsetMax) - scale.invert(0));
|
|
121
127
|
return scale.domain([yMin - domainOffsetMin, yMax + domainOffsetMax]);
|
|
122
128
|
}
|
|
123
129
|
break;
|
|
@@ -185,8 +191,14 @@ export function createYScale(args) {
|
|
|
185
191
|
offsetMax += bandWidth / 2;
|
|
186
192
|
}
|
|
187
193
|
}
|
|
188
|
-
const
|
|
189
|
-
const
|
|
194
|
+
const isMinSpecified = typeof get(axis, 'min') === 'number' && !zoomStateY;
|
|
195
|
+
const isMaxSpecified = typeof get(axis, 'max') === 'number' && !zoomStateY;
|
|
196
|
+
const domainOffsetMin = isMinSpecified
|
|
197
|
+
? 0
|
|
198
|
+
: Math.abs(scale.invert(offsetMin).getTime() - scale.invert(0).getTime());
|
|
199
|
+
const domainOffsetMax = isMaxSpecified
|
|
200
|
+
? 0
|
|
201
|
+
: Math.abs(scale.invert(offsetMax).getTime() - scale.invert(0).getTime());
|
|
190
202
|
return scale.domain([yMin - domainOffsetMin, yMax + domainOffsetMax]);
|
|
191
203
|
}
|
|
192
204
|
}
|
|
@@ -307,8 +319,14 @@ export function createXScale(args) {
|
|
|
307
319
|
offsetMax += bandWidth / 2;
|
|
308
320
|
}
|
|
309
321
|
}
|
|
310
|
-
const
|
|
311
|
-
const
|
|
322
|
+
const isMinSpecified = typeof get(axis, 'min') === 'number' && !zoomStateX;
|
|
323
|
+
const isMaxSpecified = typeof get(axis, 'max') === 'number' && !zoomStateX;
|
|
324
|
+
const domainOffsetMin = isMinSpecified
|
|
325
|
+
? 0
|
|
326
|
+
: Math.abs(scale.invert(offsetMin) - scale.invert(0));
|
|
327
|
+
const domainOffsetMax = isMaxSpecified
|
|
328
|
+
? 0
|
|
329
|
+
: Math.abs(scale.invert(offsetMax) - scale.invert(0));
|
|
312
330
|
// 10 is the default value for the number of ticks. Here, to preserve the appearance of a series with a small number of points
|
|
313
331
|
const nicedDomain = scale.copy().nice(Math.max(10, domainData.length)).domain();
|
|
314
332
|
scale.domain([xMin - domainOffsetMin, xMax + domainOffsetMax]);
|
|
@@ -374,8 +392,14 @@ export function createXScale(args) {
|
|
|
374
392
|
offsetMax += bandWidth / 2;
|
|
375
393
|
}
|
|
376
394
|
}
|
|
377
|
-
const
|
|
378
|
-
const
|
|
395
|
+
const isMinSpecified = typeof get(axis, 'min') === 'number' && !zoomStateX;
|
|
396
|
+
const isMaxSpecified = typeof get(axis, 'max') === 'number' && !zoomStateX;
|
|
397
|
+
const domainOffsetMin = isMinSpecified
|
|
398
|
+
? 0
|
|
399
|
+
: Math.abs(scale.invert(offsetMin).getTime() - scale.invert(0).getTime());
|
|
400
|
+
const domainOffsetMax = isMaxSpecified
|
|
401
|
+
? 0
|
|
402
|
+
: Math.abs(scale.invert(offsetMax).getTime() - scale.invert(0).getTime());
|
|
379
403
|
// 10 is the default value for the number of ticks. Here, to preserve the appearance of a series with a small number of points
|
|
380
404
|
const nicedDomain = scale.copy().nice(Math.max(10, domainData.length)).domain();
|
|
381
405
|
scale.domain([xMin - domainOffsetMin, xMax + domainOffsetMax]);
|
|
@@ -56,6 +56,12 @@ export interface BaseSeries {
|
|
|
56
56
|
tooltip?: {
|
|
57
57
|
/** Formatting settings for tooltip value. */
|
|
58
58
|
valueFormat?: ValueFormat;
|
|
59
|
+
/**
|
|
60
|
+
* Enable or disable the visibility of this series in the tooltip.
|
|
61
|
+
*
|
|
62
|
+
* @default true
|
|
63
|
+
*/
|
|
64
|
+
enabled?: boolean;
|
|
59
65
|
};
|
|
60
66
|
}
|
|
61
67
|
export interface BaseSeriesData<T = MeaningfulAny> {
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { pointer } from 'd3';
|
|
2
|
+
import get from 'lodash/get';
|
|
2
3
|
import throttle from 'lodash/throttle';
|
|
3
4
|
import { IS_TOUCH_ENABLED } from '../../constants';
|
|
4
5
|
import { EventType } from '../../utils';
|
|
@@ -16,9 +17,10 @@ export function useChartInnerHandlers(props) {
|
|
|
16
17
|
dispatcher.call(EventType.POINTERMOVE_CHART, {}, undefined, event);
|
|
17
18
|
return;
|
|
18
19
|
}
|
|
20
|
+
const shapesDataWithTooltipEnabled = shapesData.filter((d) => get(d, 'series.tooltip.enabled', true));
|
|
19
21
|
const closest = getClosestPoints({
|
|
20
22
|
position: [x, y],
|
|
21
|
-
shapesData,
|
|
23
|
+
shapesData: shapesDataWithTooltipEnabled,
|
|
22
24
|
boundsHeight,
|
|
23
25
|
boundsWidth,
|
|
24
26
|
});
|
|
@@ -116,8 +116,14 @@ export function createYScale(args) {
|
|
|
116
116
|
offsetMax += bandWidth / 2;
|
|
117
117
|
}
|
|
118
118
|
}
|
|
119
|
-
const
|
|
120
|
-
const
|
|
119
|
+
const isMinSpecified = typeof get(axis, 'min') === 'number' && !zoomStateY;
|
|
120
|
+
const isMaxSpecified = typeof get(axis, 'max') === 'number' && !zoomStateY;
|
|
121
|
+
const domainOffsetMin = isMinSpecified
|
|
122
|
+
? 0
|
|
123
|
+
: Math.abs(scale.invert(offsetMin) - scale.invert(0));
|
|
124
|
+
const domainOffsetMax = isMaxSpecified
|
|
125
|
+
? 0
|
|
126
|
+
: Math.abs(scale.invert(offsetMax) - scale.invert(0));
|
|
121
127
|
return scale.domain([yMin - domainOffsetMin, yMax + domainOffsetMax]);
|
|
122
128
|
}
|
|
123
129
|
break;
|
|
@@ -185,8 +191,14 @@ export function createYScale(args) {
|
|
|
185
191
|
offsetMax += bandWidth / 2;
|
|
186
192
|
}
|
|
187
193
|
}
|
|
188
|
-
const
|
|
189
|
-
const
|
|
194
|
+
const isMinSpecified = typeof get(axis, 'min') === 'number' && !zoomStateY;
|
|
195
|
+
const isMaxSpecified = typeof get(axis, 'max') === 'number' && !zoomStateY;
|
|
196
|
+
const domainOffsetMin = isMinSpecified
|
|
197
|
+
? 0
|
|
198
|
+
: Math.abs(scale.invert(offsetMin).getTime() - scale.invert(0).getTime());
|
|
199
|
+
const domainOffsetMax = isMaxSpecified
|
|
200
|
+
? 0
|
|
201
|
+
: Math.abs(scale.invert(offsetMax).getTime() - scale.invert(0).getTime());
|
|
190
202
|
return scale.domain([yMin - domainOffsetMin, yMax + domainOffsetMax]);
|
|
191
203
|
}
|
|
192
204
|
}
|
|
@@ -307,8 +319,14 @@ export function createXScale(args) {
|
|
|
307
319
|
offsetMax += bandWidth / 2;
|
|
308
320
|
}
|
|
309
321
|
}
|
|
310
|
-
const
|
|
311
|
-
const
|
|
322
|
+
const isMinSpecified = typeof get(axis, 'min') === 'number' && !zoomStateX;
|
|
323
|
+
const isMaxSpecified = typeof get(axis, 'max') === 'number' && !zoomStateX;
|
|
324
|
+
const domainOffsetMin = isMinSpecified
|
|
325
|
+
? 0
|
|
326
|
+
: Math.abs(scale.invert(offsetMin) - scale.invert(0));
|
|
327
|
+
const domainOffsetMax = isMaxSpecified
|
|
328
|
+
? 0
|
|
329
|
+
: Math.abs(scale.invert(offsetMax) - scale.invert(0));
|
|
312
330
|
// 10 is the default value for the number of ticks. Here, to preserve the appearance of a series with a small number of points
|
|
313
331
|
const nicedDomain = scale.copy().nice(Math.max(10, domainData.length)).domain();
|
|
314
332
|
scale.domain([xMin - domainOffsetMin, xMax + domainOffsetMax]);
|
|
@@ -374,8 +392,14 @@ export function createXScale(args) {
|
|
|
374
392
|
offsetMax += bandWidth / 2;
|
|
375
393
|
}
|
|
376
394
|
}
|
|
377
|
-
const
|
|
378
|
-
const
|
|
395
|
+
const isMinSpecified = typeof get(axis, 'min') === 'number' && !zoomStateX;
|
|
396
|
+
const isMaxSpecified = typeof get(axis, 'max') === 'number' && !zoomStateX;
|
|
397
|
+
const domainOffsetMin = isMinSpecified
|
|
398
|
+
? 0
|
|
399
|
+
: Math.abs(scale.invert(offsetMin).getTime() - scale.invert(0).getTime());
|
|
400
|
+
const domainOffsetMax = isMaxSpecified
|
|
401
|
+
? 0
|
|
402
|
+
: Math.abs(scale.invert(offsetMax).getTime() - scale.invert(0).getTime());
|
|
379
403
|
// 10 is the default value for the number of ticks. Here, to preserve the appearance of a series with a small number of points
|
|
380
404
|
const nicedDomain = scale.copy().nice(Math.max(10, domainData.length)).domain();
|
|
381
405
|
scale.domain([xMin - domainOffsetMin, xMax + domainOffsetMax]);
|
|
@@ -56,6 +56,12 @@ export interface BaseSeries {
|
|
|
56
56
|
tooltip?: {
|
|
57
57
|
/** Formatting settings for tooltip value. */
|
|
58
58
|
valueFormat?: ValueFormat;
|
|
59
|
+
/**
|
|
60
|
+
* Enable or disable the visibility of this series in the tooltip.
|
|
61
|
+
*
|
|
62
|
+
* @default true
|
|
63
|
+
*/
|
|
64
|
+
enabled?: boolean;
|
|
59
65
|
};
|
|
60
66
|
}
|
|
61
67
|
export interface BaseSeriesData<T = MeaningfulAny> {
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gravity-ui/charts",
|
|
3
|
-
"version": "1.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "1.30.0",
|
|
4
|
+
"description": "A flexible JavaScript library for data visualization and chart rendering using React",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
7
7
|
"module": "./dist/esm/index.js",
|