@flux-ui/statistics 3.0.0-next.73 → 3.0.0-next.75
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/FluxStatisticsLegend.vue.d.ts +7 -1
- package/dist/component/index.d.ts +1 -1
- package/dist/composable/index.d.ts +2 -0
- package/dist/composable/useLegendVariant.d.ts +3 -0
- package/dist/index.css +38 -0
- package/dist/index.js +85 -76
- package/dist/index.js.map +1 -1
- package/dist/util/options/cartesian/buildCandlestickChartOptions.d.ts +1 -2
- package/dist/util/options/circular/buildGaugeChartOptions.d.ts +1 -2
- package/package.json +10 -10
- package/src/component/FluxStatisticsAreaChart.vue +1 -1
- package/src/component/FluxStatisticsBarChart.vue +1 -1
- package/src/component/FluxStatisticsBoxPlotChart.vue +1 -1
- package/src/component/FluxStatisticsBubbleChart.vue +1 -1
- package/src/component/FluxStatisticsCandlestickChart.vue +1 -1
- package/src/component/FluxStatisticsDonutChart.vue +1 -1
- package/src/component/FluxStatisticsHeatmapChart.vue +1 -1
- package/src/component/FluxStatisticsLegend.vue +23 -3
- package/src/component/FluxStatisticsLegendItem.vue +9 -2
- package/src/component/FluxStatisticsLineChart.vue +1 -1
- package/src/component/FluxStatisticsMixedChart.vue +1 -1
- package/src/component/FluxStatisticsPercentageBar.vue +1 -1
- package/src/component/FluxStatisticsPieChart.vue +1 -1
- package/src/component/FluxStatisticsPolarAreaChart.vue +1 -1
- package/src/component/FluxStatisticsRadarChart.vue +1 -1
- package/src/component/FluxStatisticsRadialBar.vue +1 -1
- package/src/component/FluxStatisticsScatterChart.vue +1 -1
- package/src/component/FluxStatisticsTreemapChart.vue +1 -1
- package/src/component/index.ts +1 -1
- package/src/composable/index.ts +2 -0
- package/src/composable/useLegendVariant.ts +5 -0
- package/src/css/Legend.module.scss +45 -0
- package/src/index.ts +2 -2
- package/src/util/options/cartesian/buildCandlestickChartOptions.ts +1 -2
- package/src/util/options/circular/buildGaugeChartOptions.ts +1 -2
|
@@ -1,9 +1,15 @@
|
|
|
1
|
+
import { FluxDirection } from '@flux-ui/types';
|
|
2
|
+
import { FluxStatisticsLegendVariant } from '../composable';
|
|
1
3
|
import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
|
|
4
|
+
type __VLS_Props = {
|
|
5
|
+
readonly direction?: FluxDirection;
|
|
6
|
+
readonly variant?: FluxStatisticsLegendVariant;
|
|
7
|
+
};
|
|
2
8
|
declare var __VLS_1: {};
|
|
3
9
|
type __VLS_Slots = {} & {
|
|
4
10
|
default?: (props: typeof __VLS_1) => any;
|
|
5
11
|
};
|
|
6
|
-
declare const __VLS_base: DefineComponent<
|
|
12
|
+
declare const __VLS_base: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
|
|
7
13
|
declare const _default: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
8
14
|
export default _default;
|
|
9
15
|
type __VLS_WithSlots<T, S> = T & {
|
|
@@ -14,8 +14,8 @@ export { default as FluxStatisticsDonutChart } from './FluxStatisticsDonutChart.
|
|
|
14
14
|
export { default as FluxStatisticsEmpty } from './FluxStatisticsEmpty.vue';
|
|
15
15
|
export { default as FluxStatisticsGrid } from './FluxStatisticsGrid.vue';
|
|
16
16
|
export { default as FluxStatisticsHeatmapChart } from './FluxStatisticsHeatmapChart.vue';
|
|
17
|
-
export { default as FluxStatisticsLineChart } from './FluxStatisticsLineChart.vue';
|
|
18
17
|
export { default as FluxStatisticsKpi } from './FluxStatisticsKpi.vue';
|
|
18
|
+
export { default as FluxStatisticsLineChart } from './FluxStatisticsLineChart.vue';
|
|
19
19
|
export { default as FluxStatisticsLegend } from './FluxStatisticsLegend.vue';
|
|
20
20
|
export { default as FluxStatisticsLegendItem } from './FluxStatisticsLegendItem.vue';
|
|
21
21
|
export { default as FluxStatisticsLegendScope } from './FluxStatisticsLegendScope.vue';
|
|
@@ -10,3 +10,5 @@ export type { UseChartSlicesSetupReturn } from './useChartSlicesSetup';
|
|
|
10
10
|
export { useChartSlicesSetup } from './useChartSlicesSetup';
|
|
11
11
|
export type { EChartsInstance, EChartsOption, UseEChartsReturn } from './useECharts';
|
|
12
12
|
export { useECharts } from './useECharts';
|
|
13
|
+
export type { FluxStatisticsLegendVariant } from './useLegendVariant';
|
|
14
|
+
export { FluxStatisticsLegendVariantInjectionKey } from './useLegendVariant';
|
package/dist/index.css
CHANGED
|
@@ -513,6 +513,44 @@
|
|
|
513
513
|
right: 0;
|
|
514
514
|
content: "";
|
|
515
515
|
border-top: 1px dashed var(--surface-stroke);
|
|
516
|
+
}
|
|
517
|
+
|
|
518
|
+
.statistics-legend-compact {
|
|
519
|
+
display: flex;
|
|
520
|
+
user-select: none;
|
|
521
|
+
}
|
|
522
|
+
.statistics-legend-compact.is-horizontal {
|
|
523
|
+
flex-flow: row wrap;
|
|
524
|
+
gap: 12px 18px;
|
|
525
|
+
}
|
|
526
|
+
.statistics-legend-compact.is-vertical {
|
|
527
|
+
flex-flow: column;
|
|
528
|
+
gap: 12px;
|
|
529
|
+
}
|
|
530
|
+
|
|
531
|
+
.statistics-legend-item-compact {
|
|
532
|
+
--color: var(--primary-600);
|
|
533
|
+
display: flex;
|
|
534
|
+
align-items: center;
|
|
535
|
+
flex-flow: row nowrap;
|
|
536
|
+
gap: 6px;
|
|
537
|
+
font-size: 14px;
|
|
538
|
+
line-height: 1;
|
|
539
|
+
white-space: nowrap;
|
|
540
|
+
}
|
|
541
|
+
.statistics-legend-item-compact .statistics-legend-item-color {
|
|
542
|
+
margin: 0;
|
|
543
|
+
border-radius: var(--radius-full);
|
|
544
|
+
}
|
|
545
|
+
.statistics-legend-item-compact .statistics-legend-item-icon {
|
|
546
|
+
margin: 0;
|
|
547
|
+
}
|
|
548
|
+
.statistics-legend-item-compact .statistics-legend-item-label {
|
|
549
|
+
flex-grow: 0;
|
|
550
|
+
font-weight: 400;
|
|
551
|
+
}
|
|
552
|
+
.statistics-legend-item-compact .statistics-legend-item-value {
|
|
553
|
+
margin-left: 0;
|
|
516
554
|
}.statistics-meter {
|
|
517
555
|
--color: var(--primary-600);
|
|
518
556
|
--percentage: 0%;
|
package/dist/index.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
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";
|
|
1
|
+
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";
|
|
2
2
|
import { useI18n } from "vue-i18n";
|
|
3
3
|
import { FluxIcon, FluxPane, FluxToolbar, FluxTooltip, iconRegistry } from "@flux-ui/components";
|
|
4
4
|
import { merge } from "lodash-es";
|
|
5
5
|
import { init } from "echarts/core";
|
|
6
6
|
//#region ../internals/dist/data/index.js
|
|
7
|
-
var oe = `#ef4444`, _e$1 = `#f97316`, Oe = `#f59e0b`, ze = `#eab308`, Xe = `#84cc16`, st = `#22c55e`, vt = `#10b981`, kt = `#14b8a6`, Bt = `#06b6d4`, Zt = `#0ea5e9`, an = `#dbeafe`, sn = `#93c5fd`, ln = `#3b82f6`, dn = `#1d4ed8`, bn = `#6366f1`, jn = `#8b5cf6`, Hn = `#a855f7`, $n = `#d946ef`, ur = `#ec4899`,
|
|
7
|
+
var oe = `#ef4444`, _e$1 = `#f97316`, Oe = `#f59e0b`, ze = `#eab308`, Xe = `#84cc16`, st = `#22c55e`, vt = `#10b981`, kt = `#14b8a6`, Bt = `#06b6d4`, Zt = `#0ea5e9`, an = `#dbeafe`, sn = `#93c5fd`, ln = `#3b82f6`, dn = `#1d4ed8`, bn = `#6366f1`, jn = `#8b5cf6`, Hn = `#a855f7`, $n = `#d946ef`, ur = `#ec4899`, xr = `#f43f5e`;
|
|
8
8
|
//#endregion
|
|
9
9
|
//#region src/composable/useChartBaseSetup.ts
|
|
10
10
|
function useChartBaseSetup() {
|
|
@@ -6808,7 +6808,7 @@ function friendlyDateTime(dateTimeish) {
|
|
|
6808
6808
|
else throw new InvalidArgumentError(`Unknown datetime argument: ${dateTimeish}, of type ${typeof dateTimeish}`);
|
|
6809
6809
|
}
|
|
6810
6810
|
//#endregion
|
|
6811
|
-
//#region ../../node_modules/.bun/@basmilius+utils@3.
|
|
6811
|
+
//#region ../../node_modules/.bun/@basmilius+utils@3.40.0+f2ed1ec6a4c7f7fd/node_modules/@basmilius/utils/dist/index.mjs
|
|
6812
6812
|
function p$2(e, t = 0) {
|
|
6813
6813
|
let n = typeof navigator < `u` ? navigator.language : `nl-NL`;
|
|
6814
6814
|
return new Intl.NumberFormat(n, {
|
|
@@ -10767,7 +10767,7 @@ useMode(definition$2);
|
|
|
10767
10767
|
useMode(definition$1);
|
|
10768
10768
|
useMode(definition);
|
|
10769
10769
|
//#endregion
|
|
10770
|
-
//#region ../../node_modules/.bun/@basmilius+http-client@3.
|
|
10770
|
+
//#region ../../node_modules/.bun/@basmilius+http-client@3.40.0+24cbb59c6ffe9d25/node_modules/@basmilius/http-client/dist/index.mjs
|
|
10771
10771
|
function adapter_default(Parent) {
|
|
10772
10772
|
return class extends Parent {
|
|
10773
10773
|
constructor(...args) {
|
|
@@ -10775,11 +10775,6 @@ function adapter_default(Parent) {
|
|
|
10775
10775
|
}
|
|
10776
10776
|
};
|
|
10777
10777
|
}
|
|
10778
|
-
function bound_default() {
|
|
10779
|
-
return (target, method) => {
|
|
10780
|
-
target[method] = target[method].bind(target);
|
|
10781
|
-
};
|
|
10782
|
-
}
|
|
10783
10778
|
/**
|
|
10784
10779
|
* Checks if the two given values are equal. When both values are a
|
|
10785
10780
|
* dto, the check is done by firstly converthing them to JSON.
|
|
@@ -10803,7 +10798,7 @@ var TRIGGER = Symbol();
|
|
|
10803
10798
|
* Checks if the given object is a dto.
|
|
10804
10799
|
*/
|
|
10805
10800
|
function isDto_default(obj) {
|
|
10806
|
-
return typeof obj === "object" && obj
|
|
10801
|
+
return obj && typeof obj === "object" && !!obj[NAME];
|
|
10807
10802
|
}
|
|
10808
10803
|
/**
|
|
10809
10804
|
* Asserts that the given object is a dto.
|
|
@@ -10858,9 +10853,6 @@ var markDtoClean = circularProtect_default(function(obj) {
|
|
|
10858
10853
|
if (!obj[CHILDREN] || obj[CHILDREN].length === 0) return;
|
|
10859
10854
|
obj[CHILDREN].filter(isDtoDirty_default).forEach(markDtoClean);
|
|
10860
10855
|
});
|
|
10861
|
-
function isProxiedArray_default(value) {
|
|
10862
|
-
return Array.isArray(value) && PARENT in value;
|
|
10863
|
-
}
|
|
10864
10856
|
/**
|
|
10865
10857
|
* Marks the given dto dirty.
|
|
10866
10858
|
*/
|
|
@@ -10887,7 +10879,7 @@ function relateDtoTo_default(dto, parent, key) {
|
|
|
10887
10879
|
*/
|
|
10888
10880
|
function relateValueTo_default(dto, key, value) {
|
|
10889
10881
|
if (isDto_default(value)) relateDtoTo_default(value, dto, key);
|
|
10890
|
-
else if (
|
|
10882
|
+
else if (Array.isArray(value)) {
|
|
10891
10883
|
for (const item of value) {
|
|
10892
10884
|
if (!isDto_default(item)) continue;
|
|
10893
10885
|
relateDtoTo_default(item, dto, key);
|
|
@@ -10919,7 +10911,7 @@ function unrelateDtoFrom_default(dto, parent) {
|
|
|
10919
10911
|
*/
|
|
10920
10912
|
function unrelateValueFrom_default(dto, value) {
|
|
10921
10913
|
if (isDto_default(value)) unrelateDtoFrom_default(value, dto);
|
|
10922
|
-
else if (
|
|
10914
|
+
else if (Array.isArray(value)) {
|
|
10923
10915
|
for (const item of value) if (isDto_default(item)) unrelateDtoFrom_default(item, dto);
|
|
10924
10916
|
value[PARENT] = void 0;
|
|
10925
10917
|
value[PARENT_KEY] = void 0;
|
|
@@ -10963,7 +10955,7 @@ var arrayProxy_default = {
|
|
|
10963
10955
|
}
|
|
10964
10956
|
};
|
|
10965
10957
|
/**
|
|
10966
|
-
* Checks if the
|
|
10958
|
+
* Checks if the given key should be ignored by the proxy.
|
|
10967
10959
|
*/
|
|
10968
10960
|
function ignored(target, key) {
|
|
10969
10961
|
return typeof key === "symbol" || typeof target[key] === "function" || key === "length";
|
|
@@ -11008,7 +11000,7 @@ var instanceProxy_default = {
|
|
|
11008
11000
|
const oldValue = descriptor.get?.call(target) ?? void 0;
|
|
11009
11001
|
if (areEqual_default(value, oldValue)) return true;
|
|
11010
11002
|
unrelateValueFrom_default(target, oldValue);
|
|
11011
|
-
if (Array.isArray(value) && !
|
|
11003
|
+
if (Array.isArray(value) && !value[PROXY]) value = new Proxy(value, arrayProxy_default);
|
|
11012
11004
|
descriptor.set.call(target, value);
|
|
11013
11005
|
relateValueTo_default(target, key, value);
|
|
11014
11006
|
markDtoDirty(target, key);
|
|
@@ -11132,7 +11124,7 @@ function dto_default(clazz) {
|
|
|
11132
11124
|
K(clazz.prototype, DESCRIPTORS, descriptors);
|
|
11133
11125
|
K(clazz.prototype, NAME, clazz.name);
|
|
11134
11126
|
K(clazz.prototype, PROPERTIES, properties);
|
|
11135
|
-
K(clazz, Symbol.hasInstance, (instance) => typeof instance === "object" && instance
|
|
11127
|
+
K(clazz, Symbol.hasInstance, (instance) => typeof instance === "object" && instance?.[NAME] === clazz.name);
|
|
11136
11128
|
G$1(clazz, "clone", clone_default);
|
|
11137
11129
|
G$1(clazz, "fill", fill_default);
|
|
11138
11130
|
G$1(clazz, "toJSON", toJSON_default);
|
|
@@ -11153,12 +11145,6 @@ function __decorate(decorators, target, key, desc) {
|
|
|
11153
11145
|
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
11154
11146
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
11155
11147
|
}
|
|
11156
|
-
var X = class {
|
|
11157
|
-
test() {
|
|
11158
|
-
return true;
|
|
11159
|
-
}
|
|
11160
|
-
};
|
|
11161
|
-
__decorate([bound_default()], X.prototype, "test", null);
|
|
11162
11148
|
var BlobResponse = class BlobResponse {
|
|
11163
11149
|
get blob() {
|
|
11164
11150
|
return this.#blob;
|
|
@@ -11271,7 +11257,7 @@ var HttpAdapter = _HttpAdapter = class HttpAdapter {
|
|
|
11271
11257
|
const defaultFilename = `download-${DateTime.now().toFormat("yyyy-MM-dd HH-mm-ss")}`;
|
|
11272
11258
|
if (!header.startsWith("attachment")) return defaultFilename;
|
|
11273
11259
|
const matches = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/.exec(header);
|
|
11274
|
-
if (
|
|
11260
|
+
if ((matches?.length || 0) < 2) return defaultFilename;
|
|
11275
11261
|
return matches[1].replaceAll("'", "").replaceAll("\"", "").replaceAll("/", "-").replaceAll(":", "-");
|
|
11276
11262
|
}
|
|
11277
11263
|
static parseRequestError(data, statusCode) {
|
|
@@ -11279,7 +11265,12 @@ var HttpAdapter = _HttpAdapter = class HttpAdapter {
|
|
|
11279
11265
|
}
|
|
11280
11266
|
static parseValidationError(data) {
|
|
11281
11267
|
let errors;
|
|
11282
|
-
if (data.errors)
|
|
11268
|
+
if (data.errors) {
|
|
11269
|
+
errors = {};
|
|
11270
|
+
Object.entries(data.errors).forEach(([key, value]) => {
|
|
11271
|
+
errors[key] = _HttpAdapter.parseValidationError(value);
|
|
11272
|
+
});
|
|
11273
|
+
}
|
|
11283
11274
|
return new ValidationError_default(data.code, data.error, data.error_description, errors, data.params);
|
|
11284
11275
|
}
|
|
11285
11276
|
};
|
|
@@ -11334,6 +11325,9 @@ function useECharts(target, options) {
|
|
|
11334
11325
|
resize: () => chartInstance.value?.resize()
|
|
11335
11326
|
};
|
|
11336
11327
|
}
|
|
11328
|
+
//#endregion
|
|
11329
|
+
//#region src/composable/useLegendVariant.ts
|
|
11330
|
+
var FluxStatisticsLegendVariantInjectionKey = Symbol("flux-statistics-legend-variant");
|
|
11337
11331
|
var Chart_module_default = {
|
|
11338
11332
|
pane: `pane`,
|
|
11339
11333
|
statisticsChart: `statistics-chart`,
|
|
@@ -12042,6 +12036,51 @@ var FluxStatisticsHeatmapChart_default = /* @__PURE__ */ defineComponent({
|
|
|
12042
12036
|
};
|
|
12043
12037
|
}
|
|
12044
12038
|
});
|
|
12039
|
+
var Kpi_module_default = {
|
|
12040
|
+
statisticsKpiBottom: `statistics-kpi-bottom`,
|
|
12041
|
+
statisticsChange: `statistics-change`,
|
|
12042
|
+
statisticsKpiFooter: `statistics-kpi-footer`,
|
|
12043
|
+
statisticsKpiValue: `statistics-kpi-value`
|
|
12044
|
+
};
|
|
12045
|
+
//#endregion
|
|
12046
|
+
//#region src/component/FluxStatisticsKpi.vue
|
|
12047
|
+
var FluxStatisticsKpi_default = /* @__PURE__ */ defineComponent({
|
|
12048
|
+
__name: "FluxStatisticsKpi",
|
|
12049
|
+
props: {
|
|
12050
|
+
footer: {},
|
|
12051
|
+
change: {},
|
|
12052
|
+
icon: {},
|
|
12053
|
+
title: {},
|
|
12054
|
+
value: {}
|
|
12055
|
+
},
|
|
12056
|
+
setup(__props) {
|
|
12057
|
+
return (_ctx, _cache) => {
|
|
12058
|
+
return openBlock(), createBlock(FluxStatisticsBase_default, {
|
|
12059
|
+
"is-small": "",
|
|
12060
|
+
icon: __props.icon,
|
|
12061
|
+
title: __props.title
|
|
12062
|
+
}, {
|
|
12063
|
+
default: withCtx(() => [createElementVNode("div", { class: normalizeClass(unref(Kpi_module_default).statisticsKpiValue) }, toDisplayString(__props.value), 3), __props.change || __props.footer ? (openBlock(), createElementBlock("div", {
|
|
12064
|
+
key: 0,
|
|
12065
|
+
class: normalizeClass(unref(Kpi_module_default).statisticsKpiBottom)
|
|
12066
|
+
}, [__props.change ? (openBlock(), createBlock(FluxStatisticsChange_default, {
|
|
12067
|
+
key: 0,
|
|
12068
|
+
color: __props.change.color,
|
|
12069
|
+
icon: __props.change.icon,
|
|
12070
|
+
value: __props.change.value
|
|
12071
|
+
}, null, 8, [
|
|
12072
|
+
"color",
|
|
12073
|
+
"icon",
|
|
12074
|
+
"value"
|
|
12075
|
+
])) : createCommentVNode("", true), __props.footer ? (openBlock(), createElementBlock("span", {
|
|
12076
|
+
key: 1,
|
|
12077
|
+
class: normalizeClass(unref(Kpi_module_default).statisticsKpiFooter)
|
|
12078
|
+
}, toDisplayString(__props.footer), 3)) : createCommentVNode("", true)], 2)) : createCommentVNode("", true)]),
|
|
12079
|
+
_: 1
|
|
12080
|
+
}, 8, ["icon", "title"]);
|
|
12081
|
+
};
|
|
12082
|
+
}
|
|
12083
|
+
});
|
|
12045
12084
|
//#endregion
|
|
12046
12085
|
//#region src/component/FluxStatisticsLineChart.vue
|
|
12047
12086
|
var FluxStatisticsLineChart_default = /* @__PURE__ */ defineComponent({
|
|
@@ -12091,51 +12130,6 @@ var FluxStatisticsLineChart_default = /* @__PURE__ */ defineComponent({
|
|
|
12091
12130
|
};
|
|
12092
12131
|
}
|
|
12093
12132
|
});
|
|
12094
|
-
var Kpi_module_default = {
|
|
12095
|
-
statisticsKpiBottom: `statistics-kpi-bottom`,
|
|
12096
|
-
statisticsChange: `statistics-change`,
|
|
12097
|
-
statisticsKpiFooter: `statistics-kpi-footer`,
|
|
12098
|
-
statisticsKpiValue: `statistics-kpi-value`
|
|
12099
|
-
};
|
|
12100
|
-
//#endregion
|
|
12101
|
-
//#region src/component/FluxStatisticsKpi.vue
|
|
12102
|
-
var FluxStatisticsKpi_default = /* @__PURE__ */ defineComponent({
|
|
12103
|
-
__name: "FluxStatisticsKpi",
|
|
12104
|
-
props: {
|
|
12105
|
-
footer: {},
|
|
12106
|
-
change: {},
|
|
12107
|
-
icon: {},
|
|
12108
|
-
title: {},
|
|
12109
|
-
value: {}
|
|
12110
|
-
},
|
|
12111
|
-
setup(__props) {
|
|
12112
|
-
return (_ctx, _cache) => {
|
|
12113
|
-
return openBlock(), createBlock(FluxStatisticsBase_default, {
|
|
12114
|
-
"is-small": "",
|
|
12115
|
-
icon: __props.icon,
|
|
12116
|
-
title: __props.title
|
|
12117
|
-
}, {
|
|
12118
|
-
default: withCtx(() => [createElementVNode("div", { class: normalizeClass(unref(Kpi_module_default).statisticsKpiValue) }, toDisplayString(__props.value), 3), __props.change || __props.footer ? (openBlock(), createElementBlock("div", {
|
|
12119
|
-
key: 0,
|
|
12120
|
-
class: normalizeClass(unref(Kpi_module_default).statisticsKpiBottom)
|
|
12121
|
-
}, [__props.change ? (openBlock(), createBlock(FluxStatisticsChange_default, {
|
|
12122
|
-
key: 0,
|
|
12123
|
-
color: __props.change.color,
|
|
12124
|
-
icon: __props.change.icon,
|
|
12125
|
-
value: __props.change.value
|
|
12126
|
-
}, null, 8, [
|
|
12127
|
-
"color",
|
|
12128
|
-
"icon",
|
|
12129
|
-
"value"
|
|
12130
|
-
])) : createCommentVNode("", true), __props.footer ? (openBlock(), createElementBlock("span", {
|
|
12131
|
-
key: 1,
|
|
12132
|
-
class: normalizeClass(unref(Kpi_module_default).statisticsKpiFooter)
|
|
12133
|
-
}, toDisplayString(__props.footer), 3)) : createCommentVNode("", true)], 2)) : createCommentVNode("", true)]),
|
|
12134
|
-
_: 1
|
|
12135
|
-
}, 8, ["icon", "title"]);
|
|
12136
|
-
};
|
|
12137
|
-
}
|
|
12138
|
-
});
|
|
12139
12133
|
var Legend_module_default = {
|
|
12140
12134
|
statisticsLegend: `statistics-legend`,
|
|
12141
12135
|
statisticsChartPaneBody: `statistics-chart-pane-body`,
|
|
@@ -12144,7 +12138,11 @@ var Legend_module_default = {
|
|
|
12144
12138
|
statisticsLegendItemColor: `statistics-legend-item-color`,
|
|
12145
12139
|
statisticsLegendItemIcon: `statistics-legend-item-icon`,
|
|
12146
12140
|
statisticsLegendItemLabel: `statistics-legend-item-label`,
|
|
12147
|
-
statisticsLegendItemValue: `statistics-legend-item-value
|
|
12141
|
+
statisticsLegendItemValue: `statistics-legend-item-value`,
|
|
12142
|
+
statisticsLegendCompact: `statistics-legend-compact`,
|
|
12143
|
+
isHorizontal: `is-horizontal`,
|
|
12144
|
+
isVertical: `is-vertical`,
|
|
12145
|
+
statisticsLegendItemCompact: `statistics-legend-item-compact`
|
|
12148
12146
|
};
|
|
12149
12147
|
//#endregion
|
|
12150
12148
|
//#region src/component/FluxStatisticsLegendItem.vue
|
|
@@ -12158,6 +12156,8 @@ var FluxStatisticsLegendItem_default = /* @__PURE__ */ defineComponent({
|
|
|
12158
12156
|
value: {}
|
|
12159
12157
|
},
|
|
12160
12158
|
setup(__props) {
|
|
12159
|
+
const variantRef = inject(FluxStatisticsLegendVariantInjectionKey, null);
|
|
12160
|
+
const variant = computed(() => variantRef?.value ?? "detailed");
|
|
12161
12161
|
const colorValue = computed(() => {
|
|
12162
12162
|
if (!__props.color) return;
|
|
12163
12163
|
if ([
|
|
@@ -12172,7 +12172,7 @@ var FluxStatisticsLegendItem_default = /* @__PURE__ */ defineComponent({
|
|
|
12172
12172
|
});
|
|
12173
12173
|
return (_ctx, _cache) => {
|
|
12174
12174
|
return openBlock(), createElementBlock("div", {
|
|
12175
|
-
class: normalizeClass(unref(clsx)(unref(Legend_module_default).statisticsLegendItem, __props.isHovered && unref(Legend_module_default).isHovered)),
|
|
12175
|
+
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)),
|
|
12176
12176
|
style: normalizeStyle({ "--color": colorValue.value })
|
|
12177
12177
|
}, [
|
|
12178
12178
|
__props.icon ? (openBlock(), createBlock(unref(FluxIcon), {
|
|
@@ -12200,11 +12200,20 @@ var FluxStatisticsLegendItem_default = /* @__PURE__ */ defineComponent({
|
|
|
12200
12200
|
//#region src/component/FluxStatisticsLegend.vue
|
|
12201
12201
|
var FluxStatisticsLegend_default = /* @__PURE__ */ defineComponent({
|
|
12202
12202
|
__name: "FluxStatisticsLegend",
|
|
12203
|
+
props: {
|
|
12204
|
+
direction: { default: "horizontal" },
|
|
12205
|
+
variant: { default: "detailed" }
|
|
12206
|
+
},
|
|
12203
12207
|
setup(__props) {
|
|
12204
12208
|
const slots = useSlots();
|
|
12205
12209
|
const legendContext = inject(FluxStatisticsChartLegendInjectionKey, null);
|
|
12206
12210
|
const hasSlot = computed(() => !!slots.default);
|
|
12207
12211
|
const autoItems = computed(() => legendContext?.items.value ?? []);
|
|
12212
|
+
const containerClass = computed(() => {
|
|
12213
|
+
if (__props.variant === "compact") return clsx(Legend_module_default.statisticsLegendCompact, __props.direction === "vertical" ? Legend_module_default.isVertical : Legend_module_default.isHorizontal);
|
|
12214
|
+
return Legend_module_default.statisticsLegend;
|
|
12215
|
+
});
|
|
12216
|
+
provide(FluxStatisticsLegendVariantInjectionKey, toRef(() => __props.variant));
|
|
12208
12217
|
function onItemMouseEnter(index) {
|
|
12209
12218
|
if (legendContext) legendContext.hoveredIndex.value = index;
|
|
12210
12219
|
}
|
|
@@ -12212,7 +12221,7 @@ var FluxStatisticsLegend_default = /* @__PURE__ */ defineComponent({
|
|
|
12212
12221
|
if (legendContext) legendContext.hoveredIndex.value = null;
|
|
12213
12222
|
}
|
|
12214
12223
|
return (_ctx, _cache) => {
|
|
12215
|
-
return openBlock(), createElementBlock("div", { class: normalizeClass(
|
|
12224
|
+
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) => {
|
|
12216
12225
|
return openBlock(), createBlock(FluxStatisticsLegendItem_default, {
|
|
12217
12226
|
key: item.label,
|
|
12218
12227
|
color: item.color,
|
|
@@ -12772,9 +12781,9 @@ var CHART_COLORFUL_COLORS = [
|
|
|
12772
12781
|
Hn,
|
|
12773
12782
|
$n,
|
|
12774
12783
|
ur,
|
|
12775
|
-
|
|
12784
|
+
xr
|
|
12776
12785
|
];
|
|
12777
12786
|
//#endregion
|
|
12778
|
-
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 };
|
|
12787
|
+
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 };
|
|
12779
12788
|
|
|
12780
12789
|
//# sourceMappingURL=index.js.map
|