@flux-ui/statistics 3.0.0-next.74 → 3.0.0

package/README.md

@@ -28,5 +28,4 @@ Built on top of [Apache ECharts](https://echarts.apache.org/), themed to match t
 - [`@flux-ui/components`](../components)
 - [`@flux-ui/types`](../types)
 - [`@flux-ui/internals`](../internals)
-- [`@flux-ui/dashboard`](../dashboard)
 - [`@flux-ui/application`](../application)

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

@@ -1,9 +1,15 @@
+import { FluxDirection } from '@flux-ui/types';
+import { FluxStatisticsLegendVariant } from '../composable';
 import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+type __VLS_Props = {
+    readonly direction?: FluxDirection;
+    readonly variant?: FluxStatisticsLegendVariant;
+};
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_base: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+declare const __VLS_base: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/composable/index.d.ts

@@ -10,3 +10,5 @@ export type { UseChartSlicesSetupReturn } from './useChartSlicesSetup';
 export { useChartSlicesSetup } from './useChartSlicesSetup';
 export type { EChartsInstance, EChartsOption, UseEChartsReturn } from './useECharts';
 export { useECharts } from './useECharts';
+export type { FluxStatisticsLegendVariant } from './useLegendVariant';
+export { FluxStatisticsLegendVariantInjectionKey } from './useLegendVariant';

package/dist/composable/useChartLegend.d.ts

@@ -4,6 +4,7 @@ export interface ChartLegendItem {
     readonly color?: string;
     readonly icon?: FluxIconName;
     readonly label: string;
+    readonly seriesIndex?: number;
     readonly value?: string | number;
 }
 export interface ChartLegendContext {

package/dist/composable/useLegendVariant.d.ts

@@ -0,0 +1,3 @@
+import { InjectionKey, Ref } from 'vue';
+export type FluxStatisticsLegendVariant = 'detailed' | 'compact';
+export declare const FluxStatisticsLegendVariantInjectionKey: InjectionKey<Ref<FluxStatisticsLegendVariant>>;

package/dist/index.css

@@ -513,6 +513,44 @@
   right: 0;
   content: "";
   border-top: 1px dashed var(--surface-stroke);
+}
+
+.statistics-legend-compact {
+  display: flex;
+  user-select: none;
+}
+.statistics-legend-compact.is-horizontal {
+  flex-flow: row wrap;
+  gap: 12px 18px;
+}
+.statistics-legend-compact.is-vertical {
+  flex-flow: column;
+  gap: 12px;
+}
+
+.statistics-legend-item-compact {
+  --color: var(--primary-600);
+  display: flex;
+  align-items: center;
+  flex-flow: row nowrap;
+  gap: 6px;
+  font-size: 14px;
+  line-height: 1;
+  white-space: nowrap;
+}
+.statistics-legend-item-compact .statistics-legend-item-color {
+  margin: 0;
+  border-radius: var(--radius-full);
+}
+.statistics-legend-item-compact .statistics-legend-item-icon {
+  margin: 0;
+}
+.statistics-legend-item-compact .statistics-legend-item-label {
+  flex-grow: 0;
+  font-weight: 400;
+}
+.statistics-legend-item-compact .statistics-legend-item-value {
+  margin-left: 0;
 }.statistics-meter {
   --color: var(--primary-600);
   --percentage: 0%;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, customRef, defineComponent, inject, markRaw, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onScopeDispose, openBlock, provide, ref, renderList, renderSlot, toDisplayString, toValue, unref, useSlots, useTemplateRef, watch, watchEffect, withCtx } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, customRef, defineComponent, inject, markRaw, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onScopeDispose, openBlock, provide, ref, renderList, renderSlot, toDisplayString, toRef, toValue, unref, useSlots, useTemplateRef, watch, watchEffect, withCtx } from "vue";
 import { useI18n } from "vue-i18n";
 import { FluxIcon, FluxPane, FluxToolbar, FluxTooltip, iconRegistry } from "@flux-ui/components";
 import { merge } from "lodash-es";
