@idux/charts-core 0.0.4 → 0.3.0

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 ADDED
@@ -0,0 +1,7 @@
1
+ # @idux/charts-core
2
+
3
+ ## 0.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 0d08aec: update vite config
@@ -1,9 +1,4 @@
1
- import { type HTMLAttributes, type InjectionKey } from 'vue-demi';
2
- import { type ChartOption, type AdditionalChartOption } from '../types';
3
- export interface ChartProps extends ChartOption, AdditionalChartOption {
4
- }
5
- export declare const CHART_TOKEN: InjectionKey<ChartProps>;
6
- export declare const defaultChartProps: ChartProps;
7
- type IChartProps = Omit<HTMLAttributes, keyof ChartProps> & ChartProps;
8
- declare const _default: import("vue-demi").DefineComponent<IChartProps, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<IChartProps>>, {}>;
1
+ import { type HTMLAttributes } from 'vue-demi';
2
+ import { type ChartProps } from '../types';
3
+ declare const _default: import("vue-demi").DefineComponent<Omit<HTMLAttributes, keyof ChartProps> & ChartProps, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<Omit<HTMLAttributes, keyof ChartProps> & ChartProps>>, {}>;
9
4
  export default _default;
@@ -1,3 +1,2 @@
1
- declare const IxChart: import("vue").DefineComponent<Omit<import("vue").HTMLAttributes, keyof import("./Chart").ChartProps> & import("./Chart").ChartProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<Omit<import("vue").HTMLAttributes, keyof import("./Chart").ChartProps> & import("./Chart").ChartProps>>, {}>;
1
+ declare const IxChart: import("vue").DefineComponent<Omit<import("vue").HTMLAttributes, keyof import("..").ChartProps> & import("..").ChartProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<Omit<import("vue").HTMLAttributes, keyof import("..").ChartProps> & import("..").ChartProps>>, {}>;
2
2
  export { IxChart };
3
- export { CHART_TOKEN, type ChartProps } from './Chart';
@@ -1,7 +1,8 @@
1
- import { type ComputedRef, type ShallowRef } from 'vue-demi';
1
+ import { type Ref, type ShallowRef } from 'vue-demi';
2
2
  import { type EChartsType } from 'echarts/core';
