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

package/dist/component/index.d.ts

@@ -1,17 +1,30 @@
 export { default as FluxStatisticsAreaChart } from './FluxStatisticsAreaChart.vue';
 export { default as FluxStatisticsBarChart } from './FluxStatisticsBarChart.vue';
 export { default as FluxStatisticsBase } from './FluxStatisticsBase.vue';
+export { default as FluxStatisticsBoxPlotChart } from './FluxStatisticsBoxPlotChart.vue';
+export { default as FluxStatisticsBubbleChart } from './FluxStatisticsBubbleChart.vue';
+export { default as FluxStatisticsCandlestickChart } from './FluxStatisticsCandlestickChart.vue';
 export { default as FluxStatisticsChange } from './FluxStatisticsChange.vue';
 export { default as FluxStatisticsChart } from './FluxStatisticsChart.vue';
 export { default as FluxStatisticsChartPane } from './FluxStatisticsChartPane.vue';
+export { default as FluxStatisticsComparison } from './FluxStatisticsComparison.vue';
 export { default as FluxStatisticsDetailsTable } from './FluxStatisticsDetailsTable.vue';
 export { default as FluxStatisticsDetailsTableRow } from './FluxStatisticsDetailsTableRow.vue';
 export { default as FluxStatisticsDonutChart } from './FluxStatisticsDonutChart.vue';
+export { default as FluxStatisticsEmpty } from './FluxStatisticsEmpty.vue';
 export { default as FluxStatisticsGrid } from './FluxStatisticsGrid.vue';
+export { default as FluxStatisticsHeatmapChart } from './FluxStatisticsHeatmapChart.vue';
 export { default as FluxStatisticsLineChart } from './FluxStatisticsLineChart.vue';
 export { default as FluxStatisticsKpi } from './FluxStatisticsKpi.vue';
 export { default as FluxStatisticsLegend } from './FluxStatisticsLegend.vue';
 export { default as FluxStatisticsLegendItem } from './FluxStatisticsLegendItem.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 FluxStatisticsPieChart } from './FluxStatisticsPieChart.vue';
+export { default as FluxStatisticsPolarAreaChart } from './FluxStatisticsPolarAreaChart.vue';
+export { default as FluxStatisticsRadarChart } from './FluxStatisticsRadarChart.vue';
+export { default as FluxStatisticsRadialBar } from './FluxStatisticsRadialBar.vue';
+export { default as FluxStatisticsScatterChart } from './FluxStatisticsScatterChart.vue';
+export { default as FluxStatisticsSparkline } from './FluxStatisticsSparkline.vue';
+export { default as FluxStatisticsTreemapChart } from './FluxStatisticsTreemapChart.vue';

package/dist/composable/index.d.ts

@@ -0,0 +1,10 @@
+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 { EChartsInstance, EChartsOption, UseEChartsReturn } from './useECharts';
+export { useECharts } from './useECharts';

package/dist/composable/useChartHoverSync.d.ts

@@ -0,0 +1,9 @@
+import { Ref } from 'vue';
+import { ChartLegendContext } from './useChartLegend';
+import { EChartsInstance } from './useECharts';
+export type ChartHoverSyncMode = 'series' | 'data';
+export interface UseChartHoverSyncOptions {
+    readonly mode: ChartHoverSyncMode;
+    readonly seriesIndex?: number;
+}
+export declare function useChartHoverSync(chartInstance: Ref<EChartsInstance | null>, legendContext: ChartLegendContext | null, options: UseChartHoverSyncOptions): void;

package/dist/composable/useChartLegend.d.ts

@@ -0,0 +1,14 @@
+import { FluxIconName } from '@flux-ui/types';
+import { InjectionKey, Ref } from 'vue';
+export interface ChartLegendItem {
+    readonly color?: string;
+    readonly icon?: FluxIconName;
+    readonly label: string;
+    readonly value?: string | number;
+}
+export interface ChartLegendContext {
+    readonly items: Ref<readonly ChartLegendItem[]>;
+    readonly hoveredIndex: Ref<number | null>;
+}
+export declare const FluxStatisticsChartLegendInjectionKey: InjectionKey<ChartLegendContext>;
+export declare function createChartLegendContext(): ChartLegendContext;

