@gravity-ui/charts 0.1.0

package/dist/esm/hooks/useShapes/pie/index.js

@@ -0,0 +1,171 @@
+import React from 'react';
+import { arc, color, select } from 'd3';
+import get from 'lodash/get';
+import { block, setEllipsisForOverflowTexts } from '../../../utils';
+import { HtmlLayer } from '../HtmlLayer';
+import { setActiveState } from '../utils';
+const b = block('d3-pie');
+export function getHaloVisibility(d) {
+    const enabled = d.data.pie.halo.enabled && d.data.hovered;
+    return enabled ? '' : 'hidden';
+}
+export function PieSeriesShapes(args) {
+    const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (!ref.current) {
+            return () => { };
+        }
+        const svgElement = select(ref.current);
+        svgElement.selectAll('*').remove();
+        const segmentSelector = `.${b('segment')}`;
+        const connectorSelector = `.${b('connector')}`;
+        const shapesSelection = svgElement
+            .selectAll('pie')
+            .data(preparedData)
+            .join('g')
+            .attr('id', (pieData) => pieData.id)
+            .attr('class', b('item'))
+            .attr('transform', (pieData) => {
+            const [x, y] = pieData.center;
+            return `translate(${x}, ${y})`;
+        })
+            .style('stroke', (pieData) => pieData.borderColor)
+            .style('stroke-width', (pieData) => pieData.borderWidth)
+            .attr('cursor', (pieData) => pieData.series.cursor);
+        // Render halo appearing outside the hovered slice
+        shapesSelection
+            .selectAll('halo')
+            .data((pieData) => {
+            if (pieData.halo.enabled) {
+                return pieData.segments;
+            }
+            return [];
+        })
+            .join('path')
+            .attr('d', (d) => {
+            const arcGenerator = arc()
+                .innerRadius(d.data.pie.innerRadius)
+                .outerRadius(d.data.pie.radius + d.data.pie.halo.size)
+                .cornerRadius(d.data.pie.borderRadius);
+            return arcGenerator(d);
+        })
+            .attr('class', b('halo'))
+            .attr('fill', (d) => d.data.color)
+            .attr('opacity', (d) => d.data.pie.halo.opacity)
+            .attr('z-index', -1)
+            .attr('visibility', getHaloVisibility);
+        // Render segments
+        shapesSelection
+            .selectAll(segmentSelector)
+            .data((pieData) => pieData.segments)
+            .join('path')
+            .attr('d', (d) => {
+            const arcGenerator = arc()
+                .innerRadius(d.data.pie.innerRadius)
+                .outerRadius(d.data.pie.radius)
+                .cornerRadius(d.data.pie.borderRadius);
+            return arcGenerator(d);
+        })
+            .attr('class', b('segment'))
+            .attr('fill', (d) => d.data.color)
+            .attr('opacity', (d) => d.data.opacity);
+        // render Labels
+        shapesSelection
+            .selectAll('text')
+            .data((pieData) => pieData.labels)
+            .join('text')
+            .text((d) => d.text)
+            .attr('class', b('label'))
+            .attr('x', (d) => d.x)
+            .attr('y', (d) => d.y)
+            .attr('text-anchor', (d) => d.textAnchor)
+            .style('font-size', (d) => d.style.fontSize)
+            .style('font-weight', (d) => d.style.fontWeight || null)
+            .style('fill', (d) => d.style.fontColor || null)
+            .call(setEllipsisForOverflowTexts, (d) => d.size.width > d.maxWidth ? d.maxWidth : Infinity);
+        // Add the polyline between chart and labels
+        shapesSelection
+            .selectAll(connectorSelector)
+            .data((pieData) => pieData.connectors)
+            .enter()
+            .append('path')
+            .attr('class', b('connector'))
+            .attr('d', (d) => d.path)
+            .attr('stroke', (d) => d.color)
+            .attr('stroke-width', 1)
+            .attr('stroke-linejoin', 'round')
+            .attr('stroke-linecap', 'round')
+            .style('fill', 'none');
+        // Render custom shapes if defined
+        shapesSelection.each(function (d, index, nodes) {
+            var _a, _b;
+            const customShape = (_b = (_a = d.series).renderCustomShape) === null || _b === void 0 ? void 0 : _b.call(_a, {
+                series: {
+                    innerRadius: d.innerRadius,
+                },
+            });
+            if (customShape) {
+                nodes[index].append(customShape);
+            }
+        });
+        const eventName = `hover-shape.pie`;
+        const hoverOptions = get(seriesOptions, 'pie.states.hover');
+        const inactiveOptions = get(seriesOptions, 'pie.states.inactive');
+        dispatcher.on(eventName, (data) => {
+            var _a, _b;
+            const selectedSeriesId = (_b = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.series) === null || _b === void 0 ? void 0 : _b.id;
+            const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
+            const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
+            shapesSelection.datum((_d, index, list) => {
+                const pieSelection = select(list[index]);
+                const haloSelection = pieSelection.selectAll(`.${b('halo')}`);
+                pieSelection
+                    .selectAll(segmentSelector)
+                    .datum((d, i, elements) => {
+                    const hovered = Boolean(hoverEnabled && d.data.series.id === selectedSeriesId);
+                    if (d.data.hovered !== hovered) {
+                        d.data.hovered = hovered;
+                        select(elements[i]).attr('fill', () => {
+                            var _a;
+                            const initialColor = d.data.color;
+                            if (d.data.hovered) {
+                                return (((_a = color(initialColor)) === null || _a === void 0 ? void 0 : _a.brighter(hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.brightness).toString()) || initialColor);
+                            }
+                            return initialColor;
+                        });
+                        const currentSegmentHalo = haloSelection.nodes()[i];
+                        select(currentSegmentHalo).attr('visibility', getHaloVisibility);
+                    }
+                    setActiveState({
+                        element: elements[i],
+                        state: inactiveOptions,
+                        active: Boolean(!inactiveEnabled ||
+                            !selectedSeriesId ||
+                            selectedSeriesId === d.data.series.id),
+                        datum: d.data,
+                    });
+                    return d;
+                });
+                const labelSelection = pieSelection.selectAll('tspan');
+                const connectorSelection = pieSelection.selectAll(connectorSelector);
+                labelSelection.merge(connectorSelection).datum((d, i, elements) => {
+                    return setActiveState({
+                        element: elements[i],
+                        state: inactiveOptions,
+                        active: Boolean(!inactiveEnabled ||
+                            !selectedSeriesId ||
+                            selectedSeriesId === d.series.id),
+                        datum: d,
+                    });
+                });
+            });
+        });
+        return () => {
+            dispatcher.on(eventName, null);
+        };
+    }, [dispatcher, preparedData, seriesOptions]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("g", { ref: ref, className: b(), style: { zIndex: 9 } }),
+        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
+}

