@flux-ui/statistics 3.0.0-next.68 → 3.0.0-next.69

package/src/component/FluxStatisticsPercentageBar.vue

@@ -0,0 +1,90 @@
+<template>
+    <div :class="$style.statisticsPercentageBar">
+        <div :class="clsx($style.statisticsPercentageBarTrack, hoveredIndex !== null && $style.isHoverActive)">
+            <FluxTooltip
+                v-for="(item, index) of items"
+                :key="index">
+                <template #content>
+                    <div :class="$style.statisticsPercentageBarTooltip">
+                        <FluxIcon
+                            v-if="item.icon"
+                            :name="item.icon"
+                            :size="16"/>
+
+                        <span>{{ formatPercentage(item.value) }} {{ item.label }}</span>
+                    </div>
+                </template>
+
+                <div
+                    :class="clsx($style.statisticsPercentageBarSegment, hoveredIndex === index && $style.isHovered)"
+                    :style="{
+                        backgroundColor: resolveColor(item.color),
+                        flexGrow: item.value
+                    }"
+                    @mouseenter="onSegmentEnter(index)"
+                    @mouseleave="onSegmentLeave"/>
+            </FluxTooltip>
+        </div>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { formatPercentage } from '@basmilius/utils';
+    import { FluxIcon, FluxTooltip } from '@flux-ui/components';
+    import type { FluxStatisticsChartColor, FluxStatisticsPercentageBarItemObject } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import { computed, inject, watchEffect } from 'vue';
+    import { FluxStatisticsChartLegendInjectionKey, type ChartLegendItem } from '~flux/statistics/composable';
+    import $style from '~flux/statistics/css/PercentageBar.module.scss';
+
+    const SEMANTIC_COLORS = ['gray', 'primary', 'danger', 'info', 'success', 'warning'] as const;
+
+    const props = defineProps<{
+        readonly items: FluxStatisticsPercentageBarItemObject[];
+    }>();
+
+    const legendContext = inject(FluxStatisticsChartLegendInjectionKey, null);
+
+    const legendItems = computed<ChartLegendItem[]>(() =>
+        props.items.map(item => ({
+            color: resolveColor(item.color),
+            icon: item.icon,
+            label: item.label,
+            value: item.displayValue
+        }))
+    );
+
+    const hoveredIndex = computed<number | null>(() => legendContext?.hoveredIndex.value ?? null);
+
+    watchEffect(() => {
+        if (legendContext) {
+            legendContext.items.value = legendItems.value;
+        }
+    });
+
+    function resolveColor(color?: FluxStatisticsChartColor): string | undefined {
+        if (!color) {
+            return;
+        }
+
+        if (SEMANTIC_COLORS.includes(color as typeof SEMANTIC_COLORS[number])) {
+            return `var(--${color}-600)`;
+        }
+
+        return color;
+    }
+
+    function onSegmentEnter(index: number): void {
+        if (legendContext) {
+            legendContext.hoveredIndex.value = index;
+        }
+    }
+
+    function onSegmentLeave(): void {
+        if (legendContext) {
+            legendContext.hoveredIndex.value = null;
+        }
+    }
+</script>

package/src/component/FluxStatisticsPieChart.vue

@@ -8,15 +8,14 @@
     lang="ts"
     setup>
     import type { FluxStatisticsChartPieSlice } from '@flux-ui/types';
-    import { merge } from 'lodash-es';
     import { computed } from 'vue';
