@flux-ui/statistics 3.2.0-beta.6 → 3.2.0-beta.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/component/FluxStatisticsBubbleChart.vue.d.ts +2 -0
- package/dist/component/FluxStatisticsScatterChart.vue.d.ts +2 -0
- package/dist/composable/useChartBaseSetup.d.ts +0 -3
- package/dist/index.css +2 -0
- package/dist/index.js +42 -39
- package/dist/index.js.map +1 -1
- package/dist/util/options/cartesian/buildBubbleChartOptions.d.ts +2 -1
- package/dist/util/options/cartesian/buildScatterChartOptions.d.ts +2 -1
- package/package.json +4 -4
- package/src/component/FluxStatisticsBase.vue +4 -2
- package/src/component/FluxStatisticsBubbleChart.vue +4 -1
- package/src/component/FluxStatisticsDetailsTable.vue +3 -2
- package/src/component/FluxStatisticsLegend.vue +1 -2
- package/src/component/FluxStatisticsScatterChart.vue +4 -1
- package/src/composable/useChartBaseSetup.ts +1 -6
- package/src/css/ChartPane.module.scss +2 -0
- package/src/util/options/cartesian/buildBubbleChartOptions.ts +4 -3
- package/src/util/options/cartesian/buildScatterChartOptions.ts +4 -3
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import { FluxStatisticsChartBubbleSeries } from '@flux-ui/types';
|
|
2
2
|
import { EChartsOption } from '../composable';
|
|
3
|
+
import { ChartTooltipValueFormatter } from '../util';
|
|
3
4
|
import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
|
|
4
5
|
type __VLS_Props = {
|
|
5
6
|
readonly advancedOptions?: EChartsOption;
|
|
6
7
|
readonly series: readonly FluxStatisticsChartBubbleSeries[];
|
|
7
8
|
readonly splitLines?: boolean;
|
|
8
9
|
readonly tooltip?: boolean;
|
|
10
|
+
readonly tooltipValueFormatter?: ChartTooltipValueFormatter;
|
|
9
11
|
readonly xAxisLabels?: boolean;
|
|
10
12
|
readonly yAxisLabels?: boolean;
|
|
11
13
|
};
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import { FluxStatisticsChartScatterSeries } from '@flux-ui/types';
|
|
2
2
|
import { EChartsOption } from '../composable';
|
|
3
|
+
import { ChartTooltipValueFormatter } from '../util';
|
|
3
4
|
import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
|
|
4
5
|
type __VLS_Props = {
|
|
5
6
|
readonly advancedOptions?: EChartsOption;
|
|
6
7
|
readonly series: readonly FluxStatisticsChartScatterSeries[];
|
|
7
8
|
readonly splitLines?: boolean;
|
|
8
9
|
readonly tooltip?: boolean;
|
|
10
|
+
readonly tooltipValueFormatter?: ChartTooltipValueFormatter;
|
|
9
11
|
readonly xAxisLabels?: boolean;
|
|
10
12
|
readonly yAxisLabels?: boolean;
|
|
11
13
|
};
|
|
@@ -1,8 +1,5 @@
|
|
|
1
|
-
import { ComputedRef } from 'vue';
|
|
2
1
|
import { useI18n } from 'vue-i18n';
|
|
3
|
-
import { EChartsInstance } from './useECharts';
|
|
4
2
|
export interface UseChartBaseSetupReturn {
|
|
5
3
|
readonly t: ReturnType<typeof useI18n>['t'];
|
|
6
|
-
readonly chartInstance: ComputedRef<EChartsInstance | null>;
|
|
7
4
|
}
|
|
8
5
|
export declare function useChartBaseSetup(): UseChartBaseSetupReturn;
|
package/dist/index.css
CHANGED
package/dist/index.js
CHANGED
|
@@ -6220,7 +6220,7 @@ function K$1(e, t, n) {
|
|
|
6220
6220
|
Object.defineProperty(e, t, { value: n });
|
|
6221
6221
|
}
|
|
6222
6222
|
//#endregion
|
|
6223
|
-
//#region ../internals/dist/util-
|
|
6223
|
+
//#region ../internals/dist/util-vNzwiqjo.js
|
|
6224
6224
|
var o$1 = [
|
|
6225
6225
|
`a[href]:not([disabled])`,
|
|
6226
6226
|
`button:not([disabled])`,
|
|
@@ -9972,38 +9972,38 @@ function Oe$1(e, t, n) {
|
|
|
9972
9972
|
onScopeDispose(o);
|
|
9973
9973
|
}
|
|
9974
9974
|
//#endregion
|
|
9975
|
-
//#region ../internals/dist/composable-
|
|
9976
|
-
function L$1(e, { cycle: t = !0, direction:
|
|
9977
|
-
we$1(e, () => s(
|
|
9975
|
+
//#region ../internals/dist/composable-Cr4VA1Rs.js
|
|
9976
|
+
function L$1(e, { cycle: t = !0, direction: r = `bidirectional`, ignore: i } = {}) {
|
|
9977
|
+
we$1(e, () => s(a(), !1), {
|
|
9978
9978
|
childList: !0,
|
|
9979
9979
|
subtree: !0
|
|
9980
9980
|
});
|
|
9981
|
-
function
|
|
9982
|
-
let t = s$1(G$1(e),
|
|
9983
|
-
return
|
|
9981
|
+
function a() {
|
|
9982
|
+
let t = s$1(G$1(e), i), r = t.findIndex((e) => _$1(e) && !e.hasAttribute(`aria-disabled`)), a = t.findIndex((e) => !e.hasAttribute(`aria-disabled`));
|
|
9983
|
+
return r > -1 ? r : a > -1 ? a : 0;
|
|
9984
9984
|
}
|
|
9985
|
-
function s(t,
|
|
9986
|
-
let
|
|
9987
|
-
|
|
9985
|
+
function s(t, r = !0) {
|
|
9986
|
+
let a = s$1(G$1(e), i);
|
|
9987
|
+
a.forEach((e, n) => e.tabIndex = n === t ? 0 : -1), r && a[t]?.focus();
|
|
9988
9988
|
}
|
|
9989
|
-
function c(
|
|
9990
|
-
let o = G$1(e), c = s$1(o,
|
|
9991
|
-
if (![`Enter`, ` `].includes(
|
|
9989
|
+
function c(a) {
|
|
9990
|
+
let o = G$1(e), c = s$1(o, i);
|
|
9991
|
+
if (![`Enter`, ` `].includes(a.key)) switch (r) {
|
|
9992
9992
|
case `bidirectional`:
|
|
9993
|
-
R$1(
|
|
9993
|
+
R$1(a, o, c, s, i);
|
|
9994
9994
|
break;
|
|
9995
9995
|
case `horizontal`:
|
|
9996
9996
|
case `vertical`:
|
|
9997
|
-
z$1(
|
|
9997
|
+
z$1(a, o, t, r, c, s, i);
|
|
9998
9998
|
break;
|
|
9999
9999
|
}
|
|
10000
10000
|
}
|
|
10001
10001
|
watch(e, (t, n, r) => {
|
|
10002
10002
|
let i = G$1(e);
|
|
10003
|
-
i && (i.addEventListener(`keydown`, c), s(
|
|
10003
|
+
i && (i.addEventListener(`keydown`, c), s(a(), !1), r(() => i.removeEventListener(`keydown`, c)));
|
|
10004
10004
|
}, { immediate: !0 });
|
|
10005
10005
|
}
|
|
10006
|
-
function R$1(e, t,
|
|
10006
|
+
function R$1(e, t, n, r, a) {
|
|
10007
10007
|
let o;
|
|
10008
10008
|
switch (e.key) {
|
|
10009
10009
|
case `ArrowUp`:
|
|
@@ -10021,7 +10021,7 @@ function R$1(e, t, r, i, a) {
|
|
|
10021
10021
|
default: return;
|
|
10022
10022
|
}
|
|
10023
10023
|
let s = c$2(t, document.activeElement, o, a);
|
|
10024
|
-
s &&
|
|
10024
|
+
s && r(n.indexOf(s)), e.preventDefault();
|
|
10025
10025
|
}
|
|
10026
10026
|
function z$1(e, n, r, i, a, o, s) {
|
|
10027
10027
|
let c;
|
|
@@ -10038,11 +10038,7 @@ var oe = `#ef4444`, _e = `#f97316`, Oe = `#f59e0b`, ze = `#eab308`, Xe = `#84cc1
|
|
|
10038
10038
|
//#region src/composable/useChartBaseSetup.ts
|
|
10039
10039
|
function useChartBaseSetup() {
|
|
10040
10040
|
const { t } = useI18n({ useScope: "parent" });
|
|
10041
|
-
|
|
10042
|
-
return {
|
|
10043
|
-
t,
|
|
10044
|
-
chartInstance: computed(() => chartRef.value?.chartInstance ?? null)
|
|
10045
|
-
};
|
|
10041
|
+
return { t };
|
|
10046
10042
|
}
|
|
10047
10043
|
//#endregion
|
|
10048
10044
|
//#region src/composable/useChartLegend.ts
|
|
@@ -11087,7 +11083,7 @@ function buildBoxPlotChartOptions(input) {
|
|
|
11087
11083
|
//#endregion
|
|
11088
11084
|
//#region src/util/options/cartesian/buildBubbleChartOptions.ts
|
|
11089
11085
|
function buildBubbleChartOptions(input) {
|
|
11090
|
-
const { series, palette, t, styles, tooltip = false, xAxisLabels = false, yAxisLabels = false, splitLines = false, advancedOptions = {} } = input;
|
|
11086
|
+
const { series, palette, t, styles, tooltip = false, tooltipValueFormatter, xAxisLabels = false, yAxisLabels = false, splitLines = false, advancedOptions = {} } = input;
|
|
11091
11087
|
return merge({}, buildCartesianBaseOptions({
|
|
11092
11088
|
xAxisType: "value",
|
|
11093
11089
|
yAxisType: "value",
|
|
@@ -11099,7 +11095,8 @@ function buildBubbleChartOptions(input) {
|
|
|
11099
11095
|
}), tooltip ? buildCartesianTooltip({
|
|
11100
11096
|
t,
|
|
11101
11097
|
styles,
|
|
11102
|
-
getSeriesIcons: () => series.map((s) => s.icon)
|
|
11098
|
+
getSeriesIcons: () => series.map((s) => s.icon),
|
|
11099
|
+
valueFormatter: tooltipValueFormatter
|
|
11103
11100
|
}) : { tooltip: { show: false } }, advancedOptions, {
|
|
11104
11101
|
series: series.map((s, i) => toBubbleSeries({
|
|
11105
11102
|
...s,
|
|
@@ -11257,7 +11254,7 @@ function buildMixedChartOptions(input) {
|
|
|
11257
11254
|
//#endregion
|
|
11258
11255
|
//#region src/util/options/cartesian/buildScatterChartOptions.ts
|
|
11259
11256
|
function buildScatterChartOptions(input) {
|
|
11260
|
-
const { series, palette, t, styles, tooltip = false, xAxisLabels = false, yAxisLabels = false, splitLines = false, advancedOptions = {} } = input;
|
|
11257
|
+
const { series, palette, t, styles, tooltip = false, tooltipValueFormatter, xAxisLabels = false, yAxisLabels = false, splitLines = false, advancedOptions = {} } = input;
|
|
11261
11258
|
return merge({}, buildCartesianBaseOptions({
|
|
11262
11259
|
xAxisType: "value",
|
|
11263
11260
|
yAxisType: "value",
|
|
@@ -11269,7 +11266,8 @@ function buildScatterChartOptions(input) {
|
|
|
11269
11266
|
}), tooltip ? buildCartesianTooltip({
|
|
11270
11267
|
t,
|
|
11271
11268
|
styles,
|
|
11272
|
-
getSeriesIcons: () => series.map((s) => s.icon)
|
|
11269
|
+
getSeriesIcons: () => series.map((s) => s.icon),
|
|
11270
|
+
valueFormatter: tooltipValueFormatter
|
|
11273
11271
|
}) : { tooltip: { show: false } }, advancedOptions, {
|
|
11274
11272
|
series: series.map((s, i) => toScatterSeries({
|
|
11275
11273
|
...s,
|
|
@@ -11753,13 +11751,16 @@ var FluxStatisticsBase_default = /* @__PURE__ */ defineComponent({
|
|
|
11753
11751
|
return (_ctx, _cache) => {
|
|
11754
11752
|
return openBlock(), createBlock(unref(FluxPane), { class: normalizeClass(__props.isSmall ? unref(Base_module_default).statisticsBaseSmall : unref(Base_module_default).statisticsBase) }, {
|
|
11755
11753
|
default: withCtx(() => [
|
|
11756
|
-
__props.title ? (openBlock(), createElementBlock("div", {
|
|
11754
|
+
__props.title || __props.icon || slots.info ? (openBlock(), createElementBlock("div", {
|
|
11757
11755
|
key: 0,
|
|
11758
11756
|
class: normalizeClass(unref(Base_module_default).statisticsBaseHeader)
|
|
11759
11757
|
}, [
|
|
11760
|
-
|
|
11761
|
-
slots.info ? (openBlock(), createBlock(unref(FluxTooltip), {
|
|
11758
|
+
__props.title ? (openBlock(), createElementBlock("span", {
|
|
11762
11759
|
key: 0,
|
|
11760
|
+
class: normalizeClass(unref(Base_module_default).statisticsBaseHeaderTitle)
|
|
11761
|
+
}, toDisplayString(__props.title), 3)) : createCommentVNode("", true),
|
|
11762
|
+
slots.info ? (openBlock(), createBlock(unref(FluxTooltip), {
|
|
11763
|
+
key: 1,
|
|
11763
11764
|
direction: "vertical"
|
|
11764
11765
|
}, {
|
|
11765
11766
|
content: withCtx(() => [renderSlot(_ctx.$slots, "info")]),
|
|
@@ -11770,7 +11771,7 @@ var FluxStatisticsBase_default = /* @__PURE__ */ defineComponent({
|
|
|
11770
11771
|
_: 3
|
|
11771
11772
|
})) : createCommentVNode("", true),
|
|
11772
11773
|
__props.icon ? (openBlock(), createBlock(unref(FluxIcon), {
|
|
11773
|
-
key:
|
|
11774
|
+
key: 2,
|
|
11774
11775
|
class: normalizeClass(unref(Base_module_default).statisticsBaseHeaderIcon),
|
|
11775
11776
|
name: __props.icon
|
|
11776
11777
|
}, null, 8, ["class", "name"])) : createCommentVNode("", true)
|
|
@@ -11848,6 +11849,7 @@ var FluxStatisticsBubbleChart_default = /* @__PURE__ */ defineComponent({
|
|
|
11848
11849
|
type: Boolean,
|
|
11849
11850
|
default: false
|
|
11850
11851
|
},
|
|
11852
|
+
tooltipValueFormatter: { type: Function },
|
|
11851
11853
|
xAxisLabels: {
|
|
11852
11854
|
type: Boolean,
|
|
11853
11855
|
default: false
|
|
@@ -11865,6 +11867,7 @@ var FluxStatisticsBubbleChart_default = /* @__PURE__ */ defineComponent({
|
|
|
11865
11867
|
t,
|
|
11866
11868
|
styles: Chart_module_default,
|
|
11867
11869
|
tooltip: __props.tooltip,
|
|
11870
|
+
tooltipValueFormatter: __props.tooltipValueFormatter,
|
|
11868
11871
|
xAxisLabels: __props.xAxisLabels,
|
|
11869
11872
|
yAxisLabels: __props.yAxisLabels,
|
|
11870
11873
|
splitLines: __props.splitLines,
|
|
@@ -12132,9 +12135,6 @@ var DetailsTable_module_default = {
|
|
|
12132
12135
|
detailsTableTitle: `details-table-title`
|
|
12133
12136
|
};
|
|
12134
12137
|
//#endregion
|
|
12135
|
-
//#region src/component/FluxStatisticsDetailsTable.vue?vue&type=script&setup=true&lang.ts
|
|
12136
|
-
var _hoisted_1$1 = ["aria-label"];
|
|
12137
|
-
//#endregion
|
|
12138
12138
|
//#region src/component/FluxStatisticsDetailsTable.vue
|
|
12139
12139
|
var FluxStatisticsDetailsTable_default = /* @__PURE__ */ defineComponent({
|
|
12140
12140
|
__name: "FluxStatisticsDetailsTable",
|
|
@@ -12143,12 +12143,14 @@ var FluxStatisticsDetailsTable_default = /* @__PURE__ */ defineComponent({
|
|
|
12143
12143
|
return (_ctx, _cache) => {
|
|
12144
12144
|
return openBlock(), createElementBlock("div", {
|
|
12145
12145
|
role: "table",
|
|
12146
|
-
"aria-label": __props.title,
|
|
12147
12146
|
class: normalizeClass(unref(DetailsTable_module_default).detailsTable)
|
|
12148
|
-
}, [createElementVNode("div", {
|
|
12147
|
+
}, [createElementVNode("div", {
|
|
12148
|
+
role: "caption",
|
|
12149
|
+
class: normalizeClass(unref(DetailsTable_module_default).detailsTableTitle)
|
|
12150
|
+
}, toDisplayString(__props.title), 3), createElementVNode("div", {
|
|
12149
12151
|
role: "rowgroup",
|
|
12150
12152
|
class: normalizeClass(unref(DetailsTable_module_default).detailsTableRows)
|
|
12151
|
-
}, [renderSlot(_ctx.$slots, "default")], 2)],
|
|
12153
|
+
}, [renderSlot(_ctx.$slots, "default")], 2)], 2);
|
|
12152
12154
|
};
|
|
12153
12155
|
}
|
|
12154
12156
|
});
|
|
@@ -12486,7 +12488,6 @@ var FluxStatisticsLegend_default = /* @__PURE__ */ defineComponent({
|
|
|
12486
12488
|
const slots = useSlots();
|
|
12487
12489
|
const legendContext = inject(FluxStatisticsChartLegendInjectionKey, null);
|
|
12488
12490
|
L$1(useTemplateRef("list"), { direction: "bidirectional" });
|
|
12489
|
-
const hasSlot = computed(() => !!slots.default);
|
|
12490
12491
|
const autoItems = computed(() => legendContext?.items.value ?? []);
|
|
12491
12492
|
const containerClass = computed(() => {
|
|
12492
12493
|
if (__props.variant === "compact") return clsx(Legend_module_default.statisticsLegendCompact, __props.direction === "vertical" ? Legend_module_default.isVertical : Legend_module_default.isHorizontal);
|
|
@@ -12504,7 +12505,7 @@ var FluxStatisticsLegend_default = /* @__PURE__ */ defineComponent({
|
|
|
12504
12505
|
ref: "list",
|
|
12505
12506
|
role: "list",
|
|
12506
12507
|
class: normalizeClass(containerClass.value)
|
|
12507
|
-
}, [
|
|
12508
|
+
}, [unref(slots).default ? renderSlot(_ctx.$slots, "default", { key: 0 }) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(autoItems.value, (item, index) => {
|
|
12508
12509
|
return openBlock(), createBlock(FluxStatisticsLegendItem_default, {
|
|
12509
12510
|
key: `${index}-${item.label}`,
|
|
12510
12511
|
color: item.color,
|
|
@@ -12939,6 +12940,7 @@ var FluxStatisticsScatterChart_default = /* @__PURE__ */ defineComponent({
|
|
|
12939
12940
|
type: Boolean,
|
|
12940
12941
|
default: false
|
|
12941
12942
|
},
|
|
12943
|
+
tooltipValueFormatter: { type: Function },
|
|
12942
12944
|
xAxisLabels: {
|
|
12943
12945
|
type: Boolean,
|
|
12944
12946
|
default: false
|
|
@@ -12956,6 +12958,7 @@ var FluxStatisticsScatterChart_default = /* @__PURE__ */ defineComponent({
|
|
|
12956
12958
|
t,
|
|
12957
12959
|
styles: Chart_module_default,
|
|
12958
12960
|
tooltip: __props.tooltip,
|
|
12961
|
+
tooltipValueFormatter: __props.tooltipValueFormatter,
|
|
12959
12962
|
xAxisLabels: __props.xAxisLabels,
|
|
12960
12963
|
yAxisLabels: __props.yAxisLabels,
|
|
12961
12964
|
splitLines: __props.splitLines,
|