@gravity-ui/chartkit 5.17.1 → 5.18.0

package/build/plugins/d3/renderer/D3Widget.js

@@ -1,81 +1,46 @@
 import React from 'react';
+import { Chart } from '@gravity-ui/charts';
 import afterFrame from 'afterframe';
-import { select } from 'd3';
-import debounce from 'lodash/debounce';
-import { getRandomCKId, measurePerformance } from '../../../utils';
-import { Chart } from './components';
-import { validateData } from './validation';
+import { settings } from '../../../libs';
+import { measurePerformance } from '../../../utils';
+import { withSplitPane } from './withSplitPane/withSplitPane';
+const ChartWithSplitPane = withSplitPane(Chart);
 const D3Widget = React.forwardRef(function D3Widget(props, forwardedRef) {
-    const { data, onLoad, onRender, onChartLoad } = props;
-    const validatedData = React.useRef();
-    const ref = React.useRef(null);
-    const debounced = React.useRef();
-    const [dimensions, setDimensions] = React.useState();
+    const { data, tooltip, onLoad, onRender, onChartLoad } = props;
+    const lang = settings.get('lang');
     const performanceMeasure = React.useRef(measurePerformance());
-    const handleResize = React.useCallback(() => {
-        var _a;
-        const parentElement = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.parentElement;
-        if (parentElement) {
-            const { width, height } = parentElement.getBoundingClientRect();
-            setDimensions({ width, height });
+    const chartRef = React.useRef(null);
+    const ChartComponent = (tooltip === null || tooltip === void 0 ? void 0 : tooltip.splitted) ? ChartWithSplitPane : Chart;
+    const handleResize = React.useCallback(({ dimensions }) => {
+        if (!dimensions) {
+            return;
         }
-    }, []);
-    const debuncedHandleResize = React.useMemo(() => {
-        var _a;
-        (_a = debounced.current) === null || _a === void 0 ? void 0 : _a.cancel();
-        debounced.current = debounce(handleResize, 200);
-        return debounced.current;
-    }, [handleResize]);
+        if (!performanceMeasure.current) {
+            performanceMeasure.current = measurePerformance();
+        }
+        afterFrame(() => {
+            var _a;
+            const renderTime = (_a = performanceMeasure.current) === null || _a === void 0 ? void 0 : _a.end();
+            onRender === null || onRender === void 0 ? void 0 : onRender({
+                renderTime,
+            });
+            onLoad === null || onLoad === void 0 ? void 0 : onLoad({
+                widgetRendering: renderTime,
+            });
+            performanceMeasure.current = null;
+        });
+    }, [onRender, onLoad]);
     React.useImperativeHandle(forwardedRef, () => ({
         reflow() {
-            debuncedHandleResize();
+            var _a;
+            (_a = chartRef.current) === null || _a === void 0 ? void 0 : _a.reflow();
         },
-    }), [debuncedHandleResize]);
-    React.useEffect(() => {
-        const selection = select(window);
-        // https://github.com/d3/d3-selection/blob/main/README.md#handling-events
-        const eventName = `resize.${getRandomCKId()}`;
-        selection.on(eventName, debuncedHandleResize);
-        return () => {
-            // https://d3js.org/d3-selection/events#selection_on
-            selection.on(eventName, null);
-        };
-    }, [debuncedHandleResize]);
-    React.useEffect(() => {
-        // dimensions initialize
-        debuncedHandleResize();
-    }, [debuncedHandleResize]);
-    if (validatedData.current !== data) {
-        validateData(data);
-        validatedData.current = data;
-    }
+    }), []);
     React.useLayoutEffect(() => {
         if (onChartLoad) {
             onChartLoad({});
         }
     }, [onChartLoad]);