package/dist/esm/hooks/useShapes/pie/prepare-data.d.ts

@@ -0,0 +1,9 @@
+import type { PreparedPieSeries } from '../../useSeries/types';
+import type { PreparedPieData } from './types';
+type Args = {
+    series: PreparedPieSeries[];
+    boundsWidth: number;
+    boundsHeight: number;
+};
+export declare function preparePieData(args: Args): PreparedPieData[];
+export {};

package/dist/esm/hooks/useShapes/pie/prepare-data.js

@@ -0,0 +1,186 @@
+import { arc, group, line as lineGenerator } from 'd3';
+import { calculateNumericProperty, getLabelsSize, getLeftPosition, isLabelsOverlapping, } from '../../../utils';
+import { getCurveFactory, pieGenerator } from './utils';
+const FULL_CIRCLE = Math.PI * 2;
+const getCenter = (boundsWidth, boundsHeight, center) => {
+    var _a, _b;
+    const defaultX = boundsWidth * 0.5;
+    const defaultY = boundsHeight * 0.5;
+    if (!center) {
+        return [defaultX, defaultY];
+    }
+    const [x, y] = center;
+    const resultX = (_a = calculateNumericProperty({ value: x, base: boundsWidth })) !== null && _a !== void 0 ? _a : defaultX;
+    const resultY = (_b = calculateNumericProperty({ value: y, base: boundsHeight })) !== null && _b !== void 0 ? _b : defaultY;
+    return [resultX, resultY];
+};
+export function preparePieData(args) {
+    const { series: preparedSeries, boundsWidth, boundsHeight } = args;
+    const maxRadius = Math.min(boundsWidth, boundsHeight) / 2;
+    const groupedPieSeries = group(preparedSeries, (pieSeries) => pieSeries.stackId);
+    return Array.from(groupedPieSeries).map(([stackId, items]) => {
+        var _a, _b, _c;
+        const series = items[0];
+        const { center, borderWidth, borderColor, borderRadius, radius: seriesRadius, innerRadius: seriesInnerRadius, dataLabels, } = series;
+        const radius = (_a = calculateNumericProperty({ value: seriesRadius, base: maxRadius })) !== null && _a !== void 0 ? _a : maxRadius;
+        const data = {
+            id: stackId,
+            center: getCenter(boundsWidth, boundsHeight, center),
+            innerRadius: (_b = calculateNumericProperty({ value: seriesInnerRadius, base: radius })) !== null && _b !== void 0 ? _b : 0,
+            radius,
+            segments: [],
+            labels: [],
+            connectors: [],
+            borderColor,
+            borderWidth,
+            borderRadius,
+            series: items[0],
+            connectorCurve: dataLabels.connectorCurve,
+            halo: {
+                enabled: series.states.hover.halo.enabled,
+                opacity: series.states.hover.halo.opacity,
+                size: series.states.hover.halo.size,
+            },
+            htmlElements: [],
+        };
+        const segments = items.map((item) => {
+            return {
+                value: item.value,
+                color: item.color,
+                opacity: item.opacity,
+                series: item,
+                hovered: false,
+                active: true,
+                pie: data,
+            };
+        });
+        data.segments = pieGenerator(segments);
+        let line = lineGenerator();
+        const curveFactory = getCurveFactory(data);
+        if (curveFactory) {
+            line = line.curve(curveFactory);
+        }
+        if (dataLabels.enabled) {
+            const { style, connectorPadding, distance } = dataLabels;
+            const { maxHeight: labelHeight } = getLabelsSize({ labels: ['Some Label'], style });
+            const minSegmentRadius = maxRadius - connectorPadding - distance - labelHeight;
+            if (data.radius > minSegmentRadius) {
+                data.radius = minSegmentRadius;
+                data.innerRadius =
+                    (_c = calculateNumericProperty({ value: seriesInnerRadius, base: data.radius })) !== null && _c !== void 0 ? _c : 0;
+            }
+            const connectorStartPointGenerator = arc()
+                .innerRadius(data.radius)
+                .outerRadius(data.radius);
+            const connectorMidPointRadius = data.radius + distance / 2;
+            const connectorMidPointGenerator = arc()
+                .innerRadius(connectorMidPointRadius)
+                .outerRadius(connectorMidPointRadius);
+            const connectorArcRadius = data.radius + distance;
+            const connectorEndPointGenerator = arc()
+                .innerRadius(connectorArcRadius)
+                .outerRadius(connectorArcRadius);
+            const labelArcRadius = connectorArcRadius + connectorPadding;
+            const labelArcGenerator = arc()
+                .innerRadius(labelArcRadius)
+                .outerRadius(labelArcRadius);
+            const labels = [];
+            items.forEach((d, index) => {
+                const prevLabel = labels[labels.length - 1];
+                const text = String(d.data.label || d.data.value);
+                const shouldUseHtml = dataLabels.html;
+                const labelSize = getLabelsSize({ labels: [text], style, html: shouldUseHtml });
+                const labelWidth = labelSize.maxWidth;
+                const relatedSegment = data.segments[index];
+                const getLabelPosition = (angle) => {
+                    let [x, y] = labelArcGenerator.centroid(Object.assign(Object.assign({}, relatedSegment), { startAngle: angle, endAngle: angle }));
+                    y = y < 0 ? y - labelHeight : y;
+                    if (shouldUseHtml) {
+                        x = x < 0 ? x - labelWidth : x;
+                    }
+                    x = Math.max(-boundsWidth / 2, x);
+                    return [x, y];
+                };
+                const getConnectorPoints = (angle) => {
+                    const connectorStartPoint = connectorStartPointGenerator.centroid(relatedSegment);
+                    const connectorEndPoint = connectorEndPointGenerator.centroid(Object.assign(Object.assign({}, relatedSegment), { startAngle: angle, endAngle: angle }));
+                    if (dataLabels.connectorShape === 'straight-line') {
+                        return [connectorStartPoint, connectorEndPoint];
+                    }
+                    const connectorMidPoint = connectorMidPointGenerator.centroid(relatedSegment);
+                    return [connectorStartPoint, connectorMidPoint, connectorEndPoint];
+                };
+                const midAngle = Math.max((prevLabel === null || prevLabel === void 0 ? void 0 : prevLabel.angle) || 0, relatedSegment.startAngle +
+                    (relatedSegment.endAngle - relatedSegment.startAngle) / 2);
+                const [x, y] = getLabelPosition(midAngle);
+                const label = {
+                    text,
+                    x,
+                    y,
+                    style,
+                    size: { width: labelWidth, height: labelHeight },
+                    maxWidth: labelWidth,
+                    textAnchor: midAngle < Math.PI ? 'start' : 'end',
+                    series: { id: d.id },
+                    active: true,
+                    segment: relatedSegment.data,
+                    angle: midAngle,
+                };
+                let overlap = false;
+                if (prevLabel) {
+                    overlap = isLabelsOverlapping(prevLabel, label, dataLabels.padding);
+                    if (overlap) {
+                        let shouldAdjustAngle = true;
+                        const step = Math.PI / 180;
+                        while (shouldAdjustAngle) {
+                            const newAngle = label.angle + step;
+                            if (newAngle > FULL_CIRCLE &&
+                                newAngle % FULL_CIRCLE > labels[0].angle) {
+                                shouldAdjustAngle = false;
+                            }
+                            else {
+                                label.angle = newAngle;
+                                const [newX, newY] = getLabelPosition(newAngle);
+                                label.x = newX;
+                                label.y = newY;
+                                if (!isLabelsOverlapping(prevLabel, label, dataLabels.padding)) {
+                                    shouldAdjustAngle = false;
+                                    overlap = false;
+                                }
+                            }
+                        }
+                    }
+                }
+                if (dataLabels.allowOverlap || !overlap) {
+                    const left = getLeftPosition(label);
+                    if (Math.abs(left) > boundsWidth / 2) {
+                        label.maxWidth = label.size.width - (Math.abs(left) - boundsWidth / 2);
+                    }
+                    else {
+                        const right = left + label.size.width;
+                        if (right > boundsWidth / 2) {
+                            label.maxWidth = label.size.width - (right - boundsWidth / 2);
+                        }
+                    }
+                    if (shouldUseHtml) {
+                        data.htmlElements.push({
+                            x: boundsWidth / 2 + label.x,
+                            y: boundsHeight / 2 + label.y,
+                            content: label.text,
+                        });
+                    }
+                    else {
+                        labels.push(label);
+                    }
+                    const connector = {
+                        path: line(getConnectorPoints(midAngle)),
+                        color: relatedSegment.data.color,
+                    };
+                    data.connectors.push(connector);
+                }
+            });
+            data.labels = labels;
+        }
+        return data;
+    });
+}

