@flux-ui/statistics 3.0.0-next.75 → 3.1.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/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/index.js

@@ -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);
@@ -11352,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;
@@ -11802,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";
@@ -11816,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) => {
@@ -12223,7 +12286,7 @@ var FluxStatisticsLegend_default = /* @__PURE__ */ defineComponent({
 		return (_ctx, _cache) => {
 			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,