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

package/dist/component/FluxStatisticsLegendScope.vue.d.ts

@@ -0,0 +1,13 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+type __VLS_Slots = {
+    default(): any;
+};
+declare const __VLS_base: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/component/FluxStatisticsPercentageBar.vue.d.ts

@@ -0,0 +1,8 @@
+import { FluxStatisticsPercentageBarItemObject } from '@flux-ui/types';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+type __VLS_Props = {
+    readonly items: FluxStatisticsPercentageBarItemObject[];
+};
+declare const __VLS_export: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/component/index.d.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/dist/composable/index.d.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/dist/composable/useChartBaseSetup.d.ts

@@ -0,0 +1,8 @@
+import { ComputedRef } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { EChartsInstance } from './useECharts';
+export interface UseChartBaseSetupReturn {
+    readonly t: ReturnType<typeof useI18n>['t'];
+    readonly chartInstance: ComputedRef<EChartsInstance | null>;
+}
+export declare function useChartBaseSetup(): UseChartBaseSetupReturn;

package/dist/composable/{usePieSlicesSetup.d.ts → useChartSlicesSetup.d.ts}

@@ -4,11 +4,11 @@ import { useI18n } from 'vue-i18n';
 import { SharedTooltipItem } from '../util';
 import { ChartLegendContext } from './useChartLegend';
 import { 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[]>;
     readonly legendContext: ChartLegendContext | null;
     readonly chartInstance: ComputedRef<EChartsInstance | null>;
 }
-export declare function usePieSlicesSetup(slicesGetter: () => readonly FluxStatisticsChartPieSlice[]): UsePieSlicesSetupReturn;
+export declare function useChartSlicesSetup(slicesGetter: () => readonly FluxStatisticsChartPieSlice[]): UseChartSlicesSetupReturn;

package/dist/index.css

@@ -25,6 +25,16 @@
   --stroke: rgb(from var(--surface-stroke) r g b / .5);
 }
 
+.statistics-chart-tooltip {
+  background: rgb(from var(--surface) r g b/0.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);
+}
+
 .statistics-chart-tooltip-title {
   padding: 18px 18px 0;
   color: var(--foreground-prominent);
@@ -106,20 +116,6 @@
   align-items: center;
   gap: 6px 15px;
   grid-template-columns: repeat(3, auto);
-}
-
-.flux-statistics-tooltip {
-  background: rgb(from var(--surface) r g b/0.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;
-}
-.flux-statistics-tooltip:empty {
-  display: none;
 }.statistics-base {
   display: flex;
   height: 100%;
@@ -229,6 +225,7 @@
   --aspect-ratio: unset;
   container: chart-pane/inline-size;
   max-width: 100%;
+  contain: paint;
 }
 
 .statistics-chart-pane-body {
@@ -242,10 +239,12 @@
   height: calc(100cqw / var(--aspect-ratio, 1));
 }
 .statistics-chart-pane-body:has(.statistics-legend) {
+  align-items: center;
   grid-template-columns: 0.4fr 0.6fr;
 }
 @container chart-pane (max-width: 390px) {
   .statistics-chart-pane-body:has(.statistics-legend) {
+    align-items: stretch;
     grid-template-columns: 1fr;
     grid-template-rows: auto auto;
   }
@@ -253,14 +252,6 @@
 .statistics-chart-pane-body:has(.statistics-legend) .statistics-chart-pane-container {
   height: calc(40cqw / var(--aspect-ratio, 1));
 }
-.statistics-chart-pane-body:first-child canvas {
-  border-top-left-radius: var(--radius);
-  border-top-right-radius: var(--radius);
-}
-.statistics-chart-pane-body:last-child canvas {
-  border-bottom-left-radius: var(--radius);
-  border-bottom-right-radius: var(--radius);
-}
 
 .statistics-chart-pane-container {
   position: relative;
@@ -363,9 +354,9 @@
   font-size: 15px;
   font-weight: 600;
 }.statistics-empty {
-  position: absolute;
   display: flex;
-  inset: 0;
+  width: 100%;
+  height: 100%;
   padding: 24px 18px;
   flex-flow: column;
   align-items: center;
@@ -458,20 +449,23 @@
   line-height: 36px;
 }.statistics-legend {
   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;
 }
 
+.statistics-chart-pane-body .statistics-legend {
+  padding: 9px 36px 9px 18px;
+}
+
 .statistics-legend-item {
   --color: var(--primary-600);
+  position: relative;
   display: flex;
-  padding: 6px 9px;
+  padding: 6px;
   margin: 0 -9px;
   align-items: flex-start;
   flex-flow: row nowrap;
@@ -479,8 +473,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);
 }
 
 .statistics-legend-item.is-hovered {
@@ -512,7 +506,12 @@
   text-align: right;
 }
 
-.statistics-legend-item + .statistics-legend-item {
+.statistics-legend-item + .statistics-legend-item::before {
+  position: absolute;
+  top: -2px;
+  left: 0;
+  right: 0;
+  content: "";
   border-top: 1px dashed var(--surface-stroke);
 }.statistics-meter {
   --color: var(--primary-600);
@@ -530,6 +529,7 @@
   height: 6px;
   background: var(--gray-100);
   border-radius: var(--radius);
+  contain: paint;
 }
 
 .statistics-meter-bar-value {
@@ -673,6 +673,41 @@
 
 .statistics-metric-value + .statistics-metric-content {
   margin-top: 15px;
+}.statistics-percentage-bar {
+  display: flex;
+  flex-flow: column;
+  gap: 12px;
+}
+
+.statistics-percentage-bar-track {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 3px;
+}
+
+.statistics-percentage-bar-segment {
+  height: 12px;
+  border-radius: calc(var(--radius) / 3);
+  transition: var(--transition-default);
+  transition-property: height, margin, flex-grow, opacity;
+}
+
+.statistics-percentage-bar-segment:hover,
+.statistics-percentage-bar-segment.is-hovered {
+  height: 16px;
+  margin-top: -2px;
+  margin-bottom: -2px;
+}
+
+.statistics-percentage-bar-track.is-hover-active .statistics-percentage-bar-segment:not(.is-hovered):not(:hover) {
+  opacity: 0.5;
+}
+
+.statistics-percentage-bar-tooltip {
+  display: flex;
+  align-items: center;
+  flex-flow: row nowrap;
+  gap: 9px;
 }.statistics-sparkline {
   position: relative;
   display: block;