-    import { usePieSlicesSetup, type EChartsOption } from '~flux/statistics/composable';
-    import { buildSharedItemTooltipFormatter, type ChartTooltipValueFormatter, POLAR_BASE_OPTIONS, toPieSeries } from '~flux/statistics/util';
+    import { useChartSlicesSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { buildPieChartOptions, type ChartTooltipValueFormatter } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';
 
     const {
-        advancedOptions = {},
+        advancedOptions,
         slices,
         title,
         tooltip = false,
@@ -29,25 +28,17 @@
         readonly tooltipValueFormatter?: ChartTooltipValueFormatter;
     }>();
 
-    const { t, palette, tooltipItems } = usePieSlicesSetup(() => slices);
+    const { t, palette, tooltipItems } = useChartSlicesSetup(() => slices);
 
-    const echartsSeries = computed(() => [toPieSeries(slices, palette.value)]);
-
-    const tooltipOptions = computed<EChartsOption>(() => {
-        if (!tooltip) {
-            return { tooltip: { show: false } };
-        }
-
-        return {
-            tooltip: {
-                show: true,
-                trigger: 'item',
-                formatter: buildSharedItemTooltipFormatter(t, $style as never, () => tooltipItems.value, () => title, tooltipValueFormatter) as never
-            }
-        };
-    });
-
-    const mergedOptions = computed<EChartsOption>(() =>
-        merge({}, POLAR_BASE_OPTIONS, tooltipOptions.value, advancedOptions, { series: echartsSeries.value, color: palette.value })
-    );
+    const mergedOptions = computed(() => buildPieChartOptions({
+        slices,
+        palette: palette.value,
+        tooltipItems: tooltipItems.value,
+        title,
+        t,
+        styles: $style,
+        tooltip,
+        tooltipValueFormatter,
+        advancedOptions
+    }));
 </script>

package/src/component/FluxStatisticsPolarAreaChart.vue

@@ -8,15 +8,14 @@
     lang="ts"
     setup>
     import type { FluxStatisticsChartPieSlice } from '@flux-ui/types';
-    import { merge } from 'lodash-es';
     import { computed } from 'vue';
-    import { usePieSlicesSetup, type EChartsOption } from '~flux/statistics/composable';
-    import { buildSharedItemTooltipFormatter, type ChartTooltipValueFormatter, POLAR_BASE_OPTIONS, toPolarAreaSeries } from '~flux/statistics/util';
+    import { useChartSlicesSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { buildPolarAreaChartOptions, type ChartTooltipValueFormatter } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';
 
     const {
-        advancedOptions = {},
+        advancedOptions,
         slices,
         title,
         tooltip = false,
@@ -29,25 +28,17 @@
         readonly tooltipValueFormatter?: ChartTooltipValueFormatter;
     }>();
 
-    const { t, palette, tooltipItems } = usePieSlicesSetup(() => slices);
+    const { t, palette, tooltipItems } = useChartSlicesSetup(() => slices);
 
-    const echartsSeries = computed(() => [toPolarAreaSeries(slices, palette.value)]);
-
-    const tooltipOptions = computed<EChartsOption>(() => {
-        if (!tooltip) {
-            return { tooltip: { show: false } };
-        }
-
-        return {
-            tooltip: {
-                show: true,
-                trigger: 'item',
-                formatter: buildSharedItemTooltipFormatter(t, $style as never, () => tooltipItems.value, () => title, tooltipValueFormatter) as never
-            }
-        };
-    });
-
-    const mergedOptions = computed<EChartsOption>(() =>
-        merge({}, POLAR_BASE_OPTIONS, tooltipOptions.value, advancedOptions, { series: echartsSeries.value, color: palette.value })
-    );
+    const mergedOptions = computed(() => buildPolarAreaChartOptions({
+        slices,
+        palette: palette.value,
+        tooltipItems: tooltipItems.value,
+        title,
+        t,
+        styles: $style,
+        tooltip,
+        tooltipValueFormatter,
+        advancedOptions
+    }));
 </script>

package/src/component/FluxStatisticsRadarChart.vue

@@ -8,15 +8,14 @@
     lang="ts"
     setup>
     import type { FluxStatisticsChartRadarIndicator, FluxStatisticsChartRadarSeries } from '@flux-ui/types';
-    import { merge } from 'lodash-es';
     import { computed } from 'vue';
     import { useChartSeriesSetup, type EChartsOption } from '~flux/statistics/composable';
-    import { POLAR_BASE_OPTIONS, type SharedTooltipItem, toRadarSeries, type TooltipParam, type TooltipStyleClasses } from '~flux/statistics/util';
+    import { buildRadarChartOptions } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';
 
     const {
-        advancedOptions = {},
+        advancedOptions,
         indicators,
         series,
         tooltip = false
@@ -29,80 +28,13 @@
 
     const { t, palette } = useChartSeriesSetup(() => series, { mode: 'data' });
 
-    const echartsSeries = computed(() => [toRadarSeries(
-        series.map(s => ({ ...s, name: s.name ? t(String(s.name)) : undefined })),
-        palette.value
-    )]);
-
-    const radarConfig = computed(() => ({
-        radar: {
-            indicator: indicators.map(i => ({ name: t(String(i.name)), max: i.max })),
-            splitLine: { lineStyle: { color: 'var(--gray-200)' } },
-            splitArea: { show: false },
-            axisLine: { lineStyle: { color: 'var(--gray-200)' } },
-            axisName: {
-                color: 'var(--foreground-secondary)',
-                fontSize: 12,
-                fontWeight: 500
-            }
-        }
-    } as EChartsOption));
-
-    const tooltipFormatter = (params: TooltipParam | TooltipParam[]): string => {
-        const param = Array.isArray(params) ? params[0] : params;
-
-        if (!param) {
-            return '';
-        }
-
-        const ringIndex = param.dataIndex ?? 0;
-        const ring = series[ringIndex];
-
-        if (!ring) {
-            return '';
-        }
-
-        const styles = $style as unknown as TooltipStyleClasses;
-        const color = palette.value[ringIndex % palette.value.length];
-        const title = ring.name ? t(String(ring.name)) : '';
-
-        const tooltipItems: SharedTooltipItem[] = indicators.map((indicator, idx) => ({
-            name: indicator.name,
-            value: ring.values[idx] ?? '',
-            color
-        }));
-
-        const titleHtml = title
-            ? `<div class="${styles.statisticsChartTooltipTitle}">${title}</div>`
-            : '';
-
-        const body = tooltipItems.map(item => {
-            const translatedName = item.name ? t(String(item.name)) : '';
-            return `
-                <div class="${styles.statisticsChartTooltipSeriesColor} ${styles.isActive}" style="background: ${item.color}"></div>
-                <div class="${styles.statisticsChartTooltipSeriesName} ${styles.isActive}">${translatedName}</div>
-                <div class="${styles.statisticsChartTooltipSeriesValue} ${styles.isActive}">${item.value}</div>
-            `;
-        }).join('');
-
-        return `${titleHtml}<div class="${styles.statisticsChartTooltipBody}">${body}</div>`;
-    };
-
-    const tooltipOptions = computed<EChartsOption>(() => {
-        if (!tooltip) {
-            return { tooltip: { show: false } };
-        }
-
-        return {
-            tooltip: {
-                show: true,
-                trigger: 'item',
-                formatter: tooltipFormatter as never
-            }
-        };
-    });
-
-    const mergedOptions = computed<EChartsOption>(() =>
-        merge({}, POLAR_BASE_OPTIONS, radarConfig.value, tooltipOptions.value, advancedOptions, { series: echartsSeries.value, color: palette.value })
-    );
+    const mergedOptions = computed(() => buildRadarChartOptions({
+        series,
+        indicators,
+        palette: palette.value,
+        t,
+        styles: $style,
+        tooltip,
+        advancedOptions
+    }));
 </script>

package/src/component/FluxStatisticsRadialBar.vue

@@ -8,15 +8,14 @@
     lang="ts"
     setup>
     import type { FluxStatisticsChartGaugeSeries } from '@flux-ui/types';
-    import { merge } from 'lodash-es';
     import { computed } from 'vue';
     import { useChartSeriesSetup, type EChartsOption } from '~flux/statistics/composable';
-    import { buildGaugeTooltipOptions, POLAR_BASE_OPTIONS, toGaugeSeries } from '~flux/statistics/util';
+    import { buildGaugeChartOptions, gaugeLegendItemBuilder } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';
 
     const {
-        advancedOptions = {},
+        advancedOptions,
         series,
         tooltip = false
     } = defineProps<{
@@ -26,23 +25,15 @@
     }>();
 
     const { t, palette } = useChartSeriesSetup(() => series, {
-        getLegendItem: (s, color, _, translate) => ({
-            color,
-            icon: s.icon,
-            label: s.name ? translate(String(s.name)) : '',
-            value: s.value
-        })
+        getLegendItem: gaugeLegendItemBuilder
     });
 
-    const echartsSeries = computed(() => series.map((s, i) =>
-        toGaugeSeries({ ...s, name: s.name ? t(String(s.name)) : s.name }, palette.value[i], i, series.length)
-    ));
-
-    const mergedOptions = computed<EChartsOption>(() => {
-        const tooltipOptions: EChartsOption = tooltip
-            ? buildGaugeTooltipOptions(t, $style as never, () => series, () => palette.value)
-            : { tooltip: { show: false } };
-
-        return merge({}, POLAR_BASE_OPTIONS, tooltipOptions, advancedOptions, { series: echartsSeries.value, color: palette.value });
-    });
+    const mergedOptions = computed(() => buildGaugeChartOptions({
+        series,
+        palette: palette.value,
+        t,
+        styles: $style,
+        tooltip,
+        advancedOptions
+    }));
 </script>

package/src/component/FluxStatisticsScatterChart.vue

@@ -8,15 +8,14 @@
     lang="ts"
     setup>
     import type { FluxStatisticsChartScatterSeries } from '@flux-ui/types';
-    import { merge } from 'lodash-es';
     import { computed } from 'vue';
     import { useChartSeriesSetup, type EChartsOption } from '~flux/statistics/composable';
-    import { buildCartesianBaseOptions, buildCartesianTooltipOptions, toScatterSeries } from '~flux/statistics/util';
+    import { buildScatterChartOptions } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';
 
     const {
-        advancedOptions = {},
+        advancedOptions,
         series,
         splitLines = false,
         tooltip = false,
@@ -33,24 +32,15 @@
 
     const { t, palette } = useChartSeriesSetup(() => series);
 
-    const echartsSeries = computed(() => series.map((s, i) =>
-        toScatterSeries({ ...s, name: s.name ? t(String(s.name)) : undefined }, palette.value[i])
-    ));
-
-    const mergedOptions = computed<EChartsOption>(() => {
-        const base = buildCartesianBaseOptions({
-            xAxisType: 'value',
-            yAxisType: 'value',
-            scale: true,
-            xAxisLabels,
-            yAxisLabels,
-            splitLines
-        });
-
-        const tooltipOptions: EChartsOption = tooltip
-            ? buildCartesianTooltipOptions(t, $style as never, () => series.map(s => s.icon))
-            : { tooltip: { show: false } };
-
-        return merge({}, base, tooltipOptions, advancedOptions, { series: echartsSeries.value, color: palette.value });
-    });
+    const mergedOptions = computed(() => buildScatterChartOptions({
+        series,
+        palette: palette.value,
+        t,
+        styles: $style,
+        tooltip,
+        xAxisLabels,
+        yAxisLabels,
+        splitLines,
+        advancedOptions
+    }));
 </script>

package/src/component/FluxStatisticsTreemapChart.vue

@@ -7,16 +7,14 @@
     lang="ts"
     setup>
     import type { FluxStatisticsChartTreemapNode } from '@flux-ui/types';
-    import { merge } from 'lodash-es';
     import { computed } from 'vue';
-    import { useI18n } from 'vue-i18n';
-    import type { EChartsOption } from '~flux/statistics/composable';
-    import { buildTreemapTooltipOptions, CHART_DEFAULT_COLORS, POLAR_BASE_OPTIONS, toTreemapSeries } from '~flux/statistics/util';
+    import { useChartBaseSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { buildTreemapChartOptions } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';
 
     const {
-        advancedOptions = {},
+        advancedOptions,
         nodes,
         tooltip = false
     } = defineProps<{
@@ -25,15 +23,13 @@
         readonly tooltip?: boolean;
     }>();
 
-    const {t} = useI18n({useScope: 'parent'});
+    const { t } = useChartBaseSetup();
 
-    const echartsSeries = computed(() => [toTreemapSeries(nodes, CHART_DEFAULT_COLORS)]);
-
-    const mergedOptions = computed<EChartsOption>(() => {
-        const tooltipOptions: EChartsOption = tooltip
-            ? buildTreemapTooltipOptions(t, $style as never)
-            : { tooltip: { show: false } };
-
-        return merge({}, POLAR_BASE_OPTIONS, tooltipOptions, advancedOptions, { series: echartsSeries.value });
-    });
+    const mergedOptions = computed(() => buildTreemapChartOptions({
+        nodes,
+        t,
+        styles: $style,
+        tooltip,
+        advancedOptions
+    }));
 </script>

package/src/component/index.ts

@@ -18,9 +18,11 @@ export { default as FluxStatisticsLineChart } from './FluxStatisticsLineChart.vu
 export { default as FluxStatisticsKpi } from './FluxStatisticsKpi.vue';
 export { default as FluxStatisticsLegend } from './FluxStatisticsLegend.vue';
 export { default as FluxStatisticsLegendItem } from './FluxStatisticsLegendItem.vue';
+export { default as FluxStatisticsLegendScope } from './FluxStatisticsLegendScope.vue';
 export { default as FluxStatisticsMeter } from './FluxStatisticsMeter.vue';
 export { default as FluxStatisticsMetric } from './FluxStatisticsMetric.vue';
 export { default as FluxStatisticsMixedChart } from './FluxStatisticsMixedChart.vue';
+export { default as FluxStatisticsPercentageBar } from './FluxStatisticsPercentageBar.vue';
 export { default as FluxStatisticsPieChart } from './FluxStatisticsPieChart.vue';
 export { default as FluxStatisticsPolarAreaChart } from './FluxStatisticsPolarAreaChart.vue';
 export { default as FluxStatisticsRadarChart } from './FluxStatisticsRadarChart.vue';

package/src/composable/index.ts

@@ -1,10 +1,12 @@
+export type { UseChartBaseSetupReturn } from './useChartBaseSetup';
+export { useChartBaseSetup } from './useChartBaseSetup';
 export type { ChartLegendContext, ChartLegendItem } from './useChartLegend';
 export { createChartLegendContext, FluxStatisticsChartLegendInjectionKey } from './useChartLegend';
 export type { ChartHoverSyncMode, UseChartHoverSyncOptions } from './useChartHoverSync';
 export { useChartHoverSync } from './useChartHoverSync';
 export type { ChartLegendItemBuilder, ChartSeriesShape, UseChartSeriesSetupOptions, UseChartSeriesSetupReturn } from './useChartSeriesSetup';
 export { useChartSeriesSetup } from './useChartSeriesSetup';
-export type { UsePieSlicesSetupReturn } from './usePieSlicesSetup';
-export { usePieSlicesSetup } from './usePieSlicesSetup';
+export type { UseChartSlicesSetupReturn } from './useChartSlicesSetup';
+export { useChartSlicesSetup } from './useChartSlicesSetup';
 export type { EChartsInstance, EChartsOption, UseEChartsReturn } from './useECharts';
 export { useECharts } from './useECharts';

package/src/composable/useChartBaseSetup.ts

@@ -0,0 +1,16 @@
+import { computed, useTemplateRef, type ComputedRef } from 'vue';
+import { useI18n } from 'vue-i18n';
+import type { EChartsInstance } from './useECharts';
+
+export interface UseChartBaseSetupReturn {
+    readonly t: ReturnType<typeof useI18n>['t'];
+    readonly chartInstance: ComputedRef<EChartsInstance | null>;
+}
+
+export function useChartBaseSetup(): UseChartBaseSetupReturn {
+    const { t } = useI18n({ useScope: 'parent' });
+    const chartRef = useTemplateRef<{ chartInstance: EChartsInstance | null } | null>('chartRef');
+    const chartInstance = computed<EChartsInstance | null>(() => chartRef.value?.chartInstance ?? null);
+
+    return { t, chartInstance };
+}

package/src/composable/{usePieSlicesSetup.ts → useChartSlicesSetup.ts}

@@ -6,7 +6,7 @@ import { useChartHoverSync } from './useChartHoverSync';
 import { type ChartLegendContext, type ChartLegendItem, FluxStatisticsChartLegendInjectionKey } from './useChartLegend';
 import type { EChartsInstance } from './useECharts';
 
-export interface UsePieSlicesSetupReturn {
+export interface UseChartSlicesSetupReturn {
     readonly t: ReturnType<typeof useI18n>['t'];
     readonly palette: ComputedRef<readonly string[]>;
     readonly tooltipItems: ComputedRef<readonly SharedTooltipItem[]>;
@@ -14,9 +14,9 @@ export interface UsePieSlicesSetupReturn {
     readonly chartInstance: ComputedRef<EChartsInstance | null>;
 }
 
-export function usePieSlicesSetup(
+export function useChartSlicesSetup(
     slicesGetter: () => readonly FluxStatisticsChartPieSlice[]
-): UsePieSlicesSetupReturn {
+): UseChartSlicesSetupReturn {
     const { t } = useI18n({ useScope: 'parent' });
     const legendContext = inject(FluxStatisticsChartLegendInjectionKey, null);
     const chartRef = useTemplateRef<{ chartInstance: EChartsInstance | null } | null>('chartRef');

package/src/css/Chart.module.scss

@@ -26,6 +26,16 @@
     --stroke: rgb(from var(--surface-stroke) r g b / .5);
 }
 
+.statisticsChartTooltip {
+    background: rgb(from var(--surface) r g b / .975);
+    background-clip: padding-box;
+    backdrop-filter: blur(3px) saturate(180%);
+    border: 1px solid var(--surface-stroke-out-hover);
+    border-radius: var(--radius-double);
+    box-shadow: var(--shadow-lg);
+    color: var(--foreground);
+}
+
 .statisticsChartTooltipTitle {
     padding: 18px 18px 0;
     color: var(--foreground-prominent);
@@ -110,18 +120,3 @@
     gap: 6px 15px;
     grid-template-columns: repeat(3, auto);
 }
-
-:global(.flux-statistics-tooltip) {
-    background: rgb(from var(--surface) r g b / .975) !important;
-    background-clip: padding-box;
-    backdrop-filter: blur(3px) saturate(180%);
-    border: 1px solid var(--surface-stroke-out-hover) !important;
-    border-radius: var(--radius-double) !important;
-    box-shadow: var(--shadow-lg) !important;
-    color: var(--foreground);
-    contain: paint;
-
-    &:empty {
-        display: none;
-    }
-}

package/src/css/ChartPane.module.scss

@@ -5,6 +5,7 @@
 
     container: chart-pane / inline-size;
     max-width: 100%;
+    contain: paint;
 }
 
 .statisticsChartPaneBody {
@@ -19,9 +20,11 @@
     }
 
     &:has(.statisticsLegend) {
+        align-items: center;
         grid-template-columns: .4fr .6fr;
 
         @container chart-pane (max-width: 390px) {
+            align-items: stretch;
             grid-template-columns: 1fr;
             grid-template-rows: auto auto;
         }
@@ -30,16 +33,6 @@
             height: calc(40cqw / var(--aspect-ratio, 1));
         }
     }
-
-    &:first-child :global(canvas) {
-        border-top-left-radius: var(--radius);
-        border-top-right-radius: var(--radius);
-    }
-
-    &:last-child :global(canvas) {
-        border-bottom-left-radius: var(--radius);
-        border-bottom-right-radius: var(--radius);
-    }
 }
 
 .statisticsChartPaneContainer {

package/src/css/Empty.module.scss

@@ -1,7 +1,7 @@
 .statisticsEmpty {
-    position: absolute;
     display: flex;
-    inset: 0;
+    width: 100%;
+    height: 100%;
     padding: 24px 18px;
     flex-flow: column;
     align-items: center;

package/src/css/Legend.module.scss

@@ -2,21 +2,24 @@
 
 .statisticsLegend {
     display: flex;
-    max-height: 360px;
     min-width: 0;
-    padding: 15px 18px 15px;
-    align-self: center;
+    padding: 0 9px;
     flex-flow: column;
     flex-grow: 1;
-    overflow: auto;
+    gap: 3px;
     user-select: none;
 }
 
+:local(.statisticsChartPaneBody) .statisticsLegend {
+    padding: 9px 36px 9px 18px;
+}
+
 .statisticsLegendItem {
     --color: var(--primary-600);
 
+    position: relative;
     display: flex;
-    padding: 6px 9px;
+    padding: 6px;
     margin: 0 -9px;
     align-items: flex-start;
     flex-flow: row nowrap;
@@ -24,8 +27,8 @@
     font-size: 14px;
     line-height: 20px;
     white-space: nowrap;
-    border-radius: var(--radius-small);
-    transition: background var(--swift-out);
+    border-radius: var(--radius-half);
+    transition: background 120ms var(--swift-out);
 }
 
 .statisticsLegendItem.isHovered {
@@ -57,6 +60,11 @@
     text-align: right;
 }
 
-.statisticsLegendItem + .statisticsLegendItem {
+.statisticsLegendItem + .statisticsLegendItem::before {
+    position: absolute;
+    top: -2px;
+    left: 0;
+    right: 0;
+    content: '';
     border-top: 1px dashed var(--surface-stroke);
 }