-    React.useLayoutEffect(() => {
-        if (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) {
-            if (!performanceMeasure.current) {
-                performanceMeasure.current = measurePerformance();
-            }
-            afterFrame(() => {
-                var _a;
-                const renderTime = (_a = performanceMeasure.current) === null || _a === void 0 ? void 0 : _a.end();
-                onRender === null || onRender === void 0 ? void 0 : onRender({
-                    renderTime,
-                });
-                onLoad === null || onLoad === void 0 ? void 0 : onLoad({
-                    widgetRendering: renderTime,
-                });
-                performanceMeasure.current = null;
-            });
-        }
-    }, [data, onRender, onLoad, dimensions]);
-    return (React.createElement("div", { ref: ref, style: {
-            width: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) || '100%',
-            height: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) || '100%',
-            position: 'relative',
-        } }, (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) && (dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) && (React.createElement(Chart, { width: dimensions.width, height: dimensions.height, data: data }))));
+    return React.createElement(ChartComponent, { ref: chartRef, data: data, lang: lang, onResize: handleResize });
 });
 export default D3Widget;

package/build/plugins/d3/renderer/withSplitPane/TooltipContent.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ChartTooltipContentProps } from '@gravity-ui/charts';
+export type TooltipContentRef = {
+    redraw: (updates?: Omit<ChartTooltipContentProps, 'renderer'>) => void;
+};
+type TooltipContentProps = Pick<ChartTooltipContentProps, 'renderer'>;
+export declare const TooltipContent: React.ForwardRefExoticComponent<TooltipContentProps & React.RefAttributes<TooltipContentRef>>;
+export {};

package/build/plugins/d3/renderer/withSplitPane/TooltipContent.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ChartTooltipContent } from '@gravity-ui/charts';
+export const TooltipContent = React.forwardRef(function TooltipContent(props, forwardedRef) {
+    const { renderer } = props;
+    const [tooltipProps, setTooltipProps] = React.useState();
+    React.useImperativeHandle(forwardedRef, () => ({
+        redraw(updates) {
+            setTooltipProps(updates);
+        },
+    }), []);
+    return React.createElement(ChartTooltipContent, Object.assign({}, tooltipProps, { renderer: renderer }));
+});

package/build/plugins/d3/renderer/withSplitPane/useWithSplitPaneState.d.ts

@@ -0,0 +1,19 @@
+import type { SplitLayoutType } from '../../../../components/SplitPane';
+export declare const RESIZER_HEIGHT = 24;
+type WithSplitPaneState = {
+    allowResize: boolean;
+    tooltipHeight: number;
+    setTooltipHeight: (value: number) => void;
+    split: SplitLayoutType;
+    setSplit: (value: SplitLayoutType) => void;
+    size: number | string;
+    setSize: (value: number | string) => void;
+    maxSize?: number;
+    minSize?: number;
+};
+type UseWithSplitPaneProps = {
+    container: HTMLDivElement | null;
+};
+export declare function getVerticalSize(): number;
+export declare function useWithSplitPaneState(props: UseWithSplitPaneProps): WithSplitPaneState;
+export {};

