fix: some series impovement + sankey series

.storybook/theme.ts

@@ -26,7 +26,7 @@ export const CloudThemeLight = create({
     inputTextColor: 'black',
     inputBorderRadius: 4,
 
-    brandUrl: 'https://github.com/gravity-ui/uikit',
+    brandUrl: 'https://github.com/gravity-ui/charts',
     brandTitle: `<div style="font-size: 18px; color: #027bf3; font-weight: 600; margin-top: -6px; margin-bottom: 2px;">Gravity UI</div>
                 <div style="font-size: 14px;color: #7d7d7d;font-weight: 400;">Charts</div>`,
 });

README.md

@@ -1,4 +1,4 @@
-# @gravity-ui/charts · [![npm package](https://img.shields.io/npm/v/@gravity-ui/charts)](https://www.npmjs.com/package/@gravity-ui/charts) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/charts/.github/workflows/ci.yml?label=CI&logo=github)](https://github.com/gravity-ui/charts/actions/workflows/ci.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.gravity-ui.com/charts/)
+# Gravity Charts · [![npm package](https://img.shields.io/npm/v/@gravity-ui/charts)](https://www.npmjs.com/package/@gravity-ui/charts) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/charts/.github/workflows/ci.yml?label=CI&logo=github)](https://github.com/gravity-ui/charts/actions/workflows/ci.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.gravity-ui.com/charts/)
 
 > [!WARNING]
 > The library may have major changes in minor releases while it is on version `0.*.*`.

docs/diplodoc/index.yaml

@@ -1,7 +1,7 @@
-title: Gravity UI Charts
+title: Gravity Charts
 base: ./
 meta:
-  title: Gravity UI Charts
+  title: Gravity Charts
   noIndex: true
 links:
   - title: Overview

docs/diplodoc/pages/overview.md

@@ -1,16 +1,16 @@
 # Overview
 
-## About Gravity UI Charts
+## About Gravity Charts
 
-**Gravity UI Charts** is a charting library built with [D3](https://d3js.org/) and [React](https://react.dev/). It's designed as part of the [Gravity UI](https://gravity-ui.com/) ecosystem and provides powerful data visualization capabilities for modern web applications through simple configuration objects.
+**Gravity Charts** is a charting library built with [D3](https://d3js.org/) and [React](https://react.dev/). It's designed as part of the [Gravity UI](https://gravity-ui.com/) ecosystem and provides powerful data visualization capabilities for modern web applications through simple configuration objects.
 
 {% note warning %}
 
 While the library is in version `0.*.*`, minor releases may include incompatible changes to the API.
 
 {% endnote %}
 
-## What you can already do with Gravity UI Charts
+## What you can already do with Gravity Charts
 
 We have already implemented support for the main chart types:
 

package.json

@@ -60,6 +60,7 @@
     "@gravity-ui/date-utils": "^2.5.4",
     "@gravity-ui/i18n": "^1.6.0",
     "d3": "^7.9.0",
+    "d3-sankey": "^0.12.3",
     "lodash": "^4.17.21",
     "tslib": "^2.6.2"
   },
@@ -93,6 +94,7 @@
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/d3": "^7.4.3",
+    "@types/d3-sankey": "^0.12.4",
     "@types/d3-selection": "^3.0.11",
     "@types/jest": "^29.5.12",
     "@types/lodash": "^4.17.12",

src/__stories__/Sankey/Sankey.stories.tsx

@@ -0,0 +1,30 @@
+import type {Meta, StoryObj} from '@storybook/react';
+
+import {ChartStory} from '../ChartStory';
+import {sankeyPlaygroundData} from '../__data__';
+
+const meta: Meta<typeof ChartStory> = {
+    title: 'Sankey',
+    component: ChartStory,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ChartStory>;
+
+export const SankeyPlayground = {
+    name: 'Playground',
+    args: {
+        data: sankeyPlaygroundData,
+        wrapperProps: {
+            styles: {
+                height: 560,
+            },
+        },
+    },
+    argTypes: {
+        data: {
+            control: 'object',
+        },
+    },
+} satisfies Story;

src/__stories__/Showcase.stories.tsx

@@ -29,8 +29,10 @@ import {
     lineTwoYAxisData,
     pieBasicData,
     pieDonutData,
+    sankeyPlaygroundData,
     scatterBasicData,
     scatterTwoYAxisData,
+    treemapPlaygroundData,
 } from './__data__';
 
 const ShowcaseStory = () => {
@@ -171,15 +173,19 @@ const ShowcaseStory = () => {
                         <ChartStory data={scatterTwoYAxisData} />
                     </Col>
                 </Row>
-                {/* <Row space={1}>
-                    <Text variant="header-2">Combined charts</Text>
+                <Row space={1}>
+                    <Text variant="header-2">Other</Text>
                 </Row>
-                <Row space={3} style={{minHeight: 280}}>
-                    <Col s={12}>
-                        <Text variant="subheader-1">Line + Bar-X</Text>
-                        <LineAndBarXCombinedChart />
+                <Row space={3}>
+                    <Col s={12} m={6} l={6}>
+                        <Text variant="subheader-1">Treemap</Text>
+                        <ChartStory data={treemapPlaygroundData} />
                     </Col>
-                </Row> */}
+                    <Col s={12} m={6} l={6}>
+                        <Text variant="subheader-1">Sankey</Text>
+                        <ChartStory data={sankeyPlaygroundData} />
+                    </Col>
+                </Row>
             </Container>
         </div>
     );

src/__stories__/__data__/bar-x/playground.ts

@@ -18,6 +18,7 @@ function prepareData(): ChartData {
                     type: 'bar-x',
                     data,
                     name: 'Games released',
+                    borderRadius: 8,
                 },
             ],
         },
@@ -42,6 +43,20 @@ function prepareData(): ChartData {
                 ticks: {
                     pixelInterval: 120,
                 },
+                plotLines: [
+                    {
+                        value: 100,
+                        width: 2,
+                        color: 'red',
+                        dashStyle: 'Dash',
+                        layerPlacement: 'after',
+                    },
+                    {
+                        value: 200,
+                        width: 1,
+                        layerPlacement: 'before',
+                    },
+                ],
             },
         ],
         chart: {

src/__stories__/__data__/bar-y/playground.ts

@@ -21,6 +21,7 @@ function prepareData(): ChartData {
                     dataLabels: {
                         enabled: true,
                     },
+                    borderRadius: 4,
                 },
             ],
         },