package/dist/esm/hooks/useShapes/pie/types.d.ts

@@ -0,0 +1,41 @@
+import type { PieArcDatum } from 'd3';
+import type { ConnectorCurve, HtmlItem, LabelData } from '../../../types';
+import type { PreparedPieSeries } from '../../useSeries/types';
+export type SegmentData = {
+    value: number;
+    color: string;
+    opacity: number | null;
+    series: PreparedPieSeries;
+    hovered: boolean;
+    active: boolean;
+    pie: PreparedPieData;
+};
+export type PieLabelData = LabelData & {
+    segment: SegmentData;
+    angle: number;
+    maxWidth: number;
+};
+export type PieConnectorData = {
+    path: string | null;
+    color: string;
+};
+export type PreparedPieData = {
+    id: string;
+    segments: PieArcDatum<SegmentData>[];
+    labels: PieLabelData[];
+    connectors: PieConnectorData[];
+    center: [number, number];
+    radius: number;
+    innerRadius: number;
+    borderRadius: number;
+    borderWidth: number;
+    borderColor: string;
+    series: PreparedPieSeries;
+    connectorCurve: ConnectorCurve;
+    halo: {
+        enabled: boolean;
+        opacity: number;
+        size: number;
+    };
+    htmlElements: HtmlItem[];
+};

