Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(D3 plugin): add second Y axis support #480

Merged
merged 8 commits into from
May 17, 2024
Merged

feat(D3 plugin): add second Y axis support #480

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
bd48eee
feat(D3 plugin): add second Y axis support
kuzmadom May 16, 2024
44fd8b3
Fix y scale for dual axis
kuzmadom May 16, 2024
662a501
Add examples with dual Y axis to other series types
kuzmadom May 16, 2024
0e2566f
fix types
kuzmadom May 16, 2024
666c904
Slice test data
kuzmadom May 16, 2024
387c0dd
fix after review
kuzmadom May 17, 2024
deb4a21
fix axis with hidden series
kuzmadom May 17, 2024
2dc23e5
Add axis index validation
kuzmadom May 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/i18n/keysets/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,8 @@
"label_invalid-series-type": "It seems you haven't defined \"series.type\" property, or defined it incorrectly. Available values: [{{types}}].",
"label_invalid-series-property": "It seems you are trying to use inappropriate value for \"{{key}}\", or defined it incorrectly. Available values: [{{values}}].",
"label_invalid-treemap-redundant-value": "It seems you are trying to set \"value\" for container node. Check node with this properties: { id: \"{{id}}\", name: \"{{name}}\" }",
"label_invalid-treemap-missing-value": "It seems you are trying to use node without \"value\". Check node with this properties: { id: \"{{id}}\", name: \"{{name}}\" }"
"label_invalid-treemap-missing-value": "It seems you are trying to use node without \"value\". Check node with this properties: { id: \"{{id}}\", name: \"{{name}}\" }",
"label_invalid-y-axis-index": "It seems you are trying to use inappropriate index for Y axis: \"{{index}}\""
},
"highcharts": {
"reset-zoom-title": "Reset zoom",
Expand Down
6 changes: 2 additions & 4 deletions src/i18n/keysets/ru.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,10 @@
"error": "Ошибка",
"legend-series-hide": "Скрыть все линии",
"legend-series-show": "Показать все линии",

"loading": "Загрузка",

"tooltip-point-format-size": "Размер",
"tooltip-sum": "Сумма",
"tooltip-rest": "Остальные",

"error-incorrect-key-value-intro": "Некорректный формат объекта переданного как значение в",
"error-incorrect-key": ", ключи объекта должны быть преобразуемы в целое число",
"error-incorrect-value": ", значением объекта может быть либо строка, либо функция возвращающая строку"
Expand All @@ -38,7 +35,8 @@
"label_invalid-series-type": "Похоже, что вы не указали значение \"series.type\" или указали его неверно. Доступные значения: [{{types}}].",
"label_invalid-series-property": "Похоже, что вы пытаетесь использовать недопустимое значение для \"{{key}}\", или указали его неверно. Доступные значения: [{{values}}].",
"label_invalid-treemap-redundant-value": "Похоже, что вы пытаетесь установить значение \"value\" для узла, используемого в качестве контейнера. Проверьте узел с этими свойствами: { id: \"{{id}}\", name: \"{{name}}\" }",
"label_invalid-treemap-missing-value": "Похоже, что вы пытаетесь использовать узел без значения \"value\". Проверьте узел с этими свойствами: { id: \"{{id}}\", name: \"{{name}}\" }"
"label_invalid-treemap-missing-value": "Похоже, что вы пытаетесь использовать узел без значения \"value\". Проверьте узел с этими свойствами: { id: \"{{id}}\", name: \"{{name}}\" }",
"label_invalid-y-axis-index": "Похоже, что вы пытаетесь использовать некорректный индекс для оси Y: \"{{index}}\""
},
"highcharts": {
"reset-zoom-title": "Сбросить увеличение",
Expand Down
22 changes: 21 additions & 1 deletion src/plugins/d3/__stories__/Showcase.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,13 @@ import {settings} from '../../../libs';
import {Basic as BasicArea} from '../examples/area/Basic';
import {PercentStackingArea} from '../examples/area/PercentStacking';
import {StackedArea} from '../examples/area/StackedArea';
import {TwoYAxis as AreaTwoYAxis} from '../examples/area/TwoYAxis';
import {BasicBarXChart} from '../examples/bar-x/Basic';
import {DataLabels as BarXDataLabels} from '../examples/bar-x/DataLabels';
import {GroupedColumns} from '../examples/bar-x/GroupedColumns';
import {PercentStackColumns} from '../examples/bar-x/PercentStack';
import {StackedColumns} from '../examples/bar-x/StackedColumns';
import {TwoYAxis as BarXTwoYAxis} from '../examples/bar-x/TwoYAxis';
import {Basic as BasicBarY} from '../examples/bar-y/Basic';
import {GroupedColumns as GroupedColumnsBarY} from '../examples/bar-y/GroupedColumns';
import {PercentStackingBars} from '../examples/bar-y/PercentStacking';
Expand All @@ -23,9 +25,11 @@ import {Basic as BasicLine} from '../examples/line/Basic';
import {DataLabels as LineWithDataLabels} from '../examples/line/DataLabels';
import {LineWithMarkers} from '../examples/line/LineWithMarkers';
import {LinesWithShapes} from '../examples/line/Shapes';
import {TwoYAxis as LineTwoYAxis} from '../examples/line/TwoYAxis';
import {BasicPie} from '../examples/pie/Basic';
import {Donut} from '../examples/pie/Donut';
import {Basic as BasicScatter} from '../examples/scatter/Basic';
import {TwoYAxis as ScatterTwoYAxis} from '../examples/scatter/TwoYAxis';
import {D3Plugin} from '../index';

const ShowcaseStory = () => {
Expand Down Expand Up @@ -62,6 +66,10 @@ const ShowcaseStory = () => {
<Text variant="subheader-1">Lines with different shapes</Text>
<LinesWithShapes />
</Col>
<Col s={12} m={12} l={6}>
<Text variant="subheader-1">Line with two Y axis</Text>
<LineTwoYAxis />
</Col>
</Row>
<Row space={1}>
<Text variant="header-2">Area charts</Text>
Expand All @@ -79,6 +87,10 @@ const ShowcaseStory = () => {
<Text variant="subheader-1">Stacked percentage areas</Text>
<PercentStackingArea />
</Col>
<Col s={12} m={12}>
<Text variant="subheader-1">Dual Y axis</Text>
<AreaTwoYAxis />
</Col>
</Row>
<Row space={1}>
<Text variant="header-2">Bar-x charts</Text>
Expand All @@ -104,6 +116,10 @@ const ShowcaseStory = () => {
<Text variant="subheader-1">Bar-x chart with data labels</Text>
<BarXDataLabels />
</Col>
<Col s={12} m={12}>
<Text variant="subheader-1">Dual Y axis</Text>
<BarXTwoYAxis />
</Col>
</Row>
<Row space={1}>
<Text variant="header-2">Bar-y charts</Text>
Expand Down Expand Up @@ -143,10 +159,14 @@ const ShowcaseStory = () => {
<Text variant="header-2">Scatter charts</Text>
</Row>
<Row space={3}>
<Col s={12}>
<Col s={12} m={12} l={6}>
<Text variant="subheader-1">Basic scatter</Text>
<BasicScatter />
</Col>
<Col s={12} m={12} l={6}>
<Text variant="subheader-1">Scatter chart with two Y axis</Text>
<ScatterTwoYAxis />
</Col>
</Row>
<Row space={1}>
<Text variant="header-2">Combined charts</Text>
Expand Down
68 changes: 68 additions & 0 deletions src/plugins/d3/examples/area/TwoYAxis.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import React from 'react';

import {dateTime} from '@gravity-ui/date-utils';

import {ChartKit} from '../../../../components/ChartKit';
import type {ChartKitWidgetData} from '../../../../types';
import {ExampleWrapper} from '../ExampleWrapper';
import marsWeatherData from '../mars-weather';

export const TwoYAxis = () => {
const data = marsWeatherData as any[];
const pressureData = data.map((d) => ({
x: dateTime({input: d.terrestrial_date, format: 'YYYY-MM-DD'}).valueOf(),
y: d.pressure,
}));

const tempData = data.map((d) => ({
x: dateTime({input: d.terrestrial_date, format: 'YYYY-MM-DD'}).valueOf(),
y: d.max_temp - d.min_temp,
}));

const widgetData: ChartKitWidgetData = {
series: {
data: [
{
type: 'area',
data: pressureData,
name: 'Pressure',
yAxis: 0,
},
{
type: 'area',
data: tempData,
name: 'Temperature range',
yAxis: 1,
},
],
},
yAxis: [
{
title: {
text: 'Pressure',
},
},
{
title: {
text: 'Temperature range',
},
},
],
xAxis: {
type: 'datetime',
title: {
text: 'Terrestrial date',
},
ticks: {pixelInterval: 200},
},
title: {
text: 'Mars weather',
},
};

return (
<ExampleWrapper>
<ChartKit type="d3" data={widgetData} />
</ExampleWrapper>
);
};
68 changes: 68 additions & 0 deletions src/plugins/d3/examples/bar-x/TwoYAxis.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import React from 'react';

import {dateTime} from '@gravity-ui/date-utils';

import {ChartKit} from '../../../../components/ChartKit';
import type {ChartKitWidgetData} from '../../../../types';
import {ExampleWrapper} from '../ExampleWrapper';
import marsWeatherData from '../mars-weather';

export const TwoYAxis = () => {
const data = marsWeatherData as any[];
const pressureData = data.map((d) => ({
x: dateTime({input: d.terrestrial_date, format: 'YYYY-MM-DD'}).valueOf(),
y: d.pressure,
}));

const tempData = data.map((d) => ({
x: dateTime({input: d.terrestrial_date, format: 'YYYY-MM-DD'}).valueOf(),
y: d.max_temp - d.min_temp,
}));

const widgetData: ChartKitWidgetData = {
series: {
data: [
{
type: 'bar-x',
data: pressureData,
name: 'Pressure',
yAxis: 0,
},
{
type: 'bar-x',
data: tempData,
name: 'Temperature range',
yAxis: 1,
},
],
},
yAxis: [
{
title: {
text: 'Pressure',
},
},
{
title: {
text: 'Temperature range',
},
},
],
xAxis: {
type: 'datetime',
title: {
text: 'Terrestrial date',
},
ticks: {pixelInterval: 200},
},
title: {
text: 'Mars weather',
},
};

return (
<ExampleWrapper>
<ChartKit type="d3" data={widgetData} />
</ExampleWrapper>
);
};
68 changes: 68 additions & 0 deletions src/plugins/d3/examples/line/TwoYAxis.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import React from 'react';

import {dateTime} from '@gravity-ui/date-utils';

import {ChartKit} from '../../../../components/ChartKit';
import type {ChartKitWidgetData} from '../../../../types';
import {ExampleWrapper} from '../ExampleWrapper';
import marsWeatherData from '../mars-weather';

export const TwoYAxis = () => {
const data = marsWeatherData as any[];
const minTempData = data.map((d) => ({
x: dateTime({input: d.terrestrial_date, format: 'YYYY-MM-DD'}).valueOf(),
y: d.min_temp,
}));

const maxTempData = data.map((d) => ({
x: dateTime({input: d.terrestrial_date, format: 'YYYY-MM-DD'}).valueOf(),
y: d.max_temp,
}));

const widgetData: ChartKitWidgetData = {
series: {
data: [
{
type: 'line',
data: minTempData,
name: 'Min Temperature',
yAxis: 0,
},
{
type: 'line',
data: maxTempData,
name: 'Max Temperature',
yAxis: 1,
},
],
},
yAxis: [
{
title: {
text: 'Min',
},
},
{
title: {
text: 'Max',
},
},
],
xAxis: {
type: 'datetime',
title: {
text: 'Terrestrial date',
},
ticks: {pixelInterval: 200},
},
title: {
text: 'Mars weather',
},
};

return (
<ExampleWrapper>
<ChartKit type="d3" data={widgetData} />
</ExampleWrapper>
);
};
Loading
Loading