package/dist/composable/useChartSeriesSetup.d.ts

@@ -0,0 +1,23 @@
+import { FluxIconName, FluxStatisticsChartColor } from '@flux-ui/types';
+import { ComputedRef } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { ChartHoverSyncMode } from './useChartHoverSync';
+import { ChartLegendContext, ChartLegendItem } from './useChartLegend';
+import { EChartsInstance } from './useECharts';
+export interface ChartSeriesShape {
+    readonly name?: string;
+    readonly icon?: FluxIconName;
+    readonly color?: FluxStatisticsChartColor;
+}
+export type ChartLegendItemBuilder<S> = (series: S, color: string, index: number, t: ReturnType<typeof useI18n>['t']) => ChartLegendItem | readonly ChartLegendItem[];
+export interface UseChartSeriesSetupOptions<S extends ChartSeriesShape> {
+    readonly mode?: ChartHoverSyncMode;
+    readonly getLegendItem?: ChartLegendItemBuilder<S>;
+}
+export interface UseChartSeriesSetupReturn {
+    readonly t: ReturnType<typeof useI18n>['t'];
+    readonly palette: ComputedRef<readonly string[]>;
+    readonly legendContext: ChartLegendContext | null;
+    readonly chartInstance: ComputedRef<EChartsInstance | null>;
+}
+export declare function useChartSeriesSetup<S extends ChartSeriesShape>(seriesGetter: () => readonly S[], options?: UseChartSeriesSetupOptions<S>): UseChartSeriesSetupReturn;

package/dist/composable/useECharts.d.ts

@@ -0,0 +1,9 @@
+import { init, EChartsCoreOption } from 'echarts/core';
+import { MaybeRefOrGetter, Ref } from 'vue';
+export type EChartsOption = EChartsCoreOption;
+export type EChartsInstance = ReturnType<typeof init>;
+export interface UseEChartsReturn {
+    readonly chartInstance: Ref<EChartsInstance | null>;
+    resize(): void;
+}
+export declare function useECharts(target: Ref<HTMLElement | null>, options: MaybeRefOrGetter<EChartsOption>): UseEChartsReturn;

package/dist/composable/usePieSlicesSetup.d.ts

@@ -0,0 +1,14 @@
+import { FluxStatisticsChartPieSlice } from '@flux-ui/types';
+import { ComputedRef } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { SharedTooltipItem } from '../util';
+import { ChartLegendContext } from './useChartLegend';
+import { EChartsInstance } from './useECharts';
+export interface UsePieSlicesSetupReturn {
+    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;

package/dist/echarts.d.ts

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

package/dist/index.css

@@ -22,35 +22,8 @@
   inset: 0;
   height: unset;
   width: unset;
-}
-.statistics-chart svg {
-  overflow: hidden;
-}
-.statistics-chart {
   --stroke: rgb(from var(--surface-stroke) r g b / .5);
 }
-.statistics-chart .apexcharts-canvas .apexcharts-grid-borders {
-  display: none;
-}
-.statistics-chart .apexcharts-canvas .apexcharts-yaxis-texts-g {
-  display: none;
-}
-.statistics-chart .apexcharts-canvas .apexcharts-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);
-  contain: paint;
-}
-
-.statistics-chart-element {
-  position: absolute;
-  display: block;
-  inset: 0;
-}
 
 .statistics-chart-tooltip-title {
   padding: 18px 18px 0;
@@ -75,15 +48,78 @@
   border-radius: 6px;
 }
 