package/dist/esm/hooks/useShapes/pie/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/hooks/useShapes/pie/utils.d.ts

@@ -0,0 +1,4 @@
+import type { CurveFactory } from 'd3';
+import type { PreparedPieData, SegmentData } from './types';
+export declare const pieGenerator: import("d3-shape").Pie<any, SegmentData>;
+export declare function getCurveFactory(data: PreparedPieData): CurveFactory | undefined;

package/dist/esm/hooks/useShapes/pie/utils.js

@@ -0,0 +1,15 @@
+import { curveBasis, curveLinear, pie } from 'd3';
+export const pieGenerator = pie()
+    .value((d) => d.value)
+    .sort(null);
+export function getCurveFactory(data) {
+    switch (data.connectorCurve) {
+        case 'basic': {
+            return curveBasis;
+        }
+        case 'linear': {
+            return curveLinear;
+        }
+    }
+    return undefined;
+}

package/dist/esm/hooks/useShapes/scatter/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { Dispatch } from 'd3';
+import type { PreparedSeriesOptions } from '../../useSeries/types';
+import type { PreparedScatterData } from './types';
+export { prepareScatterData } from './prepare-data';
+type ScatterSeriesShapeProps = {
+    dispatcher: Dispatch<object>;
+    preparedData: PreparedScatterData[];
+    seriesOptions: PreparedSeriesOptions;
+    htmlLayout: HTMLElement | null;
+};
+export declare function ScatterSeriesShape(props: ScatterSeriesShapeProps): React.JSX.Element;