3
- import { type ChartProps } from '../components';
4
- export declare function useChart<U extends ChartProps>(options: ComputedRef<U>): {
3
+ import { type ChartProps } from '../types';
4
+ export type MaybeRef<T> = T | Ref<T>;
5
+ export declare function useChart<U extends ChartProps>(options: MaybeRef<U>): {
5
6
  containerRef: ShallowRef<HTMLDivElement | undefined>;
6
7
  chartRef: ShallowRef<EChartsType | undefined>;
7
8
  };
package/dist/index.js ADDED
@@ -0,0 +1,317 @@
1
+ import { DataZoomComponent as B, LegendComponent as T, GridComponent as W, TitleComponent as I, TooltipComponent as G } from "echarts/components";
2
+ import { LabelLayout as M, UniversalTransition as j } from "echarts/features";
3
+ import { SVGRenderer as V } from "echarts/renderers";
4
+ import { watch as g, shallowRef as m, computed as p, unref as c, onMounted as H, onBeforeUnmount as N, watchEffect as b, isVue2 as P, defineComponent as U, h as Z } from "vue-demi";
5
+ import { throttle as _, init as q, use as $, registerTheme as J } from "echarts/core";
6
+ import { isEqual as K, cloneDeep as A, isObject as Q, isNil as X } from "lodash-es";
7
+ function Y(e, o, t) {
8
+ let r;
9
+ g(
10
+ [e, o, t],
11
+ ([n, a, l], f, d) => {
12
+ !n || !a || (l ? (r ?? (r = _(() => a.resize(), 16)), k(n, r)) : y(n, r), d(() => y(n, r)));
13
+ }
14
+ );
15
+ }
16
+ const F = /* @__PURE__ */ new Map();
17
+ function k(e, o, t) {
18
+ if (!(!e || !o))
19
+ if (F.has(e))
20
+ F.get(e).listeners.push(o);
21
+ else {
22
+ const r = [o], n = new ResizeObserver((a) => {
23
+ a.forEach((l) => r.forEach((f) => f(l)));
24
+ });
25
+ n.observe(e, t), F.set(e, { listeners: r, ro: n });
26
+ }
27
+ }
28
+ function y(e, o) {
29
+ if (!e || !o || !F.has(e))
30
+ return;
31
+ const { listeners: t, ro: r } = F.get(e), n = t.indexOf(o);
32
+ n > -1 && (t.splice(n, 1), t.length === 0 && (r.disconnect(), F.delete(e)));
33
+ }
34
+ function ee(e) {
35
+ const o = m(), t = m(), r = m(), n = p(() => c(e).autoResize ?? !0), a = p(() => c(e).group), l = p(() => c(e).initOption), f = p(() => c(e).loading), d = p(() => c(e).setOptionOpts), v = p(() => c(e).theme ?? "seer"), x = () => {
36
+ const i = o.value;
37
+ if (!i)
38
+ return;
39
+ const s = q(i, v.value, l.value), u = c(e), { restOptions: O, events: w } = R(u, !1);
40
+ s.setOption(O, d.value), r.value = A(O), w.forEach(([D, E, z]) => {
41
+ let h = E;
42
+ z && (h = (...L) => {
43
+ E(...L), s.off(D, h);
44
+ }), s.on(D, h);
45
+ }), u.onReady && u.onReady(s), t.value = s;
46
+ }, C = () => {
47
+ t.value && (t.value.dispose(), t.value = void 0);
48
+ };
49
+ return H(() => x()), N(() => C()), g(
50
+ () => c(e),
51
+ (i) => {
52
+ const s = t.value;
53
+ if (!s)
54
+ return;
55
+ const { restOptions: u } = R(i);
56
+ K(u, r.value) || (s.setOption(u, d.value), r.value = A(u));
57
+ },
58
+ {
59
+ deep: !0
60
+ }
61
+ ), g([v, l], () => {
62
+ C(), x();
63
+ }), b(() => {
64
+ const i = a.value;
65
+ i && t.value && (t.value.group = i);
66
+ }), b(() => {
67
+ const i = t.value;
68
+ if (!i)
69
+ return;
70
+ const s = f.value;
71
+ s ? i.showLoading(Q(s) ? s : void 0) : i.hideLoading();
72
+ }), Y(o, t, n), { containerRef: o, chartRef: t };
73
+ }
74
+ function te(e) {
75
+ return /^on[^a-z]/.test(e);
76
+ }
77
+ const oe = [
78
+ "class",
79
+ "style",
80
+ "autoResize",
81
+ "group",
82
+ "loading",
83
+ "setOptionOpts",
84
+ "theme",
85
+ "onReady"
86
+ ];
87
+ function R(e, o = !0) {
88
+ const t = {}, r = [];
89
+ return Object.keys(e).forEach((n) => {
90
+ if (!oe.includes(n)) {
91
+ if (te(n)) {
92
+ if (o)
93
+ return;
94
+ const a = e[n];
95
+ if (a) {
96
+ const l = n.endsWith("Once"), f = l ? n.length - 4 : void 0, d = n.charAt(2).toLowerCase() + n.substring(3, f);
97
+ r.push([d, a, l]);
98
+ }
99
+ return;
100
+ }
101
+ t[n] = e[n];
102
+ }
103
+ }), { restOptions: t, events: r };
104
+ }
105
+ const ne = [
106
+ "#458FFF",
107
+ "#45D9A3",
108
+ "#FFC145",
109
+ "#F5654F",
110
+ "#6A6AFD",
111
+ "#6ED1FF",
112
+ "#008787",
113
+ "#FF9245",
114
+ "#F587B3",
115
+ "#8352CC",
116
+ "#65779B"
117
+ ], pe = [
118
+ "#458FFF",
119
+ "#C8DEFF",
120
+ "#45D9A3",
121
+ "#C8F4E4",
122
+ "#FFC145",
123
+ "#FFEDC8",
124
+ "#F5654F",
125
+ "#FCD1CB",
126
+ "#6A6AFD",
127
+ "#D3D3FE",
128
+ "#6ED1FF",
129
+ "#D3D3FE",
130
+ "#008787",
131
+ "#B3DBDB",
132
+ "#FF9245",
133
+ "#FFDFC8",
134
+ "#F587B3",
135
+ "#FCDBE8",
136
+ "#8352CC",
137
+ "#FCDBE8",
138
+ "#65779B",
139
+ "#65779B"
140
+ ], re = {
141
+ color: ne,
142
+ textStyle: {
143
+ color: "#2F3540",
144
+ fontSize: "12px"
145
+ },
146
+ bar: {
147
+ barGap: 0.2,
148
+ barWidth: 10,
149
+ label: {
150
+ color: "#6F7785",
151
+ position: "top"
152
+ }
153
+ },
154
+ line: {
155
+ label: {
156
+ color: "#6F7785",
157
+ position: "top"
158
+ }
159
+ },
160
+ pie: {
161
+ avoidLabelOverlap: !1,
162
+ center: ["25%", "50%"],
163
+ radius: ["70%", "80%"],
164
+ itemStyle: {
165
+ borderWidth: 1,
166
+ borderColor: "#fff"
167
+ },
168
+ label: {
169
+ show: !1,
170
+ color: "#2F3540",
171
+ formatter: "{c}",
172
+ position: "inside"
173
+ }
174
+ },
175
+ legend: {
176
+ itemWidth: 12,
177
+ itemHeight: 12,
178
+ textStyle: {
179
+ color: "#2F3540",
180
+ fontSize: "12px"
181
+ }
182
+ },
183
+ title: {
184
+ itemGap: 4,
185
+ textStyle: {
186
+ color: "#2F3540",
187
+ fontSize: "14px",
188
+ fontWeight: 500
189
+ },
190
+ subtextStyle: {
191
+ color: "#6F7785",
192
+ fontSize: "12px"
193
+ }
194
+ },
195
+ tooltip: {
196
+ borderWidth: 0,
197
+ padding: 12,
198
+ textStyle: {
199
+ color: "#2F3540"
200
+ },
201
+ axisPointer: {
202
+ z: -100,
203
+ lineStyle: {
204
+ type: "solid",
205
+ color: "#E1E5EB"
206
+ }
207
+ }
208
+ },
209
+ categoryAxis: {
210
+ axisLine: {
211
+ show: !0,
212
+ lineStyle: {
213
+ color: "#EDF1F7"
214
+ }
215
+ },
216
+ axisTick: {
217
+ show: !0,
218
+ alignWithLabel: !0,
219
+ lineStyle: {
220
+ color: "#EDF1F7"
221
+ }
222
+ },
223
+ axisLabel: {
224
+ color: "#6F7785"
225
+ },
226
+ splitLine: {
227
+ show: !1
228
+ },
229
+ splitArea: {
230
+ show: !1
231
+ }
232
+ },
233
+ valueAxis: {
234
+ axisLine: {
235
+ show: !1
236
+ },
237
+ axisTick: {
238
+ show: !1
239
+ },
240
+ axisLabel: {
241
+ color: "#6F7785"
242
+ },
243
+ splitLine: {
244
+ lineStyle: {
245
+ color: "#EDF1F7"
246
+ }
247
+ },
248
+ splitArea: {
249
+ show: !1
250
+ },
251
+ nameTextStyle: {
252
+ color: "#6F7785",
253
+ padding: [0, 30, -4, 0]
254
+ }
255
+ },
256
+ dataZoom: {
257
+ height: 20
258
+ }
259
+ };
260
+ function Fe(e) {
261
+ return !!(e && e.xAxis && e.xAxis.data);
262
+ }
263
+ function se(e, o) {
264
+ const t = {
265
+ ...e,
266
+ ...o
267
+ };
268
+ return P ? { attrs: t } : t;
269
+ }
270
+ function he(e) {
271
+ return Object.entries(e).reduce((o, [t, r]) => (r !== void 0 && (o[t] = r), o), {});
272
+ }
273
+ function me(e) {
274
+ return X(e) ? [] : Array.isArray(e) ? e : [e];
275
+ }
276
+ function ie(e, o) {
277
+ $(o), J("seer", re);
278
+ const t = (r) => {
279
+ r.component(e.name, e);
280
+ };
281
+ e.install = t;
282
+ }
283
+ const S = U({
284
+ name: "IxChart",
285
+ inheritAttrs: !1,
286
+ setup(e, { attrs: o }) {
287
+ const { containerRef: t } = ee(o);
288
+ return { containerRef: t };
289
+ },
290
+ render() {
291
+ const { class: e, style: o } = this.$attrs, t = se({ class: e, style: o });
292
+ return Z("div", { ref: "containerRef", ...t });
293
+ }
294
+ });
295
+ ie(S, [
296
+ B,
297
+ T,
298
+ W,
299
+ I,
300
+ G,
301
+ M,
302
+ j,
303
+ V
304
+ ]);
305
+ const ge = S;
306
+ export {
307
+ ge as IxChart,
308
+ me as convertArray,
309
+ ie as createInstall,
310
+ he as filterEmptyProps,
311
+ Fe as isVertical,
312
+ se as mergeAttrs,
313
+ ne as seerColors,
314
+ pe as seerColorsMore,
315
+ re as seerTheme,
316
+ ee as useChart
317
+ };
@@ -0,0 +1 @@
1
+ (function(o,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("echarts/components"),require("echarts/features"),require("echarts/renderers"),require("vue-demi"),require("echarts/core"),require("lodash-es")):typeof define=="function"&&define.amd?define(["exports","echarts/components","echarts/features","echarts/renderers","vue-demi","echarts/core","lodash-es"],l):(o=typeof globalThis<"u"?globalThis:o||self,l(o.IduxChartsCore={},o.echarts,o.echarts,o.echarts,o.VueDemi,o.echarts,o._))})(this,function(o,l,x,q,r,g,C){"use strict";function W(e,n,t){let i;r.watch([e,n,t],([s,f,u],p,F)=>{!s||!f||(u?(i??(i=g.throttle(()=>f.resize(),16)),M(s,i)):y(s,i),F(()=>y(s,i)))})}const h=new Map;function M(e,n,t){if(!(!e||!n))if(h.has(e))h.get(e).listeners.push(n);else{const i=[n],s=new ResizeObserver(f=>{f.forEach(u=>i.forEach(p=>p(u)))});s.observe(e,t),h.set(e,{listeners:i,ro:s})}}function y(e,n){if(!e||!n||!h.has(e))return;const{listeners:t,ro:i}=h.get(e),s=t.indexOf(n);s>-1&&(t.splice(s,1),t.length===0&&(i.disconnect(),h.delete(e)))}function A(e){const n=r.shallowRef(),t=r.shallowRef(),i=r.shallowRef(),s=r.computed(()=>r.unref(e).autoResize??!0),f=r.computed(()=>r.unref(e).group),u=r.computed(()=>r.unref(e).initOption),p=r.computed(()=>r.unref(e).loading),F=r.computed(()=>r.unref(e).setOptionOpts),z=r.computed(()=>r.unref(e).theme??"seer"),L=()=>{const c=n.value;if(!c)return;const a=g.init(c,z.value,u.value),d=r.unref(e),{restOptions:T,events:U}=m(d,!1);a.setOption(T,F.value),i.value=C.cloneDeep(T),U.forEach(([v,I,Z])=>{let O=I;Z&&(O=(...$)=>{I(...$),a.off(v,O)}),a.on(v,O)}),d.onReady&&d.onReady(a),t.value=a},B=()=>{t.value&&(t.value.dispose(),t.value=void 0)};return r.onMounted(()=>L()),r.onBeforeUnmount(()=>B()),r.watch(()=>r.unref(e),c=>{const a=t.value;if(!a)return;const{restOptions:d}=m(c);C.isEqual(d,i.value)||(a.setOption(d,F.value),i.value=C.cloneDeep(d))},{deep:!0}),r.watch([z,u],()=>{B(),L()}),r.watchEffect(()=>{const c=f.value;c&&t.value&&(t.value.group=c)}),r.watchEffect(()=>{const c=t.value;if(!c)return;const a=p.value;a?c.showLoading(C.isObject(a)?a:void 0):c.hideLoading()}),W(n,t,s),{containerRef:n,chartRef:t}}function j(e){return/^on[^a-z]/.test(e)}const G=["class","style","autoResize","group","loading","setOptionOpts","theme","onReady"];function m(e,n=!0){const t={},i=[];return Object.keys(e).forEach(s=>{if(!G.includes(s)){if(j(s)){if(n)return;const f=e[s];if(f){const u=s.endsWith("Once"),p=u?s.length-4:void 0,F=s.charAt(2).toLowerCase()+s.substring(3,p);i.push([F,f,u])}return}t[s]=e[s]}}),{restOptions:t,events:i}}const E=["#458FFF","#45D9A3","#FFC145","#F5654F","#6A6AFD","#6ED1FF","#008787","#FF9245","#F587B3","#8352CC","#65779B"],V=["#458FFF","#C8DEFF","#45D9A3","#C8F4E4","#FFC145","#FFEDC8","#F5654F","#FCD1CB","#6A6AFD","#D3D3FE","#6ED1FF","#D3D3FE","#008787","#B3DBDB","#FF9245","#FFDFC8","#F587B3","#FCDBE8","#8352CC","#FCDBE8","#65779B","#65779B"],w={color:E,textStyle:{color:"#2F3540",fontSize:"12px"},bar:{barGap:.2,barWidth:10,label:{color:"#6F7785",position:"top"}},line:{label:{color:"#6F7785",position:"top"}},pie:{avoidLabelOverlap:!1,center:["25%","50%"],radius:["70%","80%"],itemStyle:{borderWidth:1,borderColor:"#fff"},label:{show:!1,color:"#2F3540",formatter:"{c}",position:"inside"}},legend:{itemWidth:12,itemHeight:12,textStyle:{color:"#2F3540",fontSize:"12px"}},title:{itemGap:4,textStyle:{color:"#2F3540",fontSize:"14px",fontWeight:500},subtextStyle:{color:"#6F7785",fontSize:"12px"}},tooltip:{borderWidth:0,padding:12,textStyle:{color:"#2F3540"},axisPointer:{z:-100,lineStyle:{type:"solid",color:"#E1E5EB"}}},categoryAxis:{axisLine:{show:!0,lineStyle:{color:"#EDF1F7"}},axisTick:{show:!0,alignWithLabel:!0,lineStyle:{color:"#EDF1F7"}},axisLabel:{color:"#6F7785"},splitLine:{show:!1},splitArea:{show:!1}},valueAxis:{axisLine:{show:!1},axisTick:{show:!1},axisLabel:{color:"#6F7785"},splitLine:{lineStyle:{color:"#EDF1F7"}},splitArea:{show:!1},nameTextStyle:{color:"#6F7785",padding:[0,30,-4,0]}},dataZoom:{height:20}};function P(e){return!!(e&&e.xAxis&&e.xAxis.data)}function b(e,n){const t={...e,...n};return r.isVue2?{attrs:t}:t}function _(e){return Object.entries(e).reduce((n,[t,i])=>(i!==void 0&&(n[t]=i),n),{})}function H(e){return C.isNil(e)?[]:Array.isArray(e)?e:[e]}function R(e,n){g.use(n),g.registerTheme("seer",w);const t=i=>{i.component(e.name,e)};e.install=t}const S=r.defineComponent({name:"IxChart",inheritAttrs:!1,setup(e,{attrs:n}){const{containerRef:t}=A(n);return{containerRef:t}},render(){const{class:e,style:n}=this.$attrs,t=b({class:e,style:n});return r.h("div",{ref:"containerRef",...t})}});R(S,[l.DataZoomComponent,l.LegendComponent,l.GridComponent,l.TitleComponent,l.TooltipComponent,x.LabelLayout,x.UniversalTransition,q.SVGRenderer]);const N=S;o.IxChart=N,o.convertArray=H,o.createInstall=R,o.filterEmptyProps=_,o.isVertical=P,o.mergeAttrs=b,o.seerColors=E,o.seerColorsMore=V,o.seerTheme=w,o.useChart=A,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});
@@ -1,25 +1,43 @@
1
- export declare const seerColors10: string[];
2
- export declare const seerColors20: string[];
1
+ export declare const seerColors: string[];
2
+ export declare const seerColorsMore: string[];
3
3
  export declare const seerTheme: {
4
4
  color: string[];
5
5
  textStyle: {
6
6
  color: string;
7
7
  fontSize: string;
8
8
  };
9
+ bar: {
10
+ barGap: number;
11
+ barWidth: number;
12
+ label: {
13
+ color: string;
14
+ position: string;
15
+ };
16
+ };
17
+ line: {
18
+ label: {
19
+ color: string;
20
+ position: string;
21
+ };
22
+ };
9
23
  pie: {
10
24
  avoidLabelOverlap: boolean;
11
25
  center: string[];
26
+ radius: string[];
12
27
  itemStyle: {
13
28
  borderWidth: number;
14
29
  borderColor: string;
15
30
  };
16
31
  label: {
17
32
  show: boolean;
33
+ color: string;
18
34
  formatter: string;
19
35
  position: string;
20
36
  };
21
37
  };
22
38
  legend: {
39
+ itemWidth: number;
40
+ itemHeight: number;
23
41
  textStyle: {
24
42
  color: string;
25
43
  fontSize: string;
@@ -30,6 +48,7 @@ export declare const seerTheme: {
30
48
  textStyle: {
31
49
  color: string;
32
50
  fontSize: string;
51
+ fontWeight: number;
33
52
  };
34
53
  subtextStyle: {
35
54
  color: string;
@@ -39,5 +58,65 @@ export declare const seerTheme: {
39
58
  tooltip: {
40
59
  borderWidth: number;
41
60
  padding: number;
61
+ textStyle: {
62
+ color: string;
63
+ };
64
+ axisPointer: {
65
+ z: number;
66
+ lineStyle: {
67
+ type: string;
68
+ color: string;
69
+ };
70
+ };
71
+ };
72
+ categoryAxis: {
73
+ axisLine: {
74
+ show: boolean;
75
+ lineStyle: {
76
+ color: string;
77
+ };
78
+ };
79
+ axisTick: {
80
+ show: boolean;
81
+ alignWithLabel: boolean;
82
+ lineStyle: {
83
+ color: string;
84
+ };
85
+ };
86
+ axisLabel: {
87
+ color: string;
88
+ };
89
+ splitLine: {
90
+ show: boolean;
91
+ };
92
+ splitArea: {
93
+ show: boolean;
94
+ };
95
+ };
96
+ valueAxis: {
97
+ axisLine: {
98
+ show: boolean;
99
+ };
100
+ axisTick: {
101
+ show: boolean;
102
+ };
103
+ axisLabel: {
104
+ color: string;
105
+ };
106
+ splitLine: {
107
+ lineStyle: {
108
+ color: string;
109
+ };
110
+ };
111
+ splitArea: {
112
+ show: boolean;
113
+ };
114
+ nameTextStyle: {
115
+ color: string;
116
+ padding: number[];
117
+ };
118
+ };
119
+ dataZoom: {
120
+ height: number;
42
121
  };
43
122
  };
@@ -1,5 +1,5 @@
1
1
  import type { BarSeriesOption, LineSeriesOption, PieSeriesOption } from 'echarts/charts';
2
- import type { LegendComponentOption, TitleComponentOption, TooltipComponentOption } from 'echarts/components';
2
+ import type { DatasetComponentOption, DataZoomComponentOption, GridComponentOption, LegendComponentOption, TitleComponentOption, TooltipComponentOption } from 'echarts/components';
3
3
  import type { ComposeOption, EChartsType, init, SetOptionOpts } from 'echarts/core';
4
4
  export type ChartInitParameters = Parameters<typeof init>;
5
5
  export type ChartTheme = NonNullable<ChartInitParameters[1]>;
@@ -43,6 +43,8 @@ interface ComponentOption {
43
43
  z?: number;
44
44
  zlevel?: number;
45
45
  }
46
- export type BaseChartOption<T extends ComponentOption> = ComposeOption<LegendComponentOption | TitleComponentOption | TooltipComponentOption | T>;
47
- export type ChartOption = ComposeOption<BarSeriesOption | PieSeriesOption | LineSeriesOption | LegendComponentOption | TitleComponentOption | TooltipComponentOption>;
46
+ export type BaseChartOption<T extends ComponentOption> = ComposeOption<DatasetComponentOption | DataZoomComponentOption | GridComponentOption | LegendComponentOption | TitleComponentOption | TooltipComponentOption | T>;
47
+ export type ChartOption = ComposeOption<DatasetComponentOption | DataZoomComponentOption | GridComponentOption | LegendComponentOption | TitleComponentOption | TooltipComponentOption | BarSeriesOption | PieSeriesOption | LineSeriesOption>;
48
+ export interface ChartProps extends ChartOption, AdditionalChartOption {
49
+ }
48
50
  export {};
@@ -1,3 +1,10 @@
1
+ import { use } from 'echarts/core';
1
2
  export type Writeable<T> = {
2
3
  -readonly [P in keyof T]: T[P];
3
4
  };
5
+ export declare function isVertical(option: any): boolean;
6
+ export declare function mergeAttrs(props: any, attrs?: any): any;
7
+ export declare function filterEmptyProps<T extends object>(props: T): T;
8
+ export declare function convertArray<T>(value: T | undefined | null | Array<T | undefined | null>): T[];
9
+ export declare function convertArray<T>(value: T | readonly T[]): readonly T[];
10
+ export declare function createInstall(Chart: any, ext: Parameters<typeof use>[0]): void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@idux/charts-core",
3
- "version": "0.0.4",
3
+ "version": "0.3.0",
4
4
  "description": "A UI Component Development Kit for Vue 3.x",
5
5
  "keywords": [
6
6
  "vue",
@@ -20,19 +20,18 @@
20
20
  },
21
21
  "license": "MIT",
22
22
  "author": "IDuxFE<idux.feteam@gmail.com>",
23
- "main": "./dist/index.mjs",
24
- "module": "./dist/index.mjs",
23
+ "type": "module",
24
+ "main": "./dist/index.umd.cjs",
25
+ "module": "./dist/index.js",
25
26
  "typings": "./dist/index.d.ts",
26
- "unpkg": "./dist/index.umd.js",
27
- "jsdelivr": "./dist/index.umd.js",
28
- "sideEffects": false,
27
+ "unpkg": "./dist/index.umd.cjs",
28
+ "jsdelivr": "./dist/index.umd.cjs",
29
29
  "files": [
30
- "/dist"
30
+ "dist",
31
+ "*.md",
32
+ "*.d.ts"
31
33
  ],
32
- "scripts": {
33
- "clean": "rimraf dist node_modules",
34
- "build": "rimraf dist && vite build"
35
- },
34
+ "sideEffects": false,
36
35
  "dependencies": {
37
36
  "echarts": "^5.4.0",
38
37
  "lodash-es": "^4.17.0",
@@ -46,5 +45,9 @@
46
45
  "@vue/composition-api": {
47
46
  "optional": true
48
47
  }
48
+ },
49
+ "scripts": {
50
+ "clean": "rimraf dist node_modules",
51
+ "build": "rimraf dist && vite build"
49
52
  }
50
- }
53
+ }
package/dist/index.mjs DELETED
@@ -1,200 +0,0 @@
1
- import { watch as h, shallowRef as v, computed as d, onMounted as w, onBeforeUnmount as T, watchEffect as E, defineComponent as y, inject as I, h as L, isVue2 as _ } from "vue-demi";
2
- import { throttle as j, init as H } from "echarts/core";
3
- import { isEqual as M, cloneDeep as x, isObject as N } from "lodash-es";
4
- function P(e, s, n) {
5
- let o;
6
- h(
7
- [e, s, n],
8
- ([t, a, r], u, l) => {
9
- !t || !a || (r ? (o ?? (o = j(() => a.resize(), 16)), W(t, o)) : z(t, o), l(() => z(t, o)));
10
- }
11
- );
12
- }
13
- const p = /* @__PURE__ */ new Map();
14
- function W(e, s, n) {
15
- if (!(!e || !s))
16
- if (p.has(e))
17
- p.get(e).listeners.push(s);
18
- else {
19
- const o = [s], t = new ResizeObserver((a) => {
20
- a.forEach((r) => o.forEach((u) => u(r)));
21
- });
22
- t.observe(e, n), p.set(e, { listeners: o, ro: t });
23
- }
24
- }
25
- function z(e, s) {
26
- if (!e || !s || !p.has(e))
27
- return;
28
- const { listeners: n, ro: o } = p.get(e), t = n.indexOf(s);
29
- t > -1 && (n.splice(t, 1), n.length === 0 && (o.disconnect(), p.delete(e)));
30
- }
31
- function G(e) {
32
- const s = v(), n = v(), o = v(), t = d(() => e.value.autoResize ?? !0), a = d(() => e.value.group), r = d(() => e.value.initOption), u = d(() => e.value.loading), l = d(() => e.value.setOptionOpts), m = d(() => e.value.theme), C = () => {
33
- const c = s.value;
34
- if (!c)
35
- return;
36
- const i = H(c, m.value, r.value), f = e.value, { restOptions: g, events: A } = b(f, !1);
37
- i.setOption(g, l.value), o.value = x(g), A.forEach(([D, R, S]) => {
38
- let F = R;
39
- S && (F = (...B) => {
40
- R(...B), i.off(D, F);
41
- }), i.on(D, F);
42
- }), f.onReady && f.onReady(i), n.value = i;
43
- }, O = () => {
44
- n.value && (n.value.dispose(), n.value = void 0);
45
- };
46
- return w(() => C()), T(() => O()), h(
47
- e,
48
- (c) => {
49
- const i = n.value;
50
- if (!i)
51
- return;
52
- const { restOptions: f } = b(c);
53
- M(f, o.value) || (i.setOption(f, l.value), o.value = x(f));
54
- },
55
- {
56
- deep: !0
57
- }
58
- ), h(
59
- [m, r],
60
- () => {
61
- O(), C();
62
- },
63
- {
64
- deep: !0
65
- }
66
- ), E(() => {
67
- const c = a.value;
68
- c && n.value && (n.value.group = c);
69
- }), E(() => {
70
- const c = n.value;
71
- if (!c)
72
- return;
73
- const i = u.value;
74
- i ? c.showLoading(N(i) ? i : void 0) : c.hideLoading();
75
- }), P(s, n, t), { containerRef: s, chartRef: n };
76
- }
77
- function K(e) {
78
- return /^on[^a-z]/.test(e);
79
- }
80
- const q = [
81
- "class",
82
- "style",
83
- "autoResize",
84
- "group",
85
- "loading",
86
- "setOptionOpts",
87
- "theme",
88
- "onReady"
89
- ];
90
- function b(e, s = !0) {
91
- const n = {}, o = [];
92
- return Object.keys(e).forEach((t) => {
93
- if (!q.includes(t)) {
94
- if (K(t)) {
95
- if (s)
96
- return;
97
- const a = e[t];
98
- if (a) {
99
- const r = t.endsWith("Once"), u = r ? t.length - 4 : void 0, l = t.charAt(2).toLowerCase() + t.substring(3, u);
100
- o.push([l, a, r]);
101
- }
102
- return;
103
- }
104
- n[t] = e[t];
105
- }
106
- }), { restOptions: n, events: o };
107
- }
108
- const U = Symbol("CHART_TOKEN"), V = {
109
- theme: "seer"
110
- }, J = y({
111
- name: "IxChart",
112
- inheritAttrs: !1,
113
- setup(e, { attrs: s, expose: n }) {
114
- const o = I(U, V), t = d(() => ({ ...o, ...s })), { containerRef: a } = G(t);
115
- return n({ containerRef: a }), () => {
116
- const { class: r, style: u } = t.value;
117
- return L("div", _ ? { ref: "containerRef", attrs: { class: r, style: u } } : { ref: "containerRef", class: r, style: u });
118
- };
119
- }
120
- }), $ = J, Q = [
121
- "#458FFF",
122
- "#45D9A3",
123
- "#FFC145",
124
- "#F5654F",
125
- "#6A6AFD",
126
- "#6ED1FF",
127
- "#008787",
128
- "#FF9245",
129
- "#F587B3",
130
- "#8352CC"
131
- ], k = [
132
- "#458FFF",
133
- "#C8DEFF",
134
- "#45D9A3",
135
- "#C8F4E4",
136
- "#FFC145",
137
- "#FFEDC8",
138
- "#F5654F",
139
- "#FCD1CB",
140
- "#6A6AFD",
141
- "#D3D3FE",
142
- "#6ED1FF",
143
- "#D3D3FE",
144
- "#008787",
145
- "#B3DBDB",
146
- "#FF9245",
147
- "#FFDFC8",
148
- "#F587B3",
149
- "#FCDBE8",
150
- "#8352CC",
151
- "#FCDBE8"
152
- ], ee = {
153
- color: Q,
154
- textStyle: {
155
- color: "#2F3540",
156
- fontSize: "12px"
157
- },
158
- pie: {
159
- avoidLabelOverlap: !1,
160
- center: ["25%", "50%"],
161
- itemStyle: {
162
- borderWidth: 1,
163
- borderColor: "#fff"
164
- },
165
- label: {
166
- show: !1,
167
- formatter: "{c}",
168
- position: "inside"
169
- }
170
- },
171
- legend: {
172
- textStyle: {
173
- color: "#2F3540",
174
- fontSize: "12px"
175
- }
176
- },
177
- title: {
178
- itemGap: 4,
179
- textStyle: {
180
- color: "#2F3540",
181
- fontSize: "30px"
182
- },
183
- subtextStyle: {
184
- color: "#6F7785",
185
- fontSize: "12px"
186
- }
187
- },
188
- tooltip: {
189
- borderWidth: 0,
190
- padding: 12
191
- }
192
- };
193
- export {
194
- U as CHART_TOKEN,
195
- $ as IxChart,
196
- Q as seerColors10,
197
- k as seerColors20,
198
- ee as seerTheme,
199
- G as useChart
200
- };
package/dist/index.umd.js DELETED
@@ -1 +0,0 @@
1
- (function(c,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue-demi"),require("echarts/core"),require("lodash-es")):typeof define=="function"&&define.amd?define(["exports","vue-demi","echarts/core","lodash-es"],t):(c=typeof globalThis<"u"?globalThis:c||self,t(c.IduxChartsCore={},c.VueDemi,c.echarts,c._))})(this,function(c,t,O,F){"use strict";function T(e,r,o){let s;t.watch([e,r,o],([n,l,i],f,d)=>{!n||!l||(i?(s??(s=O.throttle(()=>l.resize(),16)),y(n,s)):g(n,s),d(()=>g(n,s)))})}const p=new Map;function y(e,r,o){if(!(!e||!r))if(p.has(e))p.get(e).listeners.push(r);else{const s=[r],n=new ResizeObserver(l=>{l.forEach(i=>s.forEach(f=>f(i)))});n.observe(e,o),p.set(e,{listeners:s,ro:n})}}function g(e,r){if(!e||!r||!p.has(e))return;const{listeners:o,ro:s}=p.get(e),n=o.indexOf(r);n>-1&&(o.splice(n,1),o.length===0&&(s.disconnect(),p.delete(e)))}function v(e){const r=t.shallowRef(),o=t.shallowRef(),s=t.shallowRef(),n=t.computed(()=>e.value.autoResize??!0),l=t.computed(()=>e.value.group),i=t.computed(()=>e.value.initOption),f=t.computed(()=>e.value.loading),d=t.computed(()=>e.value.setOptionOpts),z=t.computed(()=>e.value.theme),b=()=>{const u=r.value;if(!u)return;const a=O.init(u,z.value,i.value),h=e.value,{restOptions:S,events:H}=R(h,!1);a.setOption(S,d.value),s.value=F.cloneDeep(S),H.forEach(([x,A,M])=>{let C=A;M&&(C=(...N)=>{A(...N),a.off(x,C)}),a.on(x,C)}),h.onReady&&h.onReady(a),o.value=a},w=()=>{o.value&&(o.value.dispose(),o.value=void 0)};return t.onMounted(()=>b()),t.onBeforeUnmount(()=>w()),t.watch(e,u=>{const a=o.value;if(!a)return;const{restOptions:h}=R(u);F.isEqual(h,s.value)||(a.setOption(h,d.value),s.value=F.cloneDeep(h))},{deep:!0}),t.watch([z,i],()=>{w(),b()},{deep:!0}),t.watchEffect(()=>{const u=l.value;u&&o.value&&(o.value.group=u)}),t.watchEffect(()=>{const u=o.value;if(!u)return;const a=f.value;a?u.showLoading(F.isObject(a)?a:void 0):u.hideLoading()}),T(r,o,n),{containerRef:r,chartRef:o}}function B(e){return/^on[^a-z]/.test(e)}const I=["class","style","autoResize","group","loading","setOptionOpts","theme","onReady"];function R(e,r=!0){const o={},s=[];return Object.keys(e).forEach(n=>{if(!I.includes(n)){if(B(n)){if(r)return;const l=e[n];if(l){const i=n.endsWith("Once"),f=i?n.length-4:void 0,d=n.charAt(2).toLowerCase()+n.substring(3,f);s.push([d,l,i])}return}o[n]=e[n]}}),{restOptions:o,events:s}}const E=Symbol("CHART_TOKEN"),_={theme:"seer"},j=t.defineComponent({name:"IxChart",inheritAttrs:!1,setup(e,{attrs:r,expose:o}){const s=t.inject(E,_),n=t.computed(()=>({...s,...r})),{containerRef:l}=v(n);return o({containerRef:l}),()=>{const{class:i,style:f}=n.value,d=t.isVue2?{ref:"containerRef",attrs:{class:i,style:f}}:{ref:"containerRef",class:i,style:f};return t.h("div",d)}}}),m=["#458FFF","#45D9A3","#FFC145","#F5654F","#6A6AFD","#6ED1FF","#008787","#FF9245","#F587B3","#8352CC"],L=["#458FFF","#C8DEFF","#45D9A3","#C8F4E4","#FFC145","#FFEDC8","#F5654F","#FCD1CB","#6A6AFD","#D3D3FE","#6ED1FF","#D3D3FE","#008787","#B3DBDB","#FF9245","#FFDFC8","#F587B3","#FCDBE8","#8352CC","#FCDBE8"],q={color:m,textStyle:{color:"#2F3540",fontSize:"12px"},pie:{avoidLabelOverlap:!1,center:["25%","50%"],itemStyle:{borderWidth:1,borderColor:"#fff"},label:{show:!1,formatter:"{c}",position:"inside"}},legend:{textStyle:{color:"#2F3540",fontSize:"12px"}},title:{itemGap:4,textStyle:{color:"#2F3540",fontSize:"30px"},subtextStyle:{color:"#6F7785",fontSize:"12px"}},tooltip:{borderWidth:0,padding:12}};c.CHART_TOKEN=E,c.IxChart=j,c.seerColors10=m,c.seerColors20=L,c.seerTheme=q,c.useChart=v,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})});