@gravity-ui/charts 0.4.1 → 0.5.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.
Files changed (9) hide show
  1. package/dist/cjs/components/Legend/index.js +23 -4
  2. package/dist/cjs/hooks/useSeries/prepare-legend.js +1 -0
  3. package/dist/cjs/hooks/useSeries/types.d.ts +1 -0
  4. package/dist/cjs/types/chart/legend.d.ts +2 -0
  5. package/dist/esm/components/Legend/index.js +23 -4
  6. package/dist/esm/hooks/useSeries/prepare-legend.js +1 -0
  7. package/dist/esm/hooks/useSeries/types.d.ts +1 -0
  8. package/dist/esm/types/chart/legend.d.ts +2 -0
  9. package/package.json +1 -1
package/dist/cjs/components/Legend/index.js CHANGED
@@ -2,12 +2,13 @@ import React from 'react';
2
2
  import { line as lineGenerator, scaleLinear, select, symbol } from 'd3';
3
3
  import { CONTINUOUS_LEGEND_SIZE } from '../../constants';
4
4
  import { getLineDashArray } from '../../hooks/useShapes/utils';
5
+ import { formatNumber } from '../../libs';
5
6
  import { block, createGradientRect, getContinuesColorFn, getLabelsSize, getSymbol, } from '../../utils';
6
7
  import { axisBottom } from '../../utils/chart/axis-generators';
7
8
  import './styles.css';
8
9
  const b = block('d3-legend');
9
10
  const getLegendPosition = (args) => {
10
- const { align, offsetWidth, width, contentWidth } = args;
11
+ const { align, offsetWidth = 0, width, contentWidth } = args;
11
12
  const top = 0;
12
13
  if (align === 'left') {
13
14
  return { top, left: offsetWidth };
@@ -229,14 +230,16 @@ export const Legend = (props) => {
229
230
  }),
230
231
  });
231
232
  // ticks