package/build/plugins/d3/renderer/withSplitPane/useWithSplitPaneState.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { SplitLayout } from '../../../../components/SplitPane';
+import { IS_WINDOW_AVAILABLE } from '../../../../constants';
+const CHART_SECTION_PERCENTAGE = 0.6;
+export const RESIZER_HEIGHT = 24;
+function getInitialSplit() {
+    if (!IS_WINDOW_AVAILABLE) {
+        return SplitLayout.HORIZONTAL;
+    }
+    return window.innerWidth > window.innerHeight ? SplitLayout.VERTICAL : SplitLayout.HORIZONTAL;
+}
+export function getVerticalSize() {
+    return window.innerWidth * CHART_SECTION_PERCENTAGE;
+}
+function getInitialSize(split) {
+    const defaultSize = `calc(100% - ${RESIZER_HEIGHT}px)`;
+    if (!IS_WINDOW_AVAILABLE) {
+        return defaultSize;
+    }
+    return split === SplitLayout.VERTICAL ? getVerticalSize() : defaultSize;
+}
+export function useWithSplitPaneState(props) {
+    const { container } = props;
+    const [tooltipHeight, setTooltipHeight] = React.useState(0);
+    const [split, setSplit] = React.useState(getInitialSplit());
+    const [size, setSize] = React.useState(getInitialSize(split));
+    const allowResize = split === SplitLayout.HORIZONTAL;
+    let maxSize;
+    let minSize;
+    if (IS_WINDOW_AVAILABLE && container && split === SplitLayout.HORIZONTAL) {
+        const containerHeight = container.getBoundingClientRect().height;
+        maxSize = containerHeight - RESIZER_HEIGHT - tooltipHeight;
+        minSize = containerHeight / 3;
+    }
+    return {
+        allowResize,
+        maxSize,
+        minSize,
+        tooltipHeight,
+        setTooltipHeight,
+        split,
+        setSplit,
+        size,
+        setSize,
+    };
+}

package/build/plugins/d3/renderer/withSplitPane/withSplitPane.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Chart } from '@gravity-ui/charts';
+import type { ChartProps, ChartRef } from '@gravity-ui/charts';
+export declare function withSplitPane(ChartComponent: typeof Chart): React.ForwardRefExoticComponent<ChartProps & React.RefAttributes<ChartRef>>;

package/build/plugins/d3/renderer/withSplitPane/withSplitPane.js

