@gravity-ui/charts 1.30.1 → 1.31.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/dist/cjs/components/AxisX/AxisX.js +6 -4
- package/dist/cjs/components/AxisX/prepare-axis-data.js +2 -0
- package/dist/cjs/components/AxisX/types.d.ts +1 -0
- package/dist/cjs/components/AxisY/AxisY.js +4 -2
- package/dist/cjs/components/AxisY/prepare-axis-data.js +2 -0
- package/dist/cjs/components/AxisY/types.d.ts +1 -0
- package/dist/cjs/components/utils.js +2 -2
- package/dist/cjs/hooks/useAxis/types.d.ts +2 -0
- package/dist/cjs/hooks/useAxis/utils.d.ts +1 -0
- package/dist/cjs/hooks/useAxis/utils.js +2 -1
- package/dist/cjs/hooks/useChartOptions/title.js +1 -1
- package/dist/cjs/types/chart/axis.d.ts +3 -0
- package/dist/esm/components/AxisX/AxisX.js +6 -4
- package/dist/esm/components/AxisX/prepare-axis-data.js +2 -0
- package/dist/esm/components/AxisX/types.d.ts +1 -0
- package/dist/esm/components/AxisY/AxisY.js +4 -2
- package/dist/esm/components/AxisY/prepare-axis-data.js +2 -0
- package/dist/esm/components/AxisY/types.d.ts +1 -0
- package/dist/esm/components/utils.js +2 -2
- package/dist/esm/hooks/useAxis/types.d.ts +2 -0
- package/dist/esm/hooks/useAxis/utils.d.ts +1 -0
- package/dist/esm/hooks/useAxis/utils.js +2 -1
- package/dist/esm/hooks/useChartOptions/title.js +1 -1
- package/dist/esm/types/chart/axis.d.ts +3 -0
- package/package.json +1 -1
|
@@ -112,7 +112,7 @@ export const AxisX = (props) => {
|
|
|
112
112
|
.attr('fill', (d) => d.color)
|
|
113
113
|
.attr('opacity', (d) => d.opacity);
|
|
114
114
|
plotBandsSelection.each(function () {
|
|
115
|
-
var _a, _b;
|
|
115
|
+
var _a, _b, _c;
|
|
116
116
|
const plotBandSelection = select(this);
|
|
117
117
|
const band = plotBandSelection.datum();
|
|
118
118
|
const label = band.label;
|
|
@@ -125,7 +125,8 @@ export const AxisX = (props) => {
|
|
|
125
125
|
.style('font-weight', (_b = label.style.fontWeight) !== null && _b !== void 0 ? _b : '')
|
|
126
126
|
.style('dominant-baseline', 'text-before-edge')
|
|
127
127
|
.style('text-anchor', 'start')
|
|
128
|
-
.style('transform', `translate(${label.x}px, ${label.y}px) rotate(${label.rotate}deg)`)
|
|
128
|
+
.style('transform', `translate(${label.x}px, ${label.y}px) rotate(${label.rotate}deg)`)
|
|
129
|
+
.attr('data-qa', (_c = label.qa) !== null && _c !== void 0 ? _c : null);
|
|
129
130
|
}
|
|
130
131
|
});
|
|
131
132
|
};
|
|
@@ -153,7 +154,7 @@ export const AxisX = (props) => {
|
|
|
153
154
|
.attr('stroke-dasharray', (d) => getLineDashArray(d.dashStyle, d.lineWidth))
|
|
154
155
|
.attr('opacity', (d) => d.opacity);
|
|
155
156
|
plotLinesSelection.each(function () {
|
|
156
|
-
var _a, _b;
|
|
157
|
+
var _a, _b, _c;
|
|
157
158
|
const itemSelection = select(this);
|
|
158
159
|
const plotLine = itemSelection.datum();
|
|
159
160
|
const label = plotLine.label;
|
|
@@ -166,7 +167,8 @@ export const AxisX = (props) => {
|
|
|
166
167
|
.style('font-weight', (_b = label.style.fontWeight) !== null && _b !== void 0 ? _b : '')
|
|
167
168
|
.style('dominant-baseline', 'text-before-edge')
|
|
168
169
|
.style('text-anchor', 'start')
|
|
169
|
-
.style('transform', `translate(${label.x}px, ${label.y}px) rotate(${label.rotate}deg)`)
|
|
170
|
+
.style('transform', `translate(${label.x}px, ${label.y}px) rotate(${label.rotate}deg)`)
|
|
171
|
+
.attr('data-qa', (_c = label.qa) !== null && _c !== void 0 ? _c : null);
|
|
170
172
|
}
|
|
171
173
|
});
|
|
172
174
|
};
|
|
@@ -263,6 +263,7 @@ export async function prepareXAxisData({ axis, yAxis, scale, boundsWidth, bounds
|
|
|
263
263
|
x: plotBand.label.padding,
|
|
264
264
|
y: plotBand.label.padding + ((_f = labelSize === null || labelSize === void 0 ? void 0 : labelSize.width) !== null && _f !== void 0 ? _f : 0),
|
|
265
265
|
rotate: -90,
|
|
266
|
+
qa: plotBand.label.qa,
|
|
266
267
|
}
|
|
267
268
|
: null,
|
|
268
269
|
});
|
|
@@ -289,6 +290,7 @@ export async function prepareXAxisData({ axis, yAxis, scale, boundsWidth, bounds
|
|
|
289
290
|
x: plotLineValue - plotLine.label.padding - size.height,
|
|
290
291
|
y: plotLine.label.padding + size.width,
|
|
291
292
|
rotate: -90,
|
|
293
|
+
qa: plotLine.label.qa,
|
|
292
294
|
};
|
|
293
295
|
}
|
|
294
296
|
plotLines.push({
|
|
@@ -118,7 +118,7 @@ export const AxisY = (props) => {
|
|
|
118
118
|
.attr('fill', (d) => d.color)
|
|
119
119
|
.attr('opacity', (d) => d.opacity);
|
|
120
120
|
plotBandsSelection.each(function () {
|
|
121
|
-
var _a, _b;
|
|
121
|
+
var _a, _b, _c;
|
|
122
122
|
const plotBandSelection = select(this);
|
|
123
123
|
const band = plotBandSelection.datum();
|
|
124
124
|
const label = band.label;
|
|
@@ -130,6 +130,7 @@ export const AxisY = (props) => {
|
|
|
130
130
|
.style('font-size', label.style.fontSize)
|
|
131
131
|
.style('font-weight', (_b = label.style.fontWeight) !== null && _b !== void 0 ? _b : '')
|
|
132
132
|
.style('dominant-baseline', 'text-before-edge')
|
|
133
|
+
.attr('data-qa', (_c = label.qa) !== null && _c !== void 0 ? _c : null)
|
|
133
134
|
.attr('x', label.x)
|
|
134
135
|
.attr('y', label.y);
|
|
135
136
|
}
|
|
@@ -159,7 +160,7 @@ export const AxisY = (props) => {
|
|
|
159
160
|
.attr('stroke-dasharray', (d) => getLineDashArray(d.dashStyle, d.lineWidth))
|
|
160
161
|
.attr('opacity', (d) => d.opacity);
|
|
161
162
|
plotLinesSelection.each(function () {
|
|
162
|
-
var _a, _b;
|
|
163
|
+
var _a, _b, _c;
|
|
163
164
|
const itemSelection = select(this);
|
|
164
165
|
const plotLine = itemSelection.datum();
|
|
165
166
|
const label = plotLine.label;
|
|
@@ -171,6 +172,7 @@ export const AxisY = (props) => {
|
|
|
171
172
|
.style('font-size', label.style.fontSize)
|
|
172
173
|
.style('font-weight', (_b = label.style.fontWeight) !== null && _b !== void 0 ? _b : '')
|
|
173
174
|
.style('dominant-baseline', 'text-before-edge')
|
|
175
|
+
.attr('data-qa', (_c = label.qa) !== null && _c !== void 0 ? _c : null)
|
|
174
176
|
.attr('x', label.x)
|
|
175
177
|
.attr('y', label.y);
|
|
176
178
|
}
|
|
@@ -229,6 +229,7 @@ export async function prepareYAxisData({ axis, split, scale, top: topOffset, wid
|
|
|
229
229
|
style: plotBand.label.style,
|
|
230
230
|
x: plotBand.label.padding,
|
|
231
231
|
y: plotBand.label.padding,
|
|
232
|
+
qa: plotBand.label.qa,
|
|
232
233
|
}
|
|
233
234
|
: null,
|
|
234
235
|
});
|
|
@@ -254,6 +255,7 @@ export async function prepareYAxisData({ axis, split, scale, top: topOffset, wid
|
|
|
254
255
|
style: plotLine.label.style,
|
|
255
256
|
x: plotLine.label.padding,
|
|
256
257
|
y: Math.max(0, plotLineValue - size.height - plotLine.label.padding),
|
|
258
|
+
qa: plotLine.label.qa,
|
|
257
259
|
};
|
|
258
260
|
}
|
|
259
261
|
plotLines.push({
|
|
@@ -49,8 +49,8 @@ export function appendLinePathElement({ svgRootElement, height, width, x = 0, li
|
|
|
49
49
|
.attr('d', legendSymbolGenerator(points))
|
|
50
50
|
.attr('fill', 'none')
|
|
51
51
|
.attr('stroke-width', lineWidth)
|
|
52
|
-
.attr('
|
|
53
|
-
.
|
|
52
|
+
.attr('stroke', color !== null && color !== void 0 ? color : '')
|
|
53
|
+
.attr('class', className !== null && className !== void 0 ? className : null);
|
|
54
54
|
if (dashStyle) {
|
|
55
55
|
pathElement.attr('stroke-dasharray', getLineDashArray(dashStyle, lineWidth));
|
|
56
56
|
}
|
|
@@ -13,6 +13,7 @@ export type PreparedAxisPlotBand = Required<AxisPlotBand> & {
|
|
|
13
13
|
text: string;
|
|
14
14
|
style: BaseTextStyle;
|
|
15
15
|
padding: number;
|
|
16
|
+
qa?: string;
|
|
16
17
|
};
|
|
17
18
|
};
|
|
18
19
|
type PreparedAxisCrosshair = Required<AxisCrosshair>;
|
|
@@ -27,6 +28,7 @@ export type PreparedAxisPlotLine = {
|
|
|
27
28
|
text: string;
|
|
28
29
|
style: BaseTextStyle;
|
|
29
30
|
padding: number;
|
|
31
|
+
qa?: string;
|
|
30
32
|
};
|
|
31
33
|
};
|
|
32
34
|
export type PreparedRangeSlider = DeepRequired<Omit<ChartAxisRangeSlider, 'defaultRange'>> & {
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { DEFAULT_AXIS_LABEL_FONT_SIZE } from '../../constants';
|
|
2
2
|
export function prepareAxisPlotLabel(d) {
|
|
3
|
-
var _a, _b, _c, _d, _e;
|
|
3
|
+
var _a, _b, _c, _d, _e, _f;
|
|
4
4
|
return {
|
|
5
5
|
text: (_b = (_a = d.label) === null || _a === void 0 ? void 0 : _a.text) !== null && _b !== void 0 ? _b : '',
|
|
6
6
|
style: Object.assign({ fontSize: DEFAULT_AXIS_LABEL_FONT_SIZE, fontColor: 'var(--g-color-text-secondary)' }, (_c = d.label) === null || _c === void 0 ? void 0 : _c.style),
|
|
7
7
|
padding: (_e = (_d = d.label) === null || _d === void 0 ? void 0 : _d.padding) !== null && _e !== void 0 ? _e : 5,
|
|
8
|
+
qa: (_f = d.label) === null || _f === void 0 ? void 0 : _f.qa,
|
|
8
9
|
};
|
|
9
10
|
}
|
|
@@ -14,7 +14,7 @@ export const getPreparedTitle = ({ title, }) => {
|
|
|
14
14
|
? getHorizontalSvgTextHeight({ text: titleText, style: titleStyle }) + TITLE_PADDINGS
|
|
15
15
|
: 0;
|
|
16
16
|
const preparedTitle = titleText
|
|
17
|
-
? { text: titleText, style: titleStyle, height: titleHeight }
|
|
17
|
+
? { text: titleText, style: titleStyle, height: titleHeight, qa: title === null || title === void 0 ? void 0 : title.qa }
|
|
18
18
|
: undefined;
|
|
19
19
|
return preparedTitle;
|
|
20
20
|
};
|
|
@@ -194,6 +194,9 @@ export interface AxisPlot {
|
|
|
194
194
|
* @default 5
|
|
195
195
|
*/
|
|
196
196
|
padding?: number;
|
|
197
|
+
/** Can be used for the UI automated test.
|
|
198
|
+
* It is assigned as a data-qa attribute to an element. */
|
|
199
|
+
qa?: string;
|
|
197
200
|
};
|
|
198
201
|
}
|
|
199
202
|
export interface AxisPlotLine extends AxisPlot {
|
|
@@ -112,7 +112,7 @@ export const AxisX = (props) => {
|
|
|
112
112
|
.attr('fill', (d) => d.color)
|
|
113
113
|
.attr('opacity', (d) => d.opacity);
|
|
114
114
|
plotBandsSelection.each(function () {
|
|
115
|
-
var _a, _b;
|
|
115
|
+
var _a, _b, _c;
|
|
116
116
|
const plotBandSelection = select(this);
|
|
117
117
|
const band = plotBandSelection.datum();
|
|
118
118
|
const label = band.label;
|
|
@@ -125,7 +125,8 @@ export const AxisX = (props) => {
|
|
|
125
125
|
.style('font-weight', (_b = label.style.fontWeight) !== null && _b !== void 0 ? _b : '')
|
|
126
126
|
.style('dominant-baseline', 'text-before-edge')
|
|
127
127
|
.style('text-anchor', 'start')
|
|
128
|
-
.style('transform', `translate(${label.x}px, ${label.y}px) rotate(${label.rotate}deg)`)
|
|
128
|
+
.style('transform', `translate(${label.x}px, ${label.y}px) rotate(${label.rotate}deg)`)
|
|
129
|
+
.attr('data-qa', (_c = label.qa) !== null && _c !== void 0 ? _c : null);
|
|
129
130
|
}
|
|
130
131
|
});
|
|
131
132
|
};
|
|
@@ -153,7 +154,7 @@ export const AxisX = (props) => {
|
|
|
153
154
|
.attr('stroke-dasharray', (d) => getLineDashArray(d.dashStyle, d.lineWidth))
|
|
154
155
|
.attr('opacity', (d) => d.opacity);
|
|
155
156
|
plotLinesSelection.each(function () {
|
|
156
|
-
var _a, _b;
|
|
157
|
+
var _a, _b, _c;
|
|
157
158
|
const itemSelection = select(this);
|
|
158
159
|
const plotLine = itemSelection.datum();
|
|
159
160
|
const label = plotLine.label;
|
|
@@ -166,7 +167,8 @@ export const AxisX = (props) => {
|
|
|
166
167
|
.style('font-weight', (_b = label.style.fontWeight) !== null && _b !== void 0 ? _b : '')
|
|
167
168
|
.style('dominant-baseline', 'text-before-edge')
|
|
168
169
|
.style('text-anchor', 'start')
|
|
169
|
-
.style('transform', `translate(${label.x}px, ${label.y}px) rotate(${label.rotate}deg)`)
|
|
170
|
+
.style('transform', `translate(${label.x}px, ${label.y}px) rotate(${label.rotate}deg)`)
|
|
171
|
+
.attr('data-qa', (_c = label.qa) !== null && _c !== void 0 ? _c : null);
|
|
170
172
|
}
|
|
171
173
|
});
|
|
172
174
|
};
|
|
@@ -263,6 +263,7 @@ export async function prepareXAxisData({ axis, yAxis, scale, boundsWidth, bounds
|
|
|
263
263
|
x: plotBand.label.padding,
|
|
264
264
|
y: plotBand.label.padding + ((_f = labelSize === null || labelSize === void 0 ? void 0 : labelSize.width) !== null && _f !== void 0 ? _f : 0),
|
|
265
265
|
rotate: -90,
|
|
266
|
+
qa: plotBand.label.qa,
|
|
266
267
|
}
|
|
267
268
|
: null,
|
|
268
269
|
});
|
|
@@ -289,6 +290,7 @@ export async function prepareXAxisData({ axis, yAxis, scale, boundsWidth, bounds
|
|
|
289
290
|
x: plotLineValue - plotLine.label.padding - size.height,
|
|
290
291
|
y: plotLine.label.padding + size.width,
|
|
291
292
|
rotate: -90,
|
|
293
|
+
qa: plotLine.label.qa,
|
|
292
294
|
};
|
|
293
295
|
}
|
|
294
296
|
plotLines.push({
|
|
@@ -118,7 +118,7 @@ export const AxisY = (props) => {
|
|
|
118
118
|
.attr('fill', (d) => d.color)
|
|
119
119
|
.attr('opacity', (d) => d.opacity);
|
|
120
120
|
plotBandsSelection.each(function () {
|
|
121
|
-
var _a, _b;
|
|
121
|
+
var _a, _b, _c;
|
|
122
122
|
const plotBandSelection = select(this);
|
|
123
123
|
const band = plotBandSelection.datum();
|
|
124
124
|
const label = band.label;
|
|
@@ -130,6 +130,7 @@ export const AxisY = (props) => {
|
|
|
130
130
|
.style('font-size', label.style.fontSize)
|
|
131
131
|
.style('font-weight', (_b = label.style.fontWeight) !== null && _b !== void 0 ? _b : '')
|
|
132
132
|
.style('dominant-baseline', 'text-before-edge')
|
|
133
|
+
.attr('data-qa', (_c = label.qa) !== null && _c !== void 0 ? _c : null)
|
|
133
134
|
.attr('x', label.x)
|
|
134
135
|
.attr('y', label.y);
|
|
135
136
|
}
|
|
@@ -159,7 +160,7 @@ export const AxisY = (props) => {
|
|
|
159
160
|
.attr('stroke-dasharray', (d) => getLineDashArray(d.dashStyle, d.lineWidth))
|
|
160
161
|
.attr('opacity', (d) => d.opacity);
|
|
161
162
|
plotLinesSelection.each(function () {
|
|
162
|
-
var _a, _b;
|
|
163
|
+
var _a, _b, _c;
|
|
163
164
|
const itemSelection = select(this);
|
|
164
165
|
const plotLine = itemSelection.datum();
|
|
165
166
|
const label = plotLine.label;
|
|
@@ -171,6 +172,7 @@ export const AxisY = (props) => {
|
|
|
171
172
|
.style('font-size', label.style.fontSize)
|
|
172
173
|
.style('font-weight', (_b = label.style.fontWeight) !== null && _b !== void 0 ? _b : '')
|
|
173
174
|
.style('dominant-baseline', 'text-before-edge')
|
|
175
|
+
.attr('data-qa', (_c = label.qa) !== null && _c !== void 0 ? _c : null)
|
|
174
176
|
.attr('x', label.x)
|
|
175
177
|
.attr('y', label.y);
|
|
176
178
|
}
|
|
@@ -229,6 +229,7 @@ export async function prepareYAxisData({ axis, split, scale, top: topOffset, wid
|
|
|
229
229
|
style: plotBand.label.style,
|
|
230
230
|
x: plotBand.label.padding,
|
|
231
231
|
y: plotBand.label.padding,
|
|
232
|
+
qa: plotBand.label.qa,
|
|
232
233
|
}
|
|
233
234
|
: null,
|
|
234
235
|
});
|
|
@@ -254,6 +255,7 @@ export async function prepareYAxisData({ axis, split, scale, top: topOffset, wid
|
|
|
254
255
|
style: plotLine.label.style,
|
|
255
256
|
x: plotLine.label.padding,
|
|
256
257
|
y: Math.max(0, plotLineValue - size.height - plotLine.label.padding),
|
|
258
|
+
qa: plotLine.label.qa,
|
|
257
259
|
};
|
|
258
260
|
}
|
|
259
261
|
plotLines.push({
|
|
@@ -49,8 +49,8 @@ export function appendLinePathElement({ svgRootElement, height, width, x = 0, li
|
|
|
49
49
|
.attr('d', legendSymbolGenerator(points))
|
|
50
50
|
.attr('fill', 'none')
|
|
51
51
|
.attr('stroke-width', lineWidth)
|
|
52
|
-
.attr('
|
|
53
|
-
.
|
|
52
|
+
.attr('stroke', color !== null && color !== void 0 ? color : '')
|
|
53
|
+
.attr('class', className !== null && className !== void 0 ? className : null);
|
|
54
54
|
if (dashStyle) {
|
|
55
55
|
pathElement.attr('stroke-dasharray', getLineDashArray(dashStyle, lineWidth));
|
|
56
56
|
}
|
|
@@ -13,6 +13,7 @@ export type PreparedAxisPlotBand = Required<AxisPlotBand> & {
|
|
|
13
13
|
text: string;
|
|
14
14
|
style: BaseTextStyle;
|
|
15
15
|
padding: number;
|
|
16
|
+
qa?: string;
|
|
16
17
|
};
|
|
17
18
|
};
|
|
18
19
|
type PreparedAxisCrosshair = Required<AxisCrosshair>;
|
|
@@ -27,6 +28,7 @@ export type PreparedAxisPlotLine = {
|
|
|
27
28
|
text: string;
|
|
28
29
|
style: BaseTextStyle;
|
|
29
30
|
padding: number;
|
|
31
|
+
qa?: string;
|
|
30
32
|
};
|
|
31
33
|
};
|
|
32
34
|
export type PreparedRangeSlider = DeepRequired<Omit<ChartAxisRangeSlider, 'defaultRange'>> & {
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { DEFAULT_AXIS_LABEL_FONT_SIZE } from '../../constants';
|
|
2
2
|
export function prepareAxisPlotLabel(d) {
|
|
3
|
-
var _a, _b, _c, _d, _e;
|
|
3
|
+
var _a, _b, _c, _d, _e, _f;
|
|
4
4
|
return {
|
|
5
5
|
text: (_b = (_a = d.label) === null || _a === void 0 ? void 0 : _a.text) !== null && _b !== void 0 ? _b : '',
|
|
6
6
|
style: Object.assign({ fontSize: DEFAULT_AXIS_LABEL_FONT_SIZE, fontColor: 'var(--g-color-text-secondary)' }, (_c = d.label) === null || _c === void 0 ? void 0 : _c.style),
|
|
7
7
|
padding: (_e = (_d = d.label) === null || _d === void 0 ? void 0 : _d.padding) !== null && _e !== void 0 ? _e : 5,
|
|
8
|
+
qa: (_f = d.label) === null || _f === void 0 ? void 0 : _f.qa,
|
|
8
9
|
};
|
|
9
10
|
}
|
|
@@ -14,7 +14,7 @@ export const getPreparedTitle = ({ title, }) => {
|
|
|
14
14
|
? getHorizontalSvgTextHeight({ text: titleText, style: titleStyle }) + TITLE_PADDINGS
|
|
15
15
|
: 0;
|
|
16
16
|
const preparedTitle = titleText
|
|
17
|
-
? { text: titleText, style: titleStyle, height: titleHeight }
|
|
17
|
+
? { text: titleText, style: titleStyle, height: titleHeight, qa: title === null || title === void 0 ? void 0 : title.qa }
|
|
18
18
|
: undefined;
|
|
19
19
|
return preparedTitle;
|
|
20
20
|
};
|
|
@@ -194,6 +194,9 @@ export interface AxisPlot {
|
|
|
194
194
|
* @default 5
|
|
195
195
|
*/
|
|
196
196
|
padding?: number;
|
|
197
|
+
/** Can be used for the UI automated test.
|
|
198
|
+
* It is assigned as a data-qa attribute to an element. */
|
|
199
|
+
qa?: string;
|
|
197
200
|
};
|
|
198
201
|
}
|
|
199
202
|
export interface AxisPlotLine extends AxisPlot {
|