package/dist/esm/hooks/useShapes/scatter/index.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import { select } from 'd3';
+import get from 'lodash/get';
+import { block } from '../../../utils';
+import { HtmlLayer } from '../HtmlLayer';
+import { getMarkerHaloVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../marker';
+import { setActiveState, shapeKey } from '../utils';
+export { prepareScatterData } from './prepare-data';
+const b = block('d3-scatter');
+export function ScatterSeriesShape(props) {
+    const { dispatcher, preparedData, seriesOptions, htmlLayout } = props;
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (!ref.current) {
+            return () => { };
+        }
+        const svgElement = select(ref.current);
+        const hoverOptions = get(seriesOptions, 'scatter.states.hover');
+        const inactiveOptions = get(seriesOptions, 'scatter.states.inactive');
+        svgElement.selectAll('*').remove();
+        const selection = svgElement
+            .selectAll('path')
+            .data(preparedData, shapeKey)
+            .join('g')
+            .call(renderMarker)
+            .attr('fill', (d) => d.point.data.color || d.point.series.color || '')
+            .attr('opacity', (d) => d.point.opacity)
+            .attr('cursor', (d) => d.point.series.cursor);
+        const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
+        const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
+        dispatcher.on('hover-shape.scatter', (data) => {
+            var _a;
+            const selected = data === null || data === void 0 ? void 0 : data.find((d) => d.series.type === 'scatter');
+            const selectedDataItem = selected === null || selected === void 0 ? void 0 : selected.data;
+            const selectedSeriesId = (_a = selected === null || selected === void 0 ? void 0 : selected.series) === null || _a === void 0 ? void 0 : _a.id;
+            selection.datum((d, index, list) => {
+                const elementSelection = select(list[index]);
+                const hovered = Boolean(hoverEnabled && d.point.data === selectedDataItem);
+                if (d.hovered !== hovered) {
+                    d.hovered = hovered;
+                    elementSelection.attr('z-index', hovered ? 999 : null);
+                    selectMarkerHalo(elementSelection).attr('visibility', getMarkerHaloVisibility);
+                    selectMarkerSymbol(elementSelection).call(setMarker, hovered ? 'hover' : 'normal');
+                }
+                if (hovered) {
+                    elementSelection.raise();
+                }
+                if (d.point.series.marker.states.normal.enabled) {
+                    const isActive = Boolean(!inactiveEnabled ||
+                        !selectedSeriesId ||
+                        selectedSeriesId === d.point.series.id);
+                    setActiveState({
+                        element: list[index],
+                        state: inactiveOptions,
+                        active: isActive,
+                        datum: d,
+                    });
+                }
+                return d;
+            });
+        });
+        return () => {
+            dispatcher.on('hover-shape.scatter', null);
+        };
+    }, [dispatcher, preparedData, seriesOptions]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("g", { ref: ref, className: b() }),
+        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
+}