src/__stories__/__data__/index.ts

@@ -7,3 +7,4 @@ export * from './pie';
 export * from './scatter';
 export * from './treemap';
 export * from './waterfall';
+export * from './sankey';

src/__stories__/__data__/pie/user-styles.ts

@@ -8,20 +8,22 @@ export const pieUserStylesData: ChartData = {
                 borderRadius: 5,
                 borderWidth: 3,
                 center: ['25%', null],
-                radius: '75%',
-                dataLabels: {enabled: false},
+                dataLabels: {enabled: true},
                 data: [
                     {
                         name: 'One 1',
                         value: 50,
+                        radius: '80%',
                     },
                     {
                         name: 'Two 1',
                         value: 20,
+                        radius: '90%',
                     },
                     {
                         name: 'Three 1',
                         value: 90,
+                        radius: '100%',
                     },
                 ],
             },

src/__stories__/__data__/sankey/index.ts

@@ -0,0 +1 @@
+export * from './playground';

src/__stories__/__data__/sankey/playground.ts

@@ -0,0 +1,46 @@
+import {groups, sort} from 'd3';
+
+import type {ChartData} from '../../../types';
+import nintendoGames from '../nintendoGames';
+
+function prepareData(): ChartData {
+    const gamesWithScore = nintendoGames.filter((game) => Math.round(game.user_score ?? 0));
+    const gamesByPlatform = groups(gamesWithScore, (item) => item.platform);
+    const data = gamesByPlatform.map(([platform, games]) => {
+        const links = sort(
+            groups(games, (game) => Math.round(game.user_score ?? 0)).map(([score, items]) => ({
+                name: String(score),
+                value: items.length,
+            })),
+            (d) => d.name,
+        );
+
+        return {
+            name: platform,
+            links,
+        };
+    });
+
+    const scores = sort(
+        Array.from(new Set(gamesWithScore.map((game) => Math.round(game.user_score ?? 0)))),
+        (d) => d,
+    ).map((d) => ({name: String(d), links: []}));
+
+    return {
+        title: {
+            text: 'Average user score by platform',
+        },
+        tooltip: {enabled: true},
+        series: {
+            data: [
+                {
+                    type: 'sankey',
+                    data: [...data, ...scores],
+                    name: 'Series 1',
+                },
+            ],
+        },
+    };
+}
+
+export const sankeyPlaygroundData = prepareData();