+.statistics-chart-tooltip-series-icon {
+  display: flex;
+  height: 14px;
+  width: 14px;
+  color: var(--danger-600);
+  align-items: center;
+  justify-content: center;
+}
+.statistics-chart-tooltip-series-icon > svg {
+  height: 100%;
+  width: 100%;
+}
+
 .statistics-chart-tooltip-series-name {
+  color: var(--foreground-secondary);
   font-size: 14px;
   font-weight: 700;
+  transition: color 0.15s ease-out;
 }
 
 .statistics-chart-tooltip-series-value {
+  color: var(--foreground-secondary);
   font-size: 14px;
   font-weight: 500;
   text-align: right;
+  transition: color 0.15s ease-out;
+}
+
+.statistics-chart-tooltip-series-name.is-active,
+.statistics-chart-tooltip-series-value.is-active {
+  color: var(--foreground-prominent);
+}
+
+.statistics-chart-tooltip-section {
+  padding: 12px 18px;
+  transition: opacity 0.15s ease-out;
+}
+.statistics-chart-tooltip-section + .statistics-chart-tooltip-section {
+  border-top: 1px solid var(--surface-stroke);
+}
+
+.statistics-chart-tooltip-section.is-dimmed {
+  opacity: 0.55;
+}
+
+.statistics-chart-tooltip-section-title {
+  color: var(--foreground-prominent);
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1;
+  margin-bottom: 9px;
+}
+
+.statistics-chart-tooltip-section-body {
+  display: grid;
+  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%;
@@ -103,6 +139,7 @@
 .statistics-base-header {
   display: flex;
   padding: 18px 18px 0;
+  gap: 9px;
   align-items: flex-start;
 }
 
@@ -114,10 +151,30 @@
   word-break: break-word;
 }
 
+.statistics-base-header-icon,
+.statistics-base-header-info {
+  font-size: 20px;
+  line-height: 24px;
+}
+
+.statistics-base-header-info {
+  margin-left: auto;
+  color: var(--foreground-secondary);
+  cursor: help;
+  scale: 0.75;
+  transition: color 0.2s var(--swift-out);
+}
+.statistics-base-header-info:hover {
+  color: var(--foreground-prominent);
+}
+
+.statistics-base-header-info + .statistics-base-header-icon {
+  margin-left: 6px;
+}
+
 .statistics-base-header-icon {
   margin-left: auto;
   color: var(--primary-600);
-  font-size: 20px;
 }
 
 .statistics-base-small .statistics-base-header-title {
@@ -126,6 +183,11 @@
   line-height: 18px;
 }
 
+.statistics-base-small .statistics-base-header-info {
+  font-size: 14px;
+  line-height: 18px;
+}
+
 .statistics-base-small .statistics-base-header-icon {
   font-size: 18px;
 }.statistics-change {
@@ -165,35 +227,100 @@
   font-weight: 500;
 }.statistics-chart-pane {
   --aspect-ratio: unset;
+  container: chart-pane/inline-size;
   max-width: 100%;
-  aspect-ratio: var(--aspect-ratio);
 }
 
 .statistics-chart-pane-body {
   display: grid;
+  align-content: start;
   flex-grow: 1;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr;
 }
+.statistics-chart-pane-body .statistics-chart-pane-container {
+  height: calc(100cqw / var(--aspect-ratio, 1));
+}
 .statistics-chart-pane-body:has(.statistics-legend) {
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 0.4fr 0.6fr;
 }