@@ -31,9 +31,16 @@ function useChartHoverSync(chartInstance, legendContext, options) {
 	const { mode, seriesIndex: forcedSeriesIndex = 0 } = options;
 	let attached = null;
 	let syncing = false;
+	const toSeriesIndex = (itemIndex) => {
+		return legendContext.items.value[itemIndex]?.seriesIndex ?? itemIndex;
+	};
+	const toItemIndex = (seriesIndex) => {
+		const mapped = legendContext.items.value.findIndex((item) => item.seriesIndex === seriesIndex);
+		return mapped !== -1 ? mapped : seriesIndex;
+	};
 	const onMouseOver = (params) => {
 		if (syncing) return;
-		const index = mode === "series" ? params.seriesIndex ?? null : params.dataIndex ?? null;
+		const index = mode === "series" ? params.seriesIndex !== void 0 ? toItemIndex(params.seriesIndex) : null : params.dataIndex ?? null;
 		legendContext.hoveredIndex.value = index;
 	};
 	const onMouseOut = () => {
@@ -46,7 +53,7 @@ function useChartHoverSync(chartInstance, legendContext, options) {
 			instance.dispatchAction({ type: "downplay" });
 			if (index !== null) if (mode === "series") instance.dispatchAction({
 				type: "highlight",
-				seriesIndex: index
+				seriesIndex: toSeriesIndex(index)
 			});
 			else instance.dispatchAction({
 				type: "highlight",
@@ -6929,6 +6936,51 @@ function buildBoxPlotTooltip(input) {
 	} };
 }
 //#endregion
+//#region src/util/tooltips/buildCandlestickTooltip.ts
+function buildCandlestickTooltip(input) {
+	const { t, styles, getSeries } = input;
+	const formatter = (params) => {
+		const param = Array.isArray(params) ? params[0] : params;
+		if (!param) return "";
+		const series = getSeries();
+		const seriesIndex = param.seriesIndex ?? 0;
+		const dataIndex = param.dataIndex ?? 0;
+		const s = series[seriesIndex];
+		const point = s?.data[dataIndex];
+		if (!s || !point) return "";
+		const positive = resolveChartColor(s.positiveColor) ?? "var(--success-500)";
+		const negative = resolveChartColor(s.negativeColor) ?? "var(--danger-500)";
+		const color = point.close >= point.open ? positive : negative;
+		return renderTooltip(t, styles, [s.name ? t(String(s.name)) : "", point.label ? t(String(point.label)) : ""].filter(Boolean).join(" — "), [
+			{
+				name: "Open",
+				value: point.open,
+				color
+			},
+			{
+				name: "Close",
+				value: point.close,
+				color
+			},
+			{
+				name: "Lowest",
+				value: point.low,
+				color
+			},
+			{
+				name: "Highest",
+				value: point.high,
+				color
+			}
+		]);
+	};
+	return { tooltip: {
+		show: true,
+		trigger: "item",
+		formatter
+	} };
+}
+//#endregion
 //#region src/util/tooltips/buildCartesianTooltip.ts
 function buildCartesianTooltip(input) {
 	const { t, styles, getSeriesIcons, valueFormatter } = input;
@@ -7057,7 +7109,7 @@ function buildTreemapTooltip(input) {
 		if (!param) return "";
 		const data = param.data;
 		if (!data) return "";
-		const color = data.color ?? "var(--primary-600)";
+		const color = data.itemStyle?.color ?? param.color ?? "var(--primary-600)";
 		return renderTooltip(t, styles, data.name ? t(String(data.name)) : "", [{
 			name: "",
 			value: data.value ?? "",
@@ -7250,14 +7302,16 @@ function resolveCandlestickLabels(series, labels) {
 	if (labels) return labels;
 	for (const s of series) if (s.data.map((p) => p.label ?? "").filter(Boolean).length > 0) return s.data.map((p) => p.label ?? "");
 }
-function candlestickLegendItemBuilder(s) {
+function candlestickLegendItemBuilder(s, _color, index) {
 	return [{
 		color: resolveChartColor(s.positiveColor) ?? "var(--success-500)",
 		icon: s.icon,
-		label: "Up"
+		label: "Up",
+		seriesIndex: index
 	}, {
 		color: resolveChartColor(s.negativeColor) ?? "var(--danger-500)",
-		label: "Down"
+		label: "Down",
+		seriesIndex: index
 	}];
 }
 function buildCandlestickChartOptions(input) {
@@ -7274,10 +7328,10 @@ function buildCandlestickChartOptions(input) {
 		type: "category",
 		data: xLabels
 	} } : void 0;
-	const tooltipOptions = tooltip ? buildCartesianTooltip({
+	const tooltipOptions = tooltip ? buildCandlestickTooltip({
 		t,
 		styles,
-		getSeriesIcons: () => series.map((s) => s.icon)
+		getSeries: () => series
 	}) : { tooltip: { show: false } };
 	const echartsSeries = series.map((s) => toCandlestickSeries({
 		...s,
@@ -11305,6 +11359,9 @@ function useECharts(target, options) {
 		chartInstance.value = markRaw(init(target.value));
 		chartInstance.value.setOption(toValue(options));
 	});
+	watch(() => toValue(options), (value) => {
+		chartInstance.value?.setOption(value, { notMerge: true });
+	});
 	onBeforeUnmount(() => {
 		if (pendingResize !== null) {
 			cancelAnimationFrame(pendingResize);
@@ -11325,6 +11382,9 @@ function useECharts(target, options) {
 		resize: () => chartInstance.value?.resize()
 	};
 }
+//#endregion
+//#region src/composable/useLegendVariant.ts
+var FluxStatisticsLegendVariantInjectionKey = Symbol("flux-statistics-legend-variant");
 var Chart_module_default = {
 	pane: `pane`,
 	statisticsChart: `statistics-chart`,
@@ -11349,7 +11409,9 @@ var FluxStatisticsChart_default = /* @__PURE__ */ defineComponent({
 	setup(__props, { expose: __expose }) {
 		const chart = useTemplateRef("chart");
 		const defaults = buildBaseOptions();
+		const themeVersion = useCssVarVersion();
 		const { chartInstance } = useECharts(chart, computed(() => {
+			themeVersion.value;
 			const merged = merge({}, defaults, __props.options);
 			if (__props.options && __props.options.color !== void 0) merged.color = __props.options.color;
 			if (__props.options && __props.options.series !== void 0) merged.series = __props.options.series;
@@ -11799,9 +11861,12 @@ var FluxStatisticsComparison_default = /* @__PURE__ */ defineComponent({
 	setup(__props) {
 		const formattedCurrent = computed(() => __props.format ? __props.format(__props.current) : __props.current);
 		const formattedPrevious = computed(() => __props.format ? __props.format(__props.previous) : __props.previous);
+		const isDeltaIndeterminate = computed(() => __props.previous === 0 && __props.current !== 0);
 		const deltaValue = computed(() => {
 			if (__props.previous === 0) return 0;
-			return (__props.current - __props.previous) / Math.abs(__props.previous) * 100;
+			const delta = (__props.current - __props.previous) / Math.abs(__props.previous) * 100;
+			if (Math.round(delta * 10) / 10 === 0) return 0;
+			return delta;
 		});
 		const deltaColor = computed(() => {
 			if (deltaValue.value > 0) return "success";
@@ -11813,6 +11878,7 @@ var FluxStatisticsComparison_default = /* @__PURE__ */ defineComponent({
 			if (deltaValue.value < 0) return "arrow-trend-down";
 		});
 		const formattedDelta = computed(() => {
+			if (isDeltaIndeterminate.value) return "—";
 			return `${deltaValue.value > 0 ? "+" : ""}${deltaValue.value.toFixed(1)}%`;
 		});
 		return (_ctx, _cache) => {
@@ -12135,7 +12201,11 @@ var Legend_module_default = {
 	statisticsLegendItemColor: `statistics-legend-item-color`,
 	statisticsLegendItemIcon: `statistics-legend-item-icon`,
 	statisticsLegendItemLabel: `statistics-legend-item-label`,
-	statisticsLegendItemValue: `statistics-legend-item-value`
+	statisticsLegendItemValue: `statistics-legend-item-value`,
+	statisticsLegendCompact: `statistics-legend-compact`,
+	isHorizontal: `is-horizontal`,
+	isVertical: `is-vertical`,
+	statisticsLegendItemCompact: `statistics-legend-item-compact`
 };
 //#endregion
 //#region src/component/FluxStatisticsLegendItem.vue
@@ -12149,6 +12219,8 @@ var FluxStatisticsLegendItem_default = /* @__PURE__ */ defineComponent({
 		value: {}
 	},
 	setup(__props) {
+		const variantRef = inject(FluxStatisticsLegendVariantInjectionKey, null);
+		const variant = computed(() => variantRef?.value ?? "detailed");
 		const colorValue = computed(() => {
 			if (!__props.color) return;
 			if ([
@@ -12163,7 +12235,7 @@ var FluxStatisticsLegendItem_default = /* @__PURE__ */ defineComponent({
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
-				class: normalizeClass(unref(clsx)(unref(Legend_module_default).statisticsLegendItem, __props.isHovered && unref(Legend_module_default).isHovered)),
+				class: normalizeClass(unref(clsx)(variant.value === "compact" ? unref(Legend_module_default).statisticsLegendItemCompact : unref(Legend_module_default).statisticsLegendItem, variant.value !== "compact" && __props.isHovered && unref(Legend_module_default).isHovered)),
 				style: normalizeStyle({ "--color": colorValue.value })
 			}, [
 				__props.icon ? (openBlock(), createBlock(unref(FluxIcon), {
@@ -12191,11 +12263,20 @@ var FluxStatisticsLegendItem_default = /* @__PURE__ */ defineComponent({
 //#region src/component/FluxStatisticsLegend.vue
 var FluxStatisticsLegend_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxStatisticsLegend",
+	props: {
+		direction: { default: "horizontal" },
+		variant: { default: "detailed" }
+	},
 	setup(__props) {
 		const slots = useSlots();
 		const legendContext = inject(FluxStatisticsChartLegendInjectionKey, null);
 		const hasSlot = computed(() => !!slots.default);
 		const autoItems = computed(() => legendContext?.items.value ?? []);
+		const containerClass = computed(() => {
+			if (__props.variant === "compact") return clsx(Legend_module_default.statisticsLegendCompact, __props.direction === "vertical" ? Legend_module_default.isVertical : Legend_module_default.isHorizontal);
+			return Legend_module_default.statisticsLegend;
+		});
+		provide(FluxStatisticsLegendVariantInjectionKey, toRef(() => __props.variant));
 		function onItemMouseEnter(index) {
 			if (legendContext) legendContext.hoveredIndex.value = index;
 		}
@@ -12203,9 +12284,9 @@ var FluxStatisticsLegend_default = /* @__PURE__ */ defineComponent({
 			if (legendContext) legendContext.hoveredIndex.value = null;
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(Legend_module_default).statisticsLegend) }, [hasSlot.value ? renderSlot(_ctx.$slots, "default", { key: 0 }) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(autoItems.value, (item, index) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(containerClass.value) }, [hasSlot.value ? renderSlot(_ctx.$slots, "default", { key: 0 }) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(autoItems.value, (item, index) => {
 				return openBlock(), createBlock(FluxStatisticsLegendItem_default, {
-					key: item.label,
+					key: `${index}-${item.label}`,
 					color: item.color,
 					icon: item.icon,
 					"is-hovered": unref(legendContext)?.hoveredIndex.value === index,
@@ -12766,6 +12847,6 @@ var CHART_COLORFUL_COLORS = [
 	xr
 ];
 //#endregion
-export { CHART_COLORFUL_COLORS, CHART_COLORS, FluxStatisticsAreaChart_default as FluxStatisticsAreaChart, FluxStatisticsBarChart_default as FluxStatisticsBarChart, FluxStatisticsBase_default as FluxStatisticsBase, FluxStatisticsBoxPlotChart_default as FluxStatisticsBoxPlotChart, FluxStatisticsBubbleChart_default as FluxStatisticsBubbleChart, FluxStatisticsCandlestickChart_default as FluxStatisticsCandlestickChart, FluxStatisticsChange_default as FluxStatisticsChange, FluxStatisticsChart_default as FluxStatisticsChart, FluxStatisticsChartLegendInjectionKey, FluxStatisticsChartPane_default as FluxStatisticsChartPane, FluxStatisticsComparison_default as FluxStatisticsComparison, FluxStatisticsDetailsTable_default as FluxStatisticsDetailsTable, FluxStatisticsDetailsTableRow_default as FluxStatisticsDetailsTableRow, FluxStatisticsDonutChart_default as FluxStatisticsDonutChart, FluxStatisticsEmpty_default as FluxStatisticsEmpty, FluxStatisticsGrid_default as FluxStatisticsGrid, FluxStatisticsHeatmapChart_default as FluxStatisticsHeatmapChart, FluxStatisticsKpi_default as FluxStatisticsKpi, FluxStatisticsLegend_default as FluxStatisticsLegend, FluxStatisticsLegendItem_default as FluxStatisticsLegendItem, FluxStatisticsLegendScope_default as FluxStatisticsLegendScope, FluxStatisticsLineChart_default as FluxStatisticsLineChart, FluxStatisticsMeter_default as FluxStatisticsMeter, FluxStatisticsMetric_default as FluxStatisticsMetric, FluxStatisticsMixedChart_default as FluxStatisticsMixedChart, FluxStatisticsPercentageBar_default as FluxStatisticsPercentageBar, FluxStatisticsPieChart_default as FluxStatisticsPieChart, FluxStatisticsPolarAreaChart_default as FluxStatisticsPolarAreaChart, FluxStatisticsRadarChart_default as FluxStatisticsRadarChart, FluxStatisticsRadialBar_default as FluxStatisticsRadialBar, FluxStatisticsScatterChart_default as FluxStatisticsScatterChart, FluxStatisticsSparkline_default as FluxStatisticsSparkline, FluxStatisticsTreemapChart_default as FluxStatisticsTreemapChart, createChartLegendContext, useChartBaseSetup, useChartHoverSync, useChartSeriesSetup, useChartSlicesSetup, useECharts };
+export { CHART_COLORFUL_COLORS, CHART_COLORS, FluxStatisticsAreaChart_default as FluxStatisticsAreaChart, FluxStatisticsBarChart_default as FluxStatisticsBarChart, FluxStatisticsBase_default as FluxStatisticsBase, FluxStatisticsBoxPlotChart_default as FluxStatisticsBoxPlotChart, FluxStatisticsBubbleChart_default as FluxStatisticsBubbleChart, FluxStatisticsCandlestickChart_default as FluxStatisticsCandlestickChart, FluxStatisticsChange_default as FluxStatisticsChange, FluxStatisticsChart_default as FluxStatisticsChart, FluxStatisticsChartLegendInjectionKey, FluxStatisticsChartPane_default as FluxStatisticsChartPane, FluxStatisticsComparison_default as FluxStatisticsComparison, FluxStatisticsDetailsTable_default as FluxStatisticsDetailsTable, FluxStatisticsDetailsTableRow_default as FluxStatisticsDetailsTableRow, FluxStatisticsDonutChart_default as FluxStatisticsDonutChart, FluxStatisticsEmpty_default as FluxStatisticsEmpty, FluxStatisticsGrid_default as FluxStatisticsGrid, FluxStatisticsHeatmapChart_default as FluxStatisticsHeatmapChart, FluxStatisticsKpi_default as FluxStatisticsKpi, FluxStatisticsLegend_default as FluxStatisticsLegend, FluxStatisticsLegendItem_default as FluxStatisticsLegendItem, FluxStatisticsLegendScope_default as FluxStatisticsLegendScope, FluxStatisticsLegendVariantInjectionKey, FluxStatisticsLineChart_default as FluxStatisticsLineChart, FluxStatisticsMeter_default as FluxStatisticsMeter, FluxStatisticsMetric_default as FluxStatisticsMetric, FluxStatisticsMixedChart_default as FluxStatisticsMixedChart, FluxStatisticsPercentageBar_default as FluxStatisticsPercentageBar, FluxStatisticsPieChart_default as FluxStatisticsPieChart, FluxStatisticsPolarAreaChart_default as FluxStatisticsPolarAreaChart, FluxStatisticsRadarChart_default as FluxStatisticsRadarChart, FluxStatisticsRadialBar_default as FluxStatisticsRadialBar, FluxStatisticsScatterChart_default as FluxStatisticsScatterChart, FluxStatisticsSparkline_default as FluxStatisticsSparkline, FluxStatisticsTreemapChart_default as FluxStatisticsTreemapChart, createChartLegendContext, useChartBaseSetup, useChartHoverSync, useChartSeriesSetup, useChartSlicesSetup, useECharts };
 
 //# sourceMappingURL=index.js.map