@lumal/charts 0.0.2-beta → 0.0.3-beta
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/CHANGELOG.md +18 -0
- package/README.md +9 -1
- package/dist/charts.css +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.js +110 -103
- package/dist/src/LumalChart.vue.d.ts.map +1 -1
- package/dist/src/LumalChartPanel.vue.d.ts +1 -1
- package/dist/src/LumalChartPanel.vue.d.ts.map +1 -1
- package/package.json +6 -5
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
# @lumal/charts
|
|
2
|
+
|
|
3
|
+
## 0.0.3-beta (2026-10-16)
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 图表 peer 依赖升级为 ECharts 6 / vue-echarts 8，开发与示例使用 ECharts 6.1.0 / vue-echarts 8.3.2。
|
|
8
|
+
- 不再声明兼容 ECharts 5 / vue-echarts 7；默认主题、图例及标签布局遵循 ECharts 6。
|
|
9
|
+
|
|
10
|
+
### Patch Changes
|
|
11
|
+
|
|
12
|
+
- 正确转发 VChart 图表事件，动画优先级调整为显式 prop、option、reduced-motion 默认值。
|
|
13
|
+
- 移除重复 resize 监听，接通 chartWidth/tableWidth 布局样式。
|
|
14
|
+
- 增加真实 SVG 引擎的更新、系列删除与销毁回归。
|
|
15
|
+
|
|
16
|
+
## 0.0.2-beta (2026-08-01)
|
|
17
|
+
|
|
18
|
+
- Version bump only, to stay in lockstep with the other @lumal packages.
|
package/README.md
CHANGED
|
@@ -5,9 +5,13 @@ Lumal 可选图表包，基于 ECharts 与 vue-echarts 封装轻量图表组件
|
|
|
5
5
|
## 安装
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
pnpm add @lumal/charts echarts vue-echarts vue
|
|
8
|
+
pnpm add @lumal/charts@0.0.3-beta echarts@^6 vue-echarts@^8 vue
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
+
支持 ECharts 6、vue-echarts 8 和 Vue 3.5+。应用仍需按需注册图表、组件和渲染器。
|
|
12
|
+
ECharts 6 调整了默认配色、图例位置和标签布局，本包不会强制恢复旧主题；需要保持原有外观时，
|
|
13
|
+
请按 [ECharts 6 迁移指南](https://echarts.apache.org/handbook/en/basics/release-note/v6-upgrade-guide/) 在应用侧配置。
|
|
14
|
+
|
|
11
15
|
## 用法
|
|
12
16
|
|
|
13
17
|
```ts
|
|
@@ -39,3 +43,7 @@ import '@lumal/charts/style.css'
|
|
|
39
43
|
- `LumalChartPanel`：支持查询区、图表/表格切换、导出、重试、loading/empty/error 和无障碍摘要的工作流面板。
|
|
40
44
|
- `useChartResize`：监听容器尺寸变化并触发图表 resize。
|
|
41
45
|
- `resolveChartPanelStyle`：图表区/表格区宽度到 CSS 变量的映射。
|
|
46
|
+
|
|
47
|
+
`LumalChart` 的 class/style 保留在外层，其他 attrs 和事件传给 VChart；`@click` 接收 ECharts 参数，DOM 事件可使用 vue-echarts 的 `native:` 事件前缀。动画优先级为显式 `animation` prop > `options.animation` > reduced-motion 默认值。容器自适应只由 VChart 管理，`autoResize: false` 不安装额外尺寸监听。
|
|
48
|
+
|
|
49
|
+
`LumalChartPanel.chartWidth` / `tableWidth` 分别控制图表与表格视图的实际宽度，数字按 px 处理、字符串保留 CSS 单位，均受父容器 `max-width: 100%` 约束。
|
package/dist/charts.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.lumal-chart[data-v-
|
|
1
|
+
.lumal-chart[data-v-f9365923],.lumal-chart__canvas[data-v-f9365923]{width:100%;height:100%}.lumal-chart-panel[data-v-d3152c00]{flex-direction:column;gap:12px;display:flex}.lumal-chart-panel__header[data-v-d3152c00]{justify-content:space-between;align-items:center;gap:16px;display:flex}.lumal-chart-panel__query[data-v-d3152c00]{border-radius:var(--lumal-radius-base,8px);background:var(--el-fill-color-light,Canvas);padding:12px}.lumal-chart-panel__title[data-v-d3152c00]{margin:0;font-size:15px;font-weight:600}.lumal-chart-panel__body[data-v-d3152c00]{width:100%;min-height:160px;position:relative;overflow:hidden}.lumal-chart-panel__body.is-table[data-v-d3152c00]{width:var(--lumal-chart-panel-table-width,100%);max-width:100%;overflow:auto}.lumal-chart-panel__body.is-chart[data-v-d3152c00]{width:var(--lumal-chart-panel-chart-width,100%);max-width:100%}.lumal-chart-panel__status[data-v-d3152c00]{height:100%;color:var(--el-text-color-secondary,CanvasText);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;display:flex}.lumal-chart-panel__status button[data-v-d3152c00],.lumal-chart-panel__actions button[data-v-d3152c00]{border:1px solid var(--el-border-color,currentColor);border-radius:var(--lumal-radius-base,8px);min-width:44px;min-height:44px;color:var(--el-text-color-primary,CanvasText);background:var(--el-bg-color,Canvas);cursor:pointer;padding:0 14px}.lumal-chart-panel__actions[data-v-d3152c00]{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;display:flex}.lumal-chart-panel__view-toggle[data-v-d3152c00]{display:inline-flex}.lumal-chart-panel__view-toggle button[aria-pressed=true][data-v-d3152c00]{border-color:var(--el-color-primary,Highlight);color:var(--el-color-primary,Highlight);background:var(--el-color-primary-light-9,Canvas)}.lumal-chart-panel__summary[data-v-d3152c00]{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.lumal-chart-panel button[data-v-d3152c00]:focus-visible{outline:2px solid var(--el-color-primary,Highlight);outline-offset:2px}@media (width<=640px){.lumal-chart-panel__header[data-v-d3152c00]{flex-direction:column;align-items:flex-start}.lumal-chart-panel__actions[data-v-d3152c00]{justify-content:flex-start;width:100%}}
|
|
2
2
|
/*$vite$:1*/
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require("vue"),l=require("vue-echarts");l=s(l,1);
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require("vue"),l=require("vue-echarts");l=s(l,1);var u=[`aria-label`],d=(0,c.defineComponent)({inheritAttrs:!1,__name:`LumalChart`,props:{options:{},updateOptions:{default:void 0},autoResize:{type:Boolean,default:!0},animation:{type:Boolean,default:void 0},ariaLabel:{default:`数据图表`},width:{default:`100%`},height:{default:`100%`}},setup(e,{expose:t}){let n=e,r=(0,c.shallowRef)(!1),i=(0,c.shallowRef)(!1),a=(0,c.computed)(()=>({...n.options,animation:n.animation??n.options.animation??!i.value})),o;function s(e){i.value=e.matches}let d=(0,c.useTemplateRef)(`chartRef`);(0,c.onMounted)(()=>{typeof window<`u`&&typeof window.matchMedia==`function`&&(o=window.matchMedia(`(prefers-reduced-motion: reduce)`),s(o),o.addEventListener?.(`change`,s)),(0,c.nextTick)(()=>{r.value=!0})}),(0,c.onBeforeUnmount)(()=>{o?.removeEventListener?.(`change`,s)});let f=(0,c.useAttrs)();function p(){return Object.fromEntries(Object.entries(f).filter(([e])=>e!==`class`&&e!==`style`))}return t({resize:()=>d.value?.resize()}),(t,n)=>((0,c.openBlock)(),(0,c.createElementBlock)(`div`,{class:(0,c.normalizeClass)([`lumal-chart`,t.$attrs.class]),role:`img`,"aria-label":e.ariaLabel,style:(0,c.normalizeStyle)([t.$attrs.style,{height:e.height,width:e.width}])},[r.value?((0,c.openBlock)(),(0,c.createBlock)((0,c.unref)(l.default),(0,c.mergeProps)({key:0,ref_key:`chartRef`,ref:d},p(),{class:`lumal-chart__canvas`,option:a.value,"update-options":e.updateOptions,autoresize:e.autoResize}),null,16,[`option`,`update-options`,`autoresize`])):(0,c.createCommentVNode)(``,!0)],14,u))}}),f=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},p=f(d,[[`__scopeId`,`data-v-f9365923`]]);function m(e){if(typeof e==`number`)return Number.isFinite(e)?`${e}px`:void 0;if(typeof e==`string`&&e.trim())return e}function h(e){let t=m(e.chartWidth),n=m(e.tableWidth),r={};return t&&(r[`--lumal-chart-panel-chart-width`]=t),n&&(r[`--lumal-chart-panel-table-width`]=n),Object.keys(r).length>0?r:void 0}var g={key:0,class:`lumal-chart-panel__query`},_={key:1,class:`lumal-chart-panel__header`},v={key:0,class:`lumal-chart-panel__title`},y={class:`lumal-chart-panel__actions`},b={key:0,class:`lumal-chart-panel__view-toggle`,"aria-label":`图表展示方式`},x=[`aria-pressed`],S=[`aria-pressed`],C=[`aria-busy`,`aria-describedby`],w={key:0,class:`lumal-chart-panel__status`,role:`status`},T={key:1,class:`lumal-chart-panel__status is-error`,role:`alert`},E={key:2,class:`lumal-chart-panel__status`,role:`status`},D=f((0,c.defineComponent)({__name:`LumalChartPanel`,props:(0,c.mergeModels)({title:{default:``},options:{default:void 0},loading:{type:Boolean,default:!1},noData:{type:Boolean,default:!1},emptyText:{default:`暂无数据`},height:{default:`320px`},chartWidth:{default:void 0},tableWidth:{default:void 0},error:{type:[Boolean,Error,String],default:!1},errorText:{default:`数据加载失败`},retryText:{default:`重新加载`},summary:{default:``},showExport:{type:Boolean,default:!1},showViewToggle:{type:Boolean,default:!1},animation:{type:Boolean,default:void 0}},{view:{default:`chart`},viewModifiers:{}}),emits:(0,c.mergeModels)([`export`,`retry`],[`update:view`]),setup(e,{expose:t,emit:n}){let r=e,i=n,a=(0,c.useModel)(e,`view`),o=(0,c.useTemplateRef)(`chartRef`),s=`lumal-chart-summary-${(0,c.useId)()}`,l=(0,c.computed)(()=>r.error instanceof Error?r.error.message||r.errorText:typeof r.error==`string`?r.error:r.errorText),u=(0,c.computed)(()=>h({chartWidth:r.chartWidth,tableWidth:r.tableWidth}));return t({resize:()=>o.value?.resize()}),(t,n)=>((0,c.openBlock)(),(0,c.createElementBlock)(`section`,{class:`lumal-chart-panel`,style:(0,c.normalizeStyle)(u.value)},[t.$slots.query?((0,c.openBlock)(),(0,c.createElementBlock)(`div`,g,[(0,c.renderSlot)(t.$slots,`query`,{},void 0,!0)])):(0,c.createCommentVNode)(``,!0),e.title||t.$slots.actions||e.showExport||e.showViewToggle?((0,c.openBlock)(),(0,c.createElementBlock)(`header`,_,[e.title?((0,c.openBlock)(),(0,c.createElementBlock)(`h4`,v,(0,c.toDisplayString)(e.title),1)):(0,c.createCommentVNode)(``,!0),(0,c.createElementVNode)(`div`,y,[(0,c.renderSlot)(t.$slots,`actions`,{},void 0,!0),e.showViewToggle?((0,c.openBlock)(),(0,c.createElementBlock)(`div`,b,[(0,c.createElementVNode)(`button`,{type:`button`,"aria-pressed":a.value===`chart`,onClick:n[0]||=e=>a.value=`chart`},` 图表 `,8,x),(0,c.createElementVNode)(`button`,{type:`button`,"aria-pressed":a.value===`table`,onClick:n[1]||=e=>a.value=`table`},` 表格 `,8,S)])):(0,c.createCommentVNode)(``,!0),e.showExport?((0,c.openBlock)(),(0,c.createElementBlock)(`button`,{key:1,type:`button`,onClick:n[2]||=e=>i(`export`,a.value)},` 导出 `)):(0,c.createCommentVNode)(``,!0)])])):(0,c.createCommentVNode)(``,!0),e.summary?((0,c.openBlock)(),(0,c.createElementBlock)(`p`,{key:2,id:s,class:`lumal-chart-panel__summary`},(0,c.toDisplayString)(e.summary),1)):(0,c.createCommentVNode)(``,!0),(0,c.createElementVNode)(`div`,{class:(0,c.normalizeClass)([`lumal-chart-panel__body`,`is-${a.value}`]),style:(0,c.normalizeStyle)({height:e.height}),"aria-busy":e.loading,"aria-describedby":e.summary?s:void 0},[e.loading?((0,c.openBlock)(),(0,c.createElementBlock)(`div`,w,[(0,c.renderSlot)(t.$slots,`loading`,{},()=>[n[4]||=(0,c.createTextVNode)(` 加载中… `,-1)],!0)])):e.error?((0,c.openBlock)(),(0,c.createElementBlock)(`div`,T,[(0,c.renderSlot)(t.$slots,`error`,{message:l.value,retry:()=>i(`retry`)},()=>[(0,c.createElementVNode)(`span`,null,(0,c.toDisplayString)(l.value),1),(0,c.createElementVNode)(`button`,{type:`button`,onClick:n[3]||=e=>i(`retry`)},(0,c.toDisplayString)(e.retryText),1)],!0)])):e.noData?((0,c.openBlock)(),(0,c.createElementBlock)(`div`,E,[(0,c.renderSlot)(t.$slots,`empty`,{},()=>[(0,c.createTextVNode)((0,c.toDisplayString)(e.emptyText),1)],!0)])):a.value===`table`?(0,c.renderSlot)(t.$slots,`table`,{key:3},void 0,!0):e.options?((0,c.openBlock)(),(0,c.createBlock)(p,{key:4,ref_key:`chartRef`,ref:o,options:e.options,height:e.height,animation:e.animation,"aria-label":e.title||`数据图表`},null,8,[`options`,`height`,`animation`,`aria-label`])):(0,c.renderSlot)(t.$slots,`chart`,{key:5},void 0,!0)],14,C)],4))}}),[[`__scopeId`,`data-v-d3152c00`]]);function O(e,t,n={}){if(n.enabled===!1)return;let r,i=0,a=!1;function o(){let e=t?.value;return!e||e.clientWidth>0&&e.clientHeight>0}function s(){i&&=(typeof cancelAnimationFrame==`function`?cancelAnimationFrame(i):clearTimeout(i),0)}function l(){if(!o())return;s();let t=()=>{i=0,o()&&e.value?.resize()};i=typeof requestAnimationFrame==`function`?requestAnimationFrame(t):setTimeout(t,16)}function u(e){r?.disconnect(),r=void 0,e&&typeof ResizeObserver<`u`&&(r=new ResizeObserver(l),r.observe(e)),l()}function d(){a||typeof window>`u`||(window.addEventListener(`resize`,l,{passive:!0}),a=!0)}function f(){!a||typeof window>`u`||(window.removeEventListener(`resize`,l),a=!1)}(0,c.watch)(e,l,{flush:`post`}),(0,c.onMounted)(()=>{t&&typeof ResizeObserver<`u`?(u(t.value),(0,c.watch)(t,u)):(d(),l())}),(0,c.onBeforeUnmount)(()=>{s(),r?.disconnect(),f()})}function k(e,t){let n=e;return n.install=function(n){n.component(t,e)},n}var A=k(p,`LumalChart`),j=k(D,`LumalChartPanel`);exports.LumalChart=A,exports.LumalChartPanel=j,exports.resolveChartPanelStyle=h,exports.useChartResize=O;
|
package/dist/index.js
CHANGED
|
@@ -1,42 +1,8 @@
|
|
|
1
|
-
import { computed as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, mergeModels as s,
|
|
2
|
-
import
|
|
3
|
-
//#region src/useChartResize.ts
|
|
4
|
-
function C(e, t, n = {}) {
|
|
5
|
-
if (n.enabled === !1) return;
|
|
6
|
-
let r, i = 0, a = !1;
|
|
7
|
-
function o() {
|
|
8
|
-
let e = t?.value;
|
|
9
|
-
return !e || e.clientWidth > 0 && e.clientHeight > 0;
|
|
10
|
-
}
|
|
11
|
-
function s() {
|
|
12
|
-
i &&= (typeof cancelAnimationFrame == "function" ? cancelAnimationFrame(i) : clearTimeout(i), 0);
|
|
13
|
-
}
|
|
14
|
-
function c() {
|
|
15
|
-
if (!o()) return;
|
|
16
|
-
s();
|
|
17
|
-
let t = () => {
|
|
18
|
-
i = 0, o() && e.value?.resize();
|
|
19
|
-
};
|
|
20
|
-
i = typeof requestAnimationFrame == "function" ? requestAnimationFrame(t) : setTimeout(t, 16);
|
|
21
|
-
}
|
|
22
|
-
function l(e) {
|
|
23
|
-
r?.disconnect(), r = void 0, e && typeof ResizeObserver < "u" && (r = new ResizeObserver(c), r.observe(e)), c();
|
|
24
|
-
}
|
|
25
|
-
function u() {
|
|
26
|
-
a || typeof window > "u" || (window.addEventListener("resize", c, { passive: !0 }), a = !0);
|
|
27
|
-
}
|
|
28
|
-
function p() {
|
|
29
|
-
!a || typeof window > "u" || (window.removeEventListener("resize", c), a = !1);
|
|
30
|
-
}
|
|
31
|
-
x(e, c, { flush: "post" }), f(() => {
|
|
32
|
-
t && typeof ResizeObserver < "u" ? (l(t.value), x(t, l)) : (u(), c());
|
|
33
|
-
}), d(() => {
|
|
34
|
-
s(), r?.disconnect(), p();
|
|
35
|
-
});
|
|
36
|
-
}
|
|
37
|
-
//#endregion
|
|
1
|
+
import { computed as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, mergeModels as s, mergeProps as c, nextTick as l, normalizeClass as u, normalizeStyle as d, onBeforeUnmount as f, onMounted as p, openBlock as m, renderSlot as h, shallowRef as g, toDisplayString as _, unref as v, useAttrs as y, useId as b, useModel as x, useTemplateRef as S, watch as C } from "vue";
|
|
2
|
+
import w from "vue-echarts";
|
|
38
3
|
//#region src/LumalChart.vue?vue&type=script&setup=true&lang.ts
|
|
39
|
-
var
|
|
4
|
+
var T = ["aria-label"], E = /*@__PURE__*/ o({
|
|
5
|
+
inheritAttrs: !1,
|
|
40
6
|
__name: "LumalChart",
|
|
41
7
|
props: {
|
|
42
8
|
options: {},
|
|
@@ -54,85 +20,91 @@ var w = ["aria-label"], T = /*@__PURE__*/ o({
|
|
|
54
20
|
height: { default: "100%" }
|
|
55
21
|
},
|
|
56
22
|
setup(i, { expose: a }) {
|
|
57
|
-
let o = i, s =
|
|
23
|
+
let o = i, s = g(!1), h = g(!1), _ = e(() => ({
|
|
58
24
|
...o.options,
|
|
59
|
-
animation: o.animation ?? !
|
|
60
|
-
})),
|
|
61
|
-
function
|
|
62
|
-
|
|
25
|
+
animation: o.animation ?? o.options.animation ?? !h.value
|
|
26
|
+
})), b;
|
|
27
|
+
function x(e) {
|
|
28
|
+
h.value = e.matches;
|
|
63
29
|
}
|
|
64
|
-
let
|
|
65
|
-
|
|
66
|
-
typeof window < "u" && typeof window.matchMedia == "function" && (
|
|
30
|
+
let C = S("chartRef");
|
|
31
|
+
p(() => {
|
|
32
|
+
typeof window < "u" && typeof window.matchMedia == "function" && (b = window.matchMedia("(prefers-reduced-motion: reduce)"), x(b), b.addEventListener?.("change", x)), l(() => {
|
|
67
33
|
s.value = !0;
|
|
68
34
|
});
|
|
69
|
-
}),
|
|
70
|
-
|
|
71
|
-
})
|
|
72
|
-
|
|
35
|
+
}), f(() => {
|
|
36
|
+
b?.removeEventListener?.("change", x);
|
|
37
|
+
});
|
|
38
|
+
let E = y();
|
|
39
|
+
function D() {
|
|
40
|
+
return Object.fromEntries(Object.entries(E).filter(([e]) => e !== "class" && e !== "style"));
|
|
41
|
+
}
|
|
42
|
+
return a({ resize: () => C.value?.resize() }), (e, a) => (m(), r("div", {
|
|
43
|
+
class: u(["lumal-chart", e.$attrs.class]),
|
|
73
44
|
role: "img",
|
|
74
45
|
"aria-label": i.ariaLabel,
|
|
75
|
-
style:
|
|
46
|
+
style: d([e.$attrs.style, {
|
|
76
47
|
height: i.height,
|
|
77
48
|
width: i.width
|
|
78
|
-
})
|
|
79
|
-
}, [s.value ? (
|
|
49
|
+
}])
|
|
50
|
+
}, [s.value ? (m(), t(v(w), c({
|
|
80
51
|
key: 0,
|
|
81
52
|
ref_key: "chartRef",
|
|
82
|
-
ref:
|
|
53
|
+
ref: C
|
|
54
|
+
}, D(), {
|
|
83
55
|
class: "lumal-chart__canvas",
|
|
84
|
-
option:
|
|
56
|
+
option: _.value,
|
|
85
57
|
"update-options": i.updateOptions,
|
|
86
58
|
autoresize: i.autoResize
|
|
87
|
-
}, null,
|
|
59
|
+
}), null, 16, [
|
|
88
60
|
"option",
|
|
89
61
|
"update-options",
|
|
90
62
|
"autoresize"
|
|
91
|
-
])) : n("", !0)],
|
|
63
|
+
])) : n("", !0)], 14, T));
|
|
92
64
|
}
|
|
93
|
-
}),
|
|
65
|
+
}), D = (e, t) => {
|
|
94
66
|
let n = e.__vccOpts || e;
|
|
95
67
|
for (let [e, r] of t) n[e] = r;
|
|
96
68
|
return n;
|
|
97
|
-
},
|
|
69
|
+
}, O = /*#__PURE__*/ D(E, [["__scopeId", "data-v-f9365923"]]);
|
|
98
70
|
//#endregion
|
|
99
71
|
//#region src/panel-style.ts
|
|
100
|
-
function
|
|
72
|
+
function k(e) {
|
|
101
73
|
if (typeof e == "number") return Number.isFinite(e) ? `${e}px` : void 0;
|
|
102
74
|
if (typeof e == "string" && e.trim()) return e;
|
|
103
75
|
}
|
|
104
|
-
function
|
|
105
|
-
let t =
|
|
76
|
+
function A(e) {
|
|
77
|
+
let t = k(e.chartWidth), n = k(e.tableWidth), r = {};
|
|
106
78
|
return t && (r["--lumal-chart-panel-chart-width"] = t), n && (r["--lumal-chart-panel-table-width"] = n), Object.keys(r).length > 0 ? r : void 0;
|
|
107
79
|
}
|
|
108
80
|
//#endregion
|
|
109
81
|
//#region src/LumalChartPanel.vue?vue&type=script&setup=true&lang.ts
|
|
110
|
-
var
|
|
82
|
+
var j = {
|
|
111
83
|
key: 0,
|
|
112
84
|
class: "lumal-chart-panel__query"
|
|
113
|
-
},
|
|
85
|
+
}, M = {
|
|
114
86
|
key: 1,
|
|
115
87
|
class: "lumal-chart-panel__header"
|
|
116
|
-
},
|
|
88
|
+
}, N = {
|
|
117
89
|
key: 0,
|
|
118
90
|
class: "lumal-chart-panel__title"
|
|
119
|
-
},
|
|
91
|
+
}, P = { class: "lumal-chart-panel__actions" }, F = {
|
|
120
92
|
key: 0,
|
|
121
93
|
class: "lumal-chart-panel__view-toggle",
|
|
122
94
|
"aria-label": "图表展示方式"
|
|
123
|
-
},
|
|
95
|
+
}, I = ["aria-pressed"], L = ["aria-pressed"], R = ["aria-busy", "aria-describedby"], z = {
|
|
124
96
|
key: 0,
|
|
125
97
|
class: "lumal-chart-panel__status",
|
|
126
98
|
role: "status"
|
|
127
|
-
},
|
|
99
|
+
}, B = {
|
|
128
100
|
key: 1,
|
|
129
101
|
class: "lumal-chart-panel__status is-error",
|
|
130
102
|
role: "alert"
|
|
131
|
-
},
|
|
103
|
+
}, V = {
|
|
132
104
|
key: 2,
|
|
133
105
|
class: "lumal-chart-panel__status",
|
|
134
106
|
role: "status"
|
|
135
|
-
},
|
|
107
|
+
}, H = /*#__PURE__*/ D(/* @__PURE__ */ o({
|
|
136
108
|
__name: "LumalChartPanel",
|
|
137
109
|
props: /*@__PURE__*/ s({
|
|
138
110
|
title: { default: "" },
|
|
@@ -178,52 +150,52 @@ var A = {
|
|
|
178
150
|
}),
|
|
179
151
|
emits: /*@__PURE__*/ s(["export", "retry"], ["update:view"]),
|
|
180
152
|
setup(o, { expose: s, emit: c }) {
|
|
181
|
-
let
|
|
182
|
-
chartWidth:
|
|
183
|
-
tableWidth:
|
|
153
|
+
let l = o, f = c, p = x(o, "view"), g = S("chartRef"), v = `lumal-chart-summary-${b()}`, y = e(() => l.error instanceof Error ? l.error.message || l.errorText : typeof l.error == "string" ? l.error : l.errorText), C = e(() => A({
|
|
154
|
+
chartWidth: l.chartWidth,
|
|
155
|
+
tableWidth: l.tableWidth
|
|
184
156
|
}));
|
|
185
|
-
return s({ resize: () =>
|
|
157
|
+
return s({ resize: () => g.value?.resize() }), (e, s) => (m(), r("section", {
|
|
186
158
|
class: "lumal-chart-panel",
|
|
187
|
-
style:
|
|
159
|
+
style: d(C.value)
|
|
188
160
|
}, [
|
|
189
|
-
e.$slots.query ? (
|
|
190
|
-
o.title || e.$slots.actions || o.showExport || o.showViewToggle ? (
|
|
191
|
-
|
|
192
|
-
o.showViewToggle ? (
|
|
161
|
+
e.$slots.query ? (m(), r("div", j, [h(e.$slots, "query", {}, void 0, !0)])) : n("", !0),
|
|
162
|
+
o.title || e.$slots.actions || o.showExport || o.showViewToggle ? (m(), r("header", M, [o.title ? (m(), r("h4", N, _(o.title), 1)) : n("", !0), i("div", P, [
|
|
163
|
+
h(e.$slots, "actions", {}, void 0, !0),
|
|
164
|
+
o.showViewToggle ? (m(), r("div", F, [i("button", {
|
|
193
165
|
type: "button",
|
|
194
|
-
"aria-pressed":
|
|
195
|
-
onClick: s[0] ||= (e) =>
|
|
196
|
-
}, " 图表 ", 8,
|
|
166
|
+
"aria-pressed": p.value === "chart",
|
|
167
|
+
onClick: s[0] ||= (e) => p.value = "chart"
|
|
168
|
+
}, " 图表 ", 8, I), i("button", {
|
|
197
169
|
type: "button",
|
|
198
|
-
"aria-pressed":
|
|
199
|
-
onClick: s[1] ||= (e) =>
|
|
200
|
-
}, " 表格 ", 8,
|
|
201
|
-
o.showExport ? (
|
|
170
|
+
"aria-pressed": p.value === "table",
|
|
171
|
+
onClick: s[1] ||= (e) => p.value = "table"
|
|
172
|
+
}, " 表格 ", 8, L)])) : n("", !0),
|
|
173
|
+
o.showExport ? (m(), r("button", {
|
|
202
174
|
key: 1,
|
|
203
175
|
type: "button",
|
|
204
|
-
onClick: s[2] ||= (e) => f("export",
|
|
176
|
+
onClick: s[2] ||= (e) => f("export", p.value)
|
|
205
177
|
}, " 导出 ")) : n("", !0)
|
|
206
178
|
])])) : n("", !0),
|
|
207
|
-
o.summary ? (
|
|
179
|
+
o.summary ? (m(), r("p", {
|
|
208
180
|
key: 2,
|
|
209
|
-
id:
|
|
181
|
+
id: v,
|
|
210
182
|
class: "lumal-chart-panel__summary"
|
|
211
|
-
},
|
|
183
|
+
}, _(o.summary), 1)) : n("", !0),
|
|
212
184
|
i("div", {
|
|
213
|
-
class:
|
|
214
|
-
style:
|
|
185
|
+
class: u(["lumal-chart-panel__body", `is-${p.value}`]),
|
|
186
|
+
style: d({ height: o.height }),
|
|
215
187
|
"aria-busy": o.loading,
|
|
216
|
-
"aria-describedby": o.summary ?
|
|
217
|
-
}, [o.loading ? (
|
|
218
|
-
message:
|
|
188
|
+
"aria-describedby": o.summary ? v : void 0
|
|
189
|
+
}, [o.loading ? (m(), r("div", z, [h(e.$slots, "loading", {}, () => [s[4] ||= a(" 加载中… ", -1)], !0)])) : o.error ? (m(), r("div", B, [h(e.$slots, "error", {
|
|
190
|
+
message: y.value,
|
|
219
191
|
retry: () => f("retry")
|
|
220
|
-
}, () => [i("span", null,
|
|
192
|
+
}, () => [i("span", null, _(y.value), 1), i("button", {
|
|
221
193
|
type: "button",
|
|
222
194
|
onClick: s[3] ||= (e) => f("retry")
|
|
223
|
-
},
|
|
195
|
+
}, _(o.retryText), 1)], !0)])) : o.noData ? (m(), r("div", V, [h(e.$slots, "empty", {}, () => [a(_(o.emptyText), 1)], !0)])) : p.value === "table" ? h(e.$slots, "table", { key: 3 }, void 0, !0) : o.options ? (m(), t(O, {
|
|
224
196
|
key: 4,
|
|
225
197
|
ref_key: "chartRef",
|
|
226
|
-
ref:
|
|
198
|
+
ref: g,
|
|
227
199
|
options: o.options,
|
|
228
200
|
height: o.height,
|
|
229
201
|
animation: o.animation,
|
|
@@ -233,18 +205,53 @@ var A = {
|
|
|
233
205
|
"height",
|
|
234
206
|
"animation",
|
|
235
207
|
"aria-label"
|
|
236
|
-
])) :
|
|
208
|
+
])) : h(e.$slots, "chart", { key: 5 }, void 0, !0)], 14, R)
|
|
237
209
|
], 4));
|
|
238
210
|
}
|
|
239
|
-
}), [["__scopeId", "data-v-
|
|
211
|
+
}), [["__scopeId", "data-v-d3152c00"]]);
|
|
212
|
+
//#endregion
|
|
213
|
+
//#region src/useChartResize.ts
|
|
214
|
+
function U(e, t, n = {}) {
|
|
215
|
+
if (n.enabled === !1) return;
|
|
216
|
+
let r, i = 0, a = !1;
|
|
217
|
+
function o() {
|
|
218
|
+
let e = t?.value;
|
|
219
|
+
return !e || e.clientWidth > 0 && e.clientHeight > 0;
|
|
220
|
+
}
|
|
221
|
+
function s() {
|
|
222
|
+
i &&= (typeof cancelAnimationFrame == "function" ? cancelAnimationFrame(i) : clearTimeout(i), 0);
|
|
223
|
+
}
|
|
224
|
+
function c() {
|
|
225
|
+
if (!o()) return;
|
|
226
|
+
s();
|
|
227
|
+
let t = () => {
|
|
228
|
+
i = 0, o() && e.value?.resize();
|
|
229
|
+
};
|
|
230
|
+
i = typeof requestAnimationFrame == "function" ? requestAnimationFrame(t) : setTimeout(t, 16);
|
|
231
|
+
}
|
|
232
|
+
function l(e) {
|
|
233
|
+
r?.disconnect(), r = void 0, e && typeof ResizeObserver < "u" && (r = new ResizeObserver(c), r.observe(e)), c();
|
|
234
|
+
}
|
|
235
|
+
function u() {
|
|
236
|
+
a || typeof window > "u" || (window.addEventListener("resize", c, { passive: !0 }), a = !0);
|
|
237
|
+
}
|
|
238
|
+
function d() {
|
|
239
|
+
!a || typeof window > "u" || (window.removeEventListener("resize", c), a = !1);
|
|
240
|
+
}
|
|
241
|
+
C(e, c, { flush: "post" }), p(() => {
|
|
242
|
+
t && typeof ResizeObserver < "u" ? (l(t.value), C(t, l)) : (u(), c());
|
|
243
|
+
}), f(() => {
|
|
244
|
+
s(), r?.disconnect(), d();
|
|
245
|
+
});
|
|
246
|
+
}
|
|
240
247
|
//#endregion
|
|
241
248
|
//#region src/index.ts
|
|
242
|
-
function
|
|
249
|
+
function W(e, t) {
|
|
243
250
|
let n = e;
|
|
244
251
|
return n.install = function(n) {
|
|
245
252
|
n.component(t, e);
|
|
246
253
|
}, n;
|
|
247
254
|
}
|
|
248
|
-
var
|
|
255
|
+
var G = W(O, "LumalChart"), K = W(H, "LumalChartPanel");
|
|
249
256
|
//#endregion
|
|
250
|
-
export {
|
|
257
|
+
export { G as LumalChart, K as LumalChartPanel, A as resolveChartPanelStyle, U as useChartResize };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LumalChart.vue.d.ts","sourceRoot":"","sources":["../../src/LumalChart.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"LumalChart.vue.d.ts","sourceRoot":"","sources":["../../src/LumalChart.vue"],"names":[],"mappings":"AAoGA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAO3D,kDAAkD;AAClD,KAAK,WAAW,GAAG;IACjB,OAAO,EAAE,aAAa,CAAA;IACtB,aAAa,CAAC,EAAE,aAAa,CAAA;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAC;AAgIF,QAAA,MAAM,YAAY;;;mBAtIA,aAAa;gBAChB,OAAO;eACR,OAAO;eACP,MAAM;WACV,MAAM;YACL,MAAM;6EAqIf,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
|
|
@@ -52,7 +52,6 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
|
|
|
52
52
|
onRetry?: (() => any) | undefined;
|
|
53
53
|
"onUpdate:view"?: ((value: "chart" | "table") => any) | undefined;
|
|
54
54
|
}>, {
|
|
55
|
-
error: boolean | Error | string;
|
|
56
55
|
options: EChartsOption;
|
|
57
56
|
animation: boolean;
|
|
58
57
|
height: string;
|
|
@@ -63,6 +62,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
|
|
|
63
62
|
emptyText: string;
|
|
64
63
|
chartWidth: ChartPanelWidth;
|
|
65
64
|
tableWidth: ChartPanelWidth;
|
|
65
|
+
error: boolean | Error | string;
|
|
66
66
|
errorText: string;
|
|
67
67
|
retryText: string;
|
|
68
68
|
showExport: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LumalChartPanel.vue.d.ts","sourceRoot":"","sources":["../../src/LumalChartPanel.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"LumalChartPanel.vue.d.ts","sourceRoot":"","sources":["../../src/LumalChartPanel.vue"],"names":[],"mappings":"AA8PA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAE5C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAKpD,kDAAkD;AAClD,KAAK,WAAW,GAAG;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,UAAU,CAAC,EAAE,eAAe,CAAA;IAC5B,UAAU,CAAC,EAAE,eAAe,CAAA;IAC5B,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,CAAA;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAC;AA+CF,KAAK,gBAAgB,GAAG;IACxB,MAAM,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;CAC1B,CAAC;AAsBF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;AA8LxD,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO,IAAU,EAAE,OAAO,IAAU,EAAE,OAAO;;;CAAU,EAAE,OAAO,IAAU,EAAE,QAAQ,IAAW,EAAuB,QAAQ,IAAY,CAAE;AACnK,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC1C;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC1C;IAAE,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC1C;IAAE,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC3C;IAAE,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAO9C,QAAA,MAAM,UAAU;;;;;;;;;;;aAlSJ,aAAa;eAaX,OAAO;YATV,MAAM;WALP,MAAM;aAEJ,OAAO;aASP,MAAM;YARP,OAAO;eACJ,MAAM;gBAEL,eAAe;gBACf,eAAe;WACpB,OAAO,GAAG,KAAK,GAAG,MAAM;eACpB,MAAM;eACN,MAAM;gBAEL,OAAO;oBACH,OAAO;6EA2RxB,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lumal/charts",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.3-beta",
|
|
5
5
|
"description": "Lumal optional ECharts-based chart components.",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"keywords": [
|
|
@@ -29,17 +29,18 @@
|
|
|
29
29
|
"module": "./dist/index.js",
|
|
30
30
|
"types": "./dist/src/index.d.ts",
|
|
31
31
|
"files": [
|
|
32
|
+
"CHANGELOG.md",
|
|
32
33
|
"README.md",
|
|
33
34
|
"dist"
|
|
34
35
|
],
|
|
35
36
|
"peerDependencies": {
|
|
36
|
-
"echarts": "^
|
|
37
|
+
"echarts": "^6.0.0",
|
|
37
38
|
"vue": "^3.5.0",
|
|
38
|
-
"vue-echarts": "^
|
|
39
|
+
"vue-echarts": "^8.0.0"
|
|
39
40
|
},
|
|
40
41
|
"devDependencies": {
|
|
41
|
-
"echarts": "^
|
|
42
|
-
"vue-echarts": "^
|
|
42
|
+
"echarts": "^6.1.0",
|
|
43
|
+
"vue-echarts": "^8.3.2"
|
|
43
44
|
},
|
|
44
45
|
"scripts": {
|
|
45
46
|
"build": "vite build --config vite.config.ts && vue-tsc -p tsconfig.json --emitDeclarationOnly --outDir dist && node ../../scripts/clean-package-dist.mjs dist",
|