package/dist/esm/hooks/useShapes/scatter/prepare-data.d.ts

@@ -0,0 +1,11 @@
+import type { ChartScale } from '../../useAxisScales';
+import type { PreparedAxis } from '../../useChartOptions/types';
+import type { PreparedScatterSeries } from '../../useSeries/types';
+import type { PreparedScatterData } from './types';
+export declare const prepareScatterData: (args: {
+    series: PreparedScatterSeries[];
+    xAxis: PreparedAxis;
+    xScale: ChartScale;
+    yAxis: PreparedAxis[];
+    yScale: ChartScale[];
+}) => PreparedScatterData[];

package/dist/esm/hooks/useShapes/scatter/prepare-data.js

@@ -0,0 +1,31 @@
+import get from 'lodash/get';
+import { getXValue, getYValue } from '../utils';
+const getFilteredLinearScatterData = (data) => {
+    return data.filter((d) => typeof d.x === 'number' && typeof d.y === 'number');
+};
+export const prepareScatterData = (args) => {
+    const { series, xAxis, xScale, yAxis, yScale } = args;
+    return series.reduce((acc, s) => {
+        const yAxisIndex = get(s, 'yAxis', 0);
+        const seriesYAxis = yAxis[yAxisIndex];
+        const seriesYScale = yScale[yAxisIndex];
+        const filteredData = xAxis.type === 'category' || seriesYAxis.type === 'category'
+            ? s.data
+            : getFilteredLinearScatterData(s.data);
+        filteredData.forEach((d) => {
+            acc.push({
+                point: {
+                    data: d,
+                    series: s,
+                    x: getXValue({ point: d, xAxis, xScale }),
+                    y: getYValue({ point: d, yAxis: seriesYAxis, yScale: seriesYScale }),
+                    opacity: get(d, 'opacity', null),
+                },
+                hovered: false,
+                active: true,
+                htmlElements: [],
+            });
+        });
+        return acc;
+    }, []);
+};

package/dist/esm/hooks/useShapes/scatter/types.d.ts

@@ -0,0 +1,17 @@
+import type { HtmlItem, ScatterSeriesData } from '../../../types';
+import type { PreparedScatterSeries } from '../../useSeries/types';
+type PointData = {
+    x: number;
+    y: number;
+    opacity: number | null;
+    data: ScatterSeriesData;
+    series: PreparedScatterSeries;
+};
+export type MarkerData = {
+    point: PointData;
+    active: boolean;
+    hovered: boolean;
+    htmlElements: HtmlItem[];
+};
+export type PreparedScatterData = MarkerData;
+export {};

package/dist/esm/hooks/useShapes/scatter/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/hooks/useShapes/styles.css

@@ -0,0 +1,35 @@
+.gcharts-d3-scatter__point {
+  stroke-width: 1px;
+}
+
+.gcharts-d3-pie__segment {
+  stroke: var(--g-color-base-background);
+}
+.gcharts-d3-pie__label {
+  font-size: 11px;
+  font-weight: bold;
+  fill: var(--g-color-text-complementary);
+  alignment-baseline: before-edge;
+}
+
+.gcharts-d3-bar-x__label {
+  user-select: none;
+  fill: var(--g-color-text-complementary);
+}
+
+.gcharts-d3-bar-y__label {
+  user-select: none;
+  fill: var(--g-color-text-complementary);
+  alignment-baseline: after-edge;
+}
+
+.gcharts-d3-treemap__label {
+  user-select: none;
+  pointer-events: none;
+  fill: var(--g-color-text-complementary);
+  alignment-baseline: text-before-edge;
+}
+
+.gcharts-d3-waterfall__connector {
+  stroke: var(--g-color-line-generic-active);
+}

package/dist/esm/hooks/useShapes/treemap/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { Dispatch } from 'd3';
+import type { PreparedSeriesOptions } from '../../useSeries/types';
+import type { PreparedTreemapData } from './types';
+type ShapeProps = {
+    dispatcher: Dispatch<object>;
+    preparedData: PreparedTreemapData;
+    seriesOptions: PreparedSeriesOptions;
+    htmlLayout: HTMLElement | null;
+};
+export declare const TreemapSeriesShape: (props: ShapeProps) => React.JSX.Element;
+export {};