@@ -0,0 +1,100 @@
+import { __rest } from "tslib";
+import React from 'react';
+import { getComponentName, useResizeObserver } from '@gravity-ui/uikit';
+import { SplitLayout, StyledSplitPane, mapScreenOrientationTypeToSplitLayout, } from '../../../../components/SplitPane';
+import { IS_SCREEN_ORIENTATION_AVAILABLE, IS_WINDOW_AVAILABLE } from '../../../../constants';
+import { usePrevious } from '../../../../hooks';
+import { isScreenOrientationEventType } from '../../../../utils';
+import { TooltipContent } from './TooltipContent';
+import { RESIZER_HEIGHT, getVerticalSize, useWithSplitPaneState } from './useWithSplitPaneState';
+export function withSplitPane(ChartComponent) {
+    const componentName = getComponentName(ChartComponent);
+    const component = React.forwardRef(function WithSplitPaneComponent(props, _ref) {
+        var _a;
+        const { data } = props, restProps = __rest(props, ["data"]);
+        const containerRef = React.useRef(null);
+        const tooltipContainerRef = React.useRef(null);
+        const chartRef = React.useRef(null);
+        const tooltipRef = React.useRef(null);
+        const { allowResize, minSize, maxSize, tooltipHeight, split, size, setTooltipHeight, setSplit, setSize, } = useWithSplitPaneState({
+            container: containerRef.current,
+        });
+        const prevTooltipHeight = usePrevious(tooltipHeight);
+        const prevSplit = usePrevious(split);
+        if (prevSplit && split !== prevSplit && split === SplitLayout.VERTICAL) {
+            setSize(getVerticalSize());
+        }
+        else if (split === SplitLayout.HORIZONTAL &&
+            containerRef.current &&
+            prevTooltipHeight === 0 &&
+            tooltipHeight !== prevTooltipHeight) {
+            const containerHeight = containerRef.current.getBoundingClientRect().height;
+            if (containerHeight - RESIZER_HEIGHT === size) {
+                setSize(containerHeight - RESIZER_HEIGHT - tooltipHeight);
+                (_a = chartRef.current) === null || _a === void 0 ? void 0 : _a.reflow();
+            }
+        }
+        const handleTooltipContentResize = React.useCallback(() => {
+            if (!tooltipContainerRef.current) {
+                return;
+            }
+            const nextTooltipHeight = tooltipContainerRef.current.getBoundingClientRect().height;
+            setTooltipHeight(nextTooltipHeight);
+        }, [setTooltipHeight]);
+        useResizeObserver({
+            ref: tooltipContainerRef,
+            onResize: handleTooltipContentResize,
+        });
+        const resultData = React.useMemo(() => {
+            var _a, _b, _c;
+            const userPointerMoveHandler = (_b = (_a = data.chart) === null || _a === void 0 ? void 0 : _a.events) === null || _b === void 0 ? void 0 : _b.pointermove;
+            const pointerMoveHandler = (pointerMoveData, event) => {
+                var _a;
+                (_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.redraw(pointerMoveData);
+                userPointerMoveHandler === null || userPointerMoveHandler === void 0 ? void 0 : userPointerMoveHandler(pointerMoveData, event);
+            };
+            return Object.assign(Object.assign({}, data), { chart: Object.assign(Object.assign({}, data.chart), { events: Object.assign(Object.assign({}, (_c = data.chart) === null || _c === void 0 ? void 0 : _c.events), { pointermove: pointerMoveHandler }) }), tooltip: Object.assign(Object.assign({}, data.tooltip), { enabled: false }) });
+        }, [data]);
+        const handleOrientationChange = React.useCallback(() => {
+            const deviceWidth = window.innerWidth;
+            const deviceHeight = window.innerHeight;
+            const nextSplit = deviceWidth > deviceHeight ? SplitLayout.VERTICAL : SplitLayout.HORIZONTAL;
+            setSplit(nextSplit);
+        }, [setSplit]);
+        const handleScreenOrientationChange = React.useCallback((e) => {
+            const type = e.target && 'type' in e.target && e.target.type;
+            if (!isScreenOrientationEventType(type)) {
+                return;
+            }
+            setSplit(mapScreenOrientationTypeToSplitLayout(type));
+        }, [setSplit]);
+        const handleSizeChange = React.useCallback((nextSize) => {
+            var _a;
+            (_a = chartRef.current) === null || _a === void 0 ? void 0 : _a.reflow();
+            if (split === SplitLayout.HORIZONTAL) {
+                setSize(nextSize);
+            }
+        }, [split, setSize]);
+        React.useLayoutEffect(() => {
+            if (IS_SCREEN_ORIENTATION_AVAILABLE) {
+                screen.orientation.addEventListener('change', handleScreenOrientationChange);
+            }
+            else if (IS_WINDOW_AVAILABLE) {
+                window.addEventListener('orientationchange', handleOrientationChange);
+            }
+            return () => {
+                if (IS_SCREEN_ORIENTATION_AVAILABLE) {
+                    screen.orientation.removeEventListener('change', handleScreenOrientationChange);
+                }
+                else if (IS_WINDOW_AVAILABLE) {
+                    window.removeEventListener('orientationchange', handleOrientationChange);
+                }
+            };
+        }, [handleOrientationChange, handleScreenOrientationChange]);
+        return (React.createElement("div", { ref: containerRef, style: { position: 'relative', height: '100%' } },
+            React.createElement(StyledSplitPane, { allowResize: allowResize, maxSize: maxSize, minSize: minSize, size: size, split: split, onChange: handleSizeChange, paneOneRender: () => (React.createElement(ChartComponent, Object.assign({}, restProps, { ref: chartRef, data: resultData }))), paneTwoRender: () => (React.createElement("div", { ref: tooltipContainerRef },
+                    React.createElement(TooltipContent, { ref: tooltipRef, renderer: resultData.tooltip.renderer }))) })));
+    });
+    component.displayName = `withSplitPane(${componentName})`;
+    return component;
+}

package/build/plugins/d3/types.d.ts

@@ -1,4 +1,4 @@
-import type { ChartKitWidgetData } from '../../types/widget-data';
+import type { ChartData } from '@gravity-ui/charts';
 export type D3WidgetData = {
-    data: ChartKitWidgetData;
+    data: ChartData;
 };

package/build/plugins/highcharts/renderer/HighchartsWidget.d.ts

@@ -15,8 +15,8 @@ declare const HighchartsWidget: React.ForwardRefExoticComponent<{
     hoistConfigError?: boolean | undefined;
     nonBodyScroll?: boolean | undefined;
     splitTooltip?: boolean | undefined;
-    paneSplitOrientation?: import("react-split-pane").Split | undefined;
-    onSplitPaneOrientationChange?: ((orientation: import("react-split-pane").Split) => void) | undefined;
+    paneSplitOrientation?: import("../../../components/SplitPane").SplitLayoutType | undefined;
+    onSplitPaneOrientationChange?: ((orientation: import("../../../components/SplitPane").SplitLayoutType) => void) | undefined;
     onChange?: ((data: {
         type: "PARAMS_CHANGED";
         data: {

package/build/plugins/highcharts/renderer/components/withSplitPane/withSplitPane.js

@@ -2,10 +2,10 @@
 import React from 'react';
 import debounce from 'lodash/debounce';
 import get from 'lodash/get';
+import { StyledSplitPane } from '../../../../../components/SplitPane';
 import { getRandomCKId } from '../../../../../utils';
 import { cn } from '../../../../../utils/cn';
 import { chartTypesWithoutCrosshair } from '../../helpers/config/config';
-import { StyledSplitPane } from '../StyledSplitPane/StyledSplitPane';
 import './WithSplitPane.css';
 const b = cn('with-split-pane');
 const PANE_RESIZER_HEIGHT = 24;

package/build/types/index.js

@@ -1 +1,2 @@
+// TODO: remove in the next major. This types should be consumed directly from '@gravity-ui/charts'
 export * from './widget-data';

package/build/types/widget-data/pie.d.ts

@@ -1,4 +1,4 @@
-import { BaseType } from 'd3';
+import type { BaseType } from 'd3';
 import { SeriesType } from '../../constants';
 import type { BaseSeries, BaseSeriesData } from './base';
 import { ChartKitWidgetLegend, RectLegendSymbolOptions } from './legend';

package/build/types/widget.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { Split } from 'react-split-pane';
+import type { SplitLayoutType } from '../components/SplitPane/types';
 import type { Highcharts, HighchartsWidgetData, StringParams } from '../plugins/highcharts/types';
 import type { IndicatorWidgetData } from '../plugins/indicator/types';
 import type { CustomTooltipProps, Yagr, YagrWidgetData } from '../plugins/yagr/types';
@@ -21,8 +21,8 @@ export interface ChartKitWidget {
         hoistConfigError?: boolean;
         nonBodyScroll?: boolean;
         splitTooltip?: boolean;
-        paneSplitOrientation?: Split;
-        onSplitPaneOrientationChange?: (orientation: Split) => void;
+        paneSplitOrientation?: SplitLayoutType;
+        onSplitPaneOrientationChange?: (orientation: SplitLayoutType) => void;
         onChange?: (data: {
             type: 'PARAMS_CHANGED';
             data: {
@@ -35,5 +35,8 @@ export interface ChartKitWidget {
     d3: {
         data: ChartKitWidgetData;
         widget: never;
+        tooltip?: {
+            splitted?: boolean;
+        };
     };
 }

package/build/utils/index.d.ts

@@ -1,3 +1,4 @@
 export { getRandomCKId, randomString } from './common';
 export { typedMemo } from './react';
 export * from './performance';
+export * from './misc';

package/build/utils/index.js

@@ -1,3 +1,4 @@
 export { getRandomCKId, randomString } from './common';
 export { typedMemo } from './react';
 export * from './performance';
+export * from './misc';

package/build/utils/misc.d.ts

@@ -0,0 +1,2 @@
+import type { ScreenOrientationType } from '../constants';
+export declare function isScreenOrientationEventType(value: unknown): value is ScreenOrientationType;

package/build/utils/misc.js

@@ -0,0 +1,7 @@
+import { AVAILABLE_SCREEN_ORIENTATIONS } from '../constants';
+export function isScreenOrientationEventType(value) {
+    if (typeof value !== 'string') {
+        return false;
+    }
+    return AVAILABLE_SCREEN_ORIENTATIONS.includes(value);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "5.17.1",
+  "version": "5.18.0",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",
@@ -47,13 +47,12 @@
   ],
   "dependencies": {
     "@bem-react/classname": "^1.6.0",
+    "@gravity-ui/charts": "^0.4.0",
     "@gravity-ui/date-utils": "^2.1.0",
     "@gravity-ui/i18n": "^1.0.0",
     "@gravity-ui/yagr": "^4.3.4",
     "afterframe": "^1.0.2",
-    "d3": "^7.8.5",
     "lodash": "^4.17.21",
-    "react-split-pane": "^0.1.92",
     "tslib": "^2.6.2"
   },
   "devDependencies": {
@@ -64,7 +63,7 @@
     "@gravity-ui/prettier-config": "^1.1.0",
     "@gravity-ui/stylelint-config": "^4.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^6.0.0",
+    "@gravity-ui/uikit": "^6.35.2",
     "@jest/types": "^29.6.3",
     "@playwright/experimental-ct-react17": "^1.41.1",
     "@storybook/addon-actions": "^7.6.14",
@@ -84,6 +83,7 @@
     "@typescript-eslint/eslint-plugin": "^5.31.0",
     "cross-env": "^7.0.3",
     "css-loader": "^5.2.7",
+    "d3": "^7.9.0",
     "eslint": "^8.56.0",
     "gulp": "^4.0.2",
     "gulp-cli": "^2.3.0",

package/build/plugins/d3/examples/ExampleWrapper.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-type Props = {
-    children?: React.ReactNode;
-    styles?: React.CSSProperties;
-};
-export declare const ExampleWrapper: (props: Props) => React.JSX.Element;
-export {};

package/build/plugins/d3/examples/ExampleWrapper.js

@@ -1,5 +0,0 @@
-import React from 'react';
-export const ExampleWrapper = (props) => {
-    const styles = Object.assign({ height: 280 }, props.styles);
-    return React.createElement("div", { style: styles }, props.children);
-};

package/build/plugins/d3/examples/area/Basic.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const Basic: () => React.JSX.Element;

package/build/plugins/d3/examples/area/Basic.js

@@ -1,34 +0,0 @@
-import React from 'react';
-import { ChartKit } from '../../../../components/ChartKit';
-import { ExampleWrapper } from '../ExampleWrapper';
-import nintendoGames from '../nintendoGames';
-function prepareData() {
-    const games = nintendoGames.filter((d) => {
-        return d.date && d.user_score && d.genres.includes('Puzzle');
-    });
-    return [
-        {
-            name: 'User score',
-            type: 'area',
-            data: games.map((d) => {
-                return {
-                    x: Number(d.date),
-                    y: Number(d.user_score),
-                };
-            }),
-        },
-    ];
-}
-export const Basic = () => {
-    const series = prepareData();
-    const widgetData = {
-        series: {
-            data: series,
-        },
-        xAxis: {
-            type: 'datetime',
-        },
-    };
-    return (React.createElement(ExampleWrapper, null,
-        React.createElement(ChartKit, { type: "d3", data: widgetData })));
-};

package/build/plugins/d3/examples/area/NegativeValues.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const NegativeValues: () => React.JSX.Element;

package/build/plugins/d3/examples/area/NegativeValues.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import { ChartKit } from '../../../../components/ChartKit';
-import { ExampleWrapper } from '../ExampleWrapper';
-export const NegativeValues = () => {
-    const data = [
-        { x: 0, y: 10 },
-        { x: 1, y: 20 },
-        { x: 2, y: -30 },
-        { x: 3, y: 100 },
-    ];
-    const widgetData = {
-        series: {
-            data: [
-                {
-                    type: 'area',
-                    data: data,
-                    name: 'Min temperature',
-                },
-            ],
-        },
-    };
-    return (React.createElement(ExampleWrapper, null,
-        React.createElement(ChartKit, { type: "d3", data: widgetData })));
-};

package/build/plugins/d3/examples/area/PercentStacking.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const PercentStackingArea: () => React.JSX.Element;

package/build/plugins/d3/examples/area/PercentStacking.js

@@ -1,47 +0,0 @@
-import React from 'react';
-import { groups } from 'd3';
-import { ChartKit } from '../../../../components/ChartKit';
-import { ExampleWrapper } from '../ExampleWrapper';
-import nintendoGames from '../nintendoGames';
-const years = Array.from(new Set(nintendoGames.map((d) => d.date ? String(new Date(d.date).getFullYear()) : 'unknown'))).sort();
-function prepareData() {
-    const grouped = groups(nintendoGames, (d) => d.platform, (d) => (d.date ? String(new Date(d.date).getFullYear()) : 'unknown'));
-    const series = grouped.map(([platform, gamesByYear]) => {
-        const platformGames = Object.fromEntries(gamesByYear) || {};
-        return {
-            name: platform,
-            data: years.reduce((acc, year) => {
-                if (year in platformGames) {
-                    acc.push({
-                        x: year,
-                        y: platformGames[year].length,
-                    });
-                }
-                return acc;
-            }, []),
-        };
-    });
-    return { series };
-}
-export const PercentStackingArea = () => {
-    const { series } = prepareData();
-    const data = series.map((s) => {
-        return {
-            type: 'area',
-            stacking: 'percent',
-            name: s.name,
-            data: s.data,
-        };
-    });
-    const widgetData = {
-        series: {
-            data: data,
-        },
-        xAxis: {
-            type: 'category',
-            categories: years,
-        },
-    };
-    return (React.createElement(ExampleWrapper, null,
-        React.createElement(ChartKit, { type: "d3", data: widgetData })));
-};

package/build/plugins/d3/examples/area/StackedArea.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const StackedArea: () => React.JSX.Element;

package/build/plugins/d3/examples/area/StackedArea.js

@@ -1,47 +0,0 @@
-import React from 'react';
-import { groups } from 'd3';
-import { ChartKit } from '../../../../components/ChartKit';
-import { ExampleWrapper } from '../ExampleWrapper';
-import nintendoGames from '../nintendoGames';
-const years = Array.from(new Set(nintendoGames.map((d) => d.date ? String(new Date(d.date).getFullYear()) : 'unknown'))).sort();
-function prepareData() {
-    const grouped = groups(nintendoGames, (d) => d.platform, (d) => (d.date ? String(new Date(d.date).getFullYear()) : 'unknown'));
-    const series = grouped.map(([platform, gamesByYear]) => {
-        const platformGames = Object.fromEntries(gamesByYear) || {};
-        return {
-            name: platform,
-            data: years.reduce((acc, year) => {
-                if (year in platformGames) {
-                    acc.push({
-                        x: year,
-                        y: platformGames[year].length,
-                    });
-                }
-                return acc;
-            }, []),
-        };
-    });
-    return { series };
-}
-export const StackedArea = () => {
-    const { series } = prepareData();
-    const data = series.map((s) => {
-        return {
-            type: 'area',
-            stacking: 'normal',
-            name: s.name,
-            data: s.data,
-        };
-    });
-    const widgetData = {
-        series: {
-            data: data,
-        },
-        xAxis: {
-            type: 'category',
-            categories: years,
-        },
-    };
-    return (React.createElement(ExampleWrapper, null,
-        React.createElement(ChartKit, { type: "d3", data: widgetData })));
-};

package/build/plugins/d3/examples/area/TwoYAxis.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const TwoYAxis: () => React.JSX.Element;