-
-.statistics-chart-pane-container {
-  position: relative;
-  display: block;
+@container chart-pane (max-width: 390px) {
+  .statistics-chart-pane-body:has(.statistics-legend) {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto;
+  }
+}
+.statistics-chart-pane-body:has(.statistics-legend) .statistics-chart-pane-container {
+  height: calc(40cqw / var(--aspect-ratio, 1));
 }
-.statistics-chart-pane-container:first-child svg {
+.statistics-chart-pane-body:first-child canvas {
   border-top-left-radius: var(--radius);
   border-top-right-radius: var(--radius);
 }
-.statistics-chart-pane-container:last-child svg {
+.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;
+  display: block;
+  align-self: center;
+}
+
 .pane-header + .statistics-chart-pane-container {
   margin-top: 18px;
+}.statistics-comparison {
+  display: grid;
+  margin-top: 18px;
+  gap: 12px;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+}
+
+.statistics-comparison-divider {
+  width: 1px;
+  height: 36px;
+  background: var(--stroke);
+}
+
+.statistics-comparison-item {
+  display: flex;
+  flex-flow: column;
+  gap: 3px;
+}
+
+.statistics-comparison-item-label {
+  color: var(--foreground-secondary);
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.statistics-comparison-item-value {
+  color: var(--foreground-prominent);
+  font-size: 21px;
+  font-weight: 800;
+  line-height: 28px;
+}
+
+.statistics-comparison-item-value-muted {
+  color: var(--foreground-secondary);
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 28px;
+}
+
+.statistics-comparison-bottom {
+  display: flex;
+  margin-top: 9px;
+  align-items: center;
+  gap: 9px;
+  line-height: 18px;
+}
+
+.statistics-comparison-footer {
+  color: var(--foreground-secondary);
+  font-size: 14px;
 }.statistics-base-content .statistics-stackable + .statistics-stackable {
   margin-top: 18px;
 }.details-table {
@@ -235,6 +362,44 @@
 .details-table-title {
   font-size: 15px;
   font-weight: 600;
+}.statistics-empty {
+  position: absolute;
+  display: flex;
+  inset: 0;
+  padding: 24px 18px;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 9px;
+}
+
+.statistics-empty-icon {
+  color: var(--foreground-secondary);
+  font-size: 32px;
+  opacity: 0.5;
+}
+
+.statistics-empty-title {
+  color: var(--foreground-prominent);
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 24px;
+}
+
+.statistics-empty-description {
+  max-width: 320px;
+  color: var(--foreground-secondary);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+}
+
+.statistics-empty-actions {
+  display: flex;
+  margin-top: 9px;
+  align-items: center;
+  gap: 9px;
 }.statistics-grid {
   --columns: 1;
   --gap: 18px;
@@ -244,6 +409,7 @@
 
 .statistics-grid-content {
   display: grid;
+  align-items: start;
   gap: var(--gap);
   grid-template-columns: repeat(var(--columns), 1fr);
 }
@@ -292,23 +458,33 @@
   line-height: 36px;
 }.statistics-legend {
   display: flex;
+  max-height: 360px;
   min-width: 0;
   padding: 15px 18px 15px;
   align-self: center;
   flex-flow: column;
   flex-grow: 1;
+  overflow: auto;
+  user-select: none;
 }
 
 .statistics-legend-item {
   --color: var(--primary-600);
   display: flex;
-  padding: 6px 0;
+  padding: 6px 9px;
+  margin: 0 -9px;
   align-items: flex-start;
   flex-flow: row nowrap;
   gap: 9px;
   font-size: 14px;
   line-height: 20px;
   white-space: nowrap;
+  border-radius: var(--radius-small);
+  transition: background var(--swift-out);
+}
+
+.statistics-legend-item.is-hovered {
+  background: var(--surface-active);
 }
 
 .statistics-legend-item-color {
@@ -465,6 +641,11 @@
 .statistics-metric-content small:not(:first-child) {
   margin-top: 15px;
 }
+.statistics-metric-content [data-sparkline] {
+  margin-inline: -18px;
+  width: calc(100% + 36px);
+  max-width: none;
+}
 
 .statistics-metric-footer {
   color: var(--foreground-secondary);
@@ -492,4 +673,16 @@
 
 .statistics-metric-value + .statistics-metric-content {
   margin-top: 15px;
+}.statistics-sparkline {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 40px;
+  min-width: 60px;
+}
+
+.statistics-sparkline-chart {
+  position: absolute;
+  display: block;
+  inset: 0;
 }/*$vite$:1*/

package/dist/index.d.ts

@@ -1,3 +1,6 @@
+import { FluxStatisticsChartColor } from '@flux-ui/types';
 export * from './component';
-export declare const CHART_COLORS: string[];
-export declare const CHART_COLORFUL_COLORS: string[];
+export * from './composable';
+export type { ChartTooltipValueFormatter, SharedTooltipItem, Translator } from './util';
+export declare const CHART_COLORS: readonly FluxStatisticsChartColor[];
+export declare const CHART_COLORFUL_COLORS: readonly FluxStatisticsChartColor[];