233
+ const scale = scaleLinear(domain, [0, legend.width]);
232
234
  const xAxisGenerator = axisBottom({
233
- scale: scaleLinear(domain, [0, legend.width]),
235
+ scale,
234
236
  ticks: {
235
237
  items: [[0, -rectHeight]],
236
238
  labelsMargin: legend.ticks.labelsMargin,
237
239
  labelsLineHeight: legend.ticks.labelsLineHeight,
238
240
  maxTickCount: 4,
239
241
  tickColor: '#fff',
242
+ labelFormat: (value) => formatNumber(value, { unit: 'auto' }),
240
243
  },
241
244
  domain: {
242
245
  size: legend.width,
@@ -251,15 +254,31 @@ export const Legend = (props) => {
251
254
  legendWidth = legend.width;
252
255
  }
253
256
  if (legend.title.enable) {
254
- const { maxWidth: labelWidth } = getLabelsSize({
257
+ const { maxWidth: titleWidth } = getLabelsSize({
255
258
  labels: [legend.title.text],
256
259
  style: legend.title.style,
257
260
  });
261
+ let dx = 0;
262
+ switch (legend.title.align) {
263
+ case 'center': {
264
+ dx = legend.width / 2 - titleWidth / 2;
265
+ break;
266
+ }
267
+ case 'right': {
268
+ dx = legend.width - titleWidth;
269
+ break;
270
+ }
271
+ case 'left':
272
+ default: {
273
+ dx = 0;
274
+ break;
275
+ }
276
+ }
258
277
  svgElement
259
278
  .append('g')
260
279
  .attr('class', b('title'))
261
280
  .append('text')
262
- .attr('dx', legend.width / 2 - labelWidth / 2)
281
+ .attr('dx', dx)
263
282
  .attr('font-weight', (_c = legend.title.style.fontWeight) !== null && _c !== void 0 ? _c : null)
264
283
  .attr('font-size', (_d = legend.title.style.fontSize) !== null && _d !== void 0 ? _d : null)
265
284
  .attr('fill', (_e = legend.title.style.fontColor) !== null && _e !== void 0 ? _e : null)
package/dist/cjs/hooks/useSeries/prepare-legend.js CHANGED
@@ -63,6 +63,7 @@ export const getPreparedLegend = (args) => {
63
63
  margin: titleMargin,
64
64
  style: titleStyle,
65
65
  height: titleHeight,
66
+ align: get(legend, 'title.align', 'left'),
66
67
  },
67
68
  width: legendWidth,
68
69
  ticks,
package/dist/cjs/hooks/useSeries/types.d.ts CHANGED
@@ -21,6 +21,7 @@ export type PreparedLegend = Required<Omit<ChartLegend, 'title' | 'colorScale'>>
21
21
  margin: number;
22
22
  style: BaseTextStyle;
23
23
  height: number;
24
+ align: Required<Required<ChartLegend>['title']>['align'];
24
25
  };
25
26
  ticks: {
26
27
  labelsMargin: number;
package/dist/cjs/types/chart/legend.d.ts CHANGED
@@ -38,6 +38,8 @@ export type ChartLegend = {
38
38
  * Defaults to 4 for horizontal axes, 8 for vertical.
39
39
  * */
40
40
  margin?: number;
41
+ /** The horizontal alignment of the title. */
42
+ align?: 'left' | 'center' | 'right';
41
43
  };
42
44
  colorScale?: {
43
45
  stops?: number[];
package/dist/esm/components/Legend/index.js CHANGED
@@ -2,12 +2,13 @@ import React from 'react';
2
2
  import { line as lineGenerator, scaleLinear, select, symbol } from 'd3';
3
3
  import { CONTINUOUS_LEGEND_SIZE } from '../../constants';
4
4
  import { getLineDashArray } from '../../hooks/useShapes/utils';
5
+ import { formatNumber } from '../../libs';
5
6
  import { block, createGradientRect, getContinuesColorFn, getLabelsSize, getSymbol, } from '../../utils';
6
7
  import { axisBottom } from '../../utils/chart/axis-generators';
7
8
  import './styles.css';
8
9
  const b = block('d3-legend');
9
10
  const getLegendPosition = (args) => {
10
- const { align, offsetWidth, width, contentWidth } = args;
11
+ const { align, offsetWidth = 0, width, contentWidth } = args;
11
12
  const top = 0;
12
13
  if (align === 'left') {
13
14
  return { top, left: offsetWidth };
@@ -229,14 +230,16 @@ export const Legend = (props) => {
229
230
  }),
230
231
  });
231
232
  // ticks
233
+ const scale = scaleLinear(domain, [0, legend.width]);
232
234
  const xAxisGenerator = axisBottom({
233
- scale: scaleLinear(domain, [0, legend.width]),
235
+ scale,
234
236
  ticks: {
235
237
  items: [[0, -rectHeight]],
236
238
  labelsMargin: legend.ticks.labelsMargin,
237
239
  labelsLineHeight: legend.ticks.labelsLineHeight,
238
240
  maxTickCount: 4,
239
241
  tickColor: '#fff',
242
+ labelFormat: (value) => formatNumber(value, { unit: 'auto' }),
240
243
  },
241
244
  domain: {
242
245
  size: legend.width,
@@ -251,15 +254,31 @@ export const Legend = (props) => {
251
254
  legendWidth = legend.width;
252
255
  }
253
256
  if (legend.title.enable) {
254
- const { maxWidth: labelWidth } = getLabelsSize({
257
+ const { maxWidth: titleWidth } = getLabelsSize({
255
258
  labels: [legend.title.text],
256
259
  style: legend.title.style,
257
260
  });
261
+ let dx = 0;
262
+ switch (legend.title.align) {
263
+ case 'center': {
264
+ dx = legend.width / 2 - titleWidth / 2;
265
+ break;
266
+ }
267
+ case 'right': {
268
+ dx = legend.width - titleWidth;
269
+ break;
270
+ }
271
+ case 'left':
272
+ default: {
273
+ dx = 0;
274
+ break;
275
+ }
276
+ }
258
277
  svgElement
259
278
  .append('g')
260
279
  .attr('class', b('title'))
261
280
  .append('text')
262
- .attr('dx', legend.width / 2 - labelWidth / 2)
281
+ .attr('dx', dx)
263
282
  .attr('font-weight', (_c = legend.title.style.fontWeight) !== null && _c !== void 0 ? _c : null)
264
283
  .attr('font-size', (_d = legend.title.style.fontSize) !== null && _d !== void 0 ? _d : null)
265
284
  .attr('fill', (_e = legend.title.style.fontColor) !== null && _e !== void 0 ? _e : null)
package/dist/esm/hooks/useSeries/prepare-legend.js CHANGED
@@ -63,6 +63,7 @@ export const getPreparedLegend = (args) => {
63
63
  margin: titleMargin,
64
64
  style: titleStyle,
65
65
  height: titleHeight,
66
+ align: get(legend, 'title.align', 'left'),
66
67
  },
67
68
  width: legendWidth,
68
69
  ticks,
package/dist/esm/hooks/useSeries/types.d.ts CHANGED
@@ -21,6 +21,7 @@ export type PreparedLegend = Required<Omit<ChartLegend, 'title' | 'colorScale'>>
21
21
  margin: number;
22
22
  style: BaseTextStyle;
23
23
  height: number;
24
+ align: Required<Required<ChartLegend>['title']>['align'];
24
25
  };
25
26
  ticks: {
26
27
  labelsMargin: number;
package/dist/esm/types/chart/legend.d.ts CHANGED
@@ -38,6 +38,8 @@ export type ChartLegend = {
38
38
  * Defaults to 4 for horizontal axes, 8 for vertical.
39
39
  * */
40
40
  margin?: number;
41
+ /** The horizontal alignment of the title. */
42
+ align?: 'left' | 'center' | 'right';
41
43
  };
42
44
  colorScale?: {
43
45
  stops?: number[];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/charts",
3
- "version": "0.4.1",
3
+ "version": "0.5.0",
4
4
  "description": "React component used to render charts",
5
5
  "license": "MIT",
6
6
  "main": "dist/cjs/index.js",