@mmflow/vue 0.1.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/dist/index.cjs +90 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +89 -0
- package/dist/index.d.ts +89 -0
- package/dist/index.js +65 -0
- package/dist/index.js.map +1 -0
- package/package.json +39 -0
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var vue = require('vue');
|
|
4
|
+
var charts = require('@mmflow/charts');
|
|
5
|
+
|
|
6
|
+
// src/Chart.ts
|
|
7
|
+
var MmChart = vue.defineComponent({
|
|
8
|
+
name: "MmChart",
|
|
9
|
+
props: {
|
|
10
|
+
feed: { type: Object, default: void 0 },
|
|
11
|
+
symbol: { type: String, default: void 0 },
|
|
12
|
+
resolution: { type: String, default: "1m" },
|
|
13
|
+
theme: { type: Object, default: void 0 },
|
|
14
|
+
indicators: {
|
|
15
|
+
type: Array,
|
|
16
|
+
default: () => []
|
|
17
|
+
},
|
|
18
|
+
candles: { type: Boolean, default: true },
|
|
19
|
+
volume: { type: Boolean, default: false },
|
|
20
|
+
autosize: { type: Boolean, default: true }
|
|
21
|
+
},
|
|
22
|
+
setup(props, { expose }) {
|
|
23
|
+
const container = vue.ref(null);
|
|
24
|
+
let api = null;
|
|
25
|
+
const loadData = () => {
|
|
26
|
+
if (api && props.feed) {
|
|
27
|
+
void api.setData(props.feed, {
|
|
28
|
+
symbol: props.symbol,
|
|
29
|
+
resolution: props.resolution
|
|
30
|
+
});
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
vue.onMounted(() => {
|
|
34
|
+
if (!container.value) return;
|
|
35
|
+
api = charts.createChart({
|
|
36
|
+
container: container.value,
|
|
37
|
+
theme: props.theme,
|
|
38
|
+
autosize: props.autosize
|
|
39
|
+
});
|
|
40
|
+
if (props.candles) api.addCandleSeries();
|
|
41
|
+
if (props.volume) api.addVolumeSeries();
|
|
42
|
+
for (const inst of props.indicators) api.addIndicator(inst);
|
|
43
|
+
loadData();
|
|
44
|
+
});
|
|
45
|
+
vue.watch(
|
|
46
|
+
() => [props.feed, props.symbol, props.resolution],
|
|
47
|
+
() => loadData()
|
|
48
|
+
);
|
|
49
|
+
vue.watch(
|
|
50
|
+
() => props.theme,
|
|
51
|
+
(t) => {
|
|
52
|
+
if (t && api) api.applyTheme(t);
|
|
53
|
+
}
|
|
54
|
+
);
|
|
55
|
+
vue.onBeforeUnmount(() => {
|
|
56
|
+
api?.dispose();
|
|
57
|
+
api = null;
|
|
58
|
+
});
|
|
59
|
+
expose({ getApi: () => api });
|
|
60
|
+
return () => vue.h("div", { ref: container, style: "width:100%;height:100%" });
|
|
61
|
+
}
|
|
62
|
+
});
|
|
63
|
+
|
|
64
|
+
Object.defineProperty(exports, "composeFeeds", {
|
|
65
|
+
enumerable: true,
|
|
66
|
+
get: function () { return charts.composeFeeds; }
|
|
67
|
+
});
|
|
68
|
+
Object.defineProperty(exports, "createDataFeed", {
|
|
69
|
+
enumerable: true,
|
|
70
|
+
get: function () { return charts.createDataFeed; }
|
|
71
|
+
});
|
|
72
|
+
Object.defineProperty(exports, "defineIndicator", {
|
|
73
|
+
enumerable: true,
|
|
74
|
+
get: function () { return charts.defineIndicator; }
|
|
75
|
+
});
|
|
76
|
+
Object.defineProperty(exports, "defineTheme", {
|
|
77
|
+
enumerable: true,
|
|
78
|
+
get: function () { return charts.defineTheme; }
|
|
79
|
+
});
|
|
80
|
+
Object.defineProperty(exports, "getControls", {
|
|
81
|
+
enumerable: true,
|
|
82
|
+
get: function () { return charts.getControls; }
|
|
83
|
+
});
|
|
84
|
+
Object.defineProperty(exports, "resolveTheme", {
|
|
85
|
+
enumerable: true,
|
|
86
|
+
get: function () { return charts.resolveTheme; }
|
|
87
|
+
});
|
|
88
|
+
exports.MmChart = MmChart;
|
|
89
|
+
//# sourceMappingURL=index.cjs.map
|
|
90
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Chart.ts"],"names":["defineComponent","ref","onMounted","createChart","watch","onBeforeUnmount","h"],"mappings":";;;;;;AAqBO,IAAM,UAAUA,mBAAA,CAAgB;AAAA,EACrC,IAAA,EAAM,SAAA;AAAA,EACN,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,EAAE,IAAA,EAAM,MAAA,EAA8B,SAAS,MAAA,EAAU;AAAA,IAC/D,MAAA,EAAQ,EAAE,IAAA,EAAM,MAAA,EAAQ,SAAS,MAAA,EAAU;AAAA,IAC3C,UAAA,EAAY,EAAE,IAAA,EAAM,MAAA,EAAQ,SAAS,IAAA,EAAK;AAAA,IAC1C,KAAA,EAAO,EAAE,IAAA,EAAM,MAAA,EAAiC,SAAS,MAAA,EAAU;AAAA,IACnE,UAAA,EAAY;AAAA,MACV,IAAA,EAAM,KAAA;AAAA,MACN,OAAA,EAAS,MAAM;AAAC,KAClB;AAAA,IACA,OAAA,EAAS,EAAE,IAAA,EAAM,OAAA,EAAS,SAAS,IAAA,EAAK;AAAA,IACxC,MAAA,EAAQ,EAAE,IAAA,EAAM,OAAA,EAAS,SAAS,KAAA,EAAM;AAAA,IACxC,QAAA,EAAU,EAAE,IAAA,EAAM,OAAA,EAAS,SAAS,IAAA;AAAK,GAC3C;AAAA,EACA,KAAA,CAAM,KAAA,EAAO,EAAE,MAAA,EAAO,EAAG;AACvB,IAAA,MAAM,SAAA,GAAYC,QAA2B,IAAI,CAAA;AACjD,IAAA,IAAI,GAAA,GAAwB,IAAA;AAE5B,IAAA,MAAM,WAAW,MAAM;AACrB,MAAA,IAAI,GAAA,IAAO,MAAM,IAAA,EAAM;AACrB,QAAA,KAAK,GAAA,CAAI,OAAA,CAAQ,KAAA,CAAM,IAAA,EAAM;AAAA,UAC3B,QAAQ,KAAA,CAAM,MAAA;AAAA,UACd,YAAY,KAAA,CAAM;AAAA,SACnB,CAAA;AAAA,MACH;AAAA,IACF,CAAA;AAEA,IAAAC,aAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,UAAU,KAAA,EAAO;AACtB,MAAA,GAAA,GAAMC,kBAAA,CAAY;AAAA,QAChB,WAAW,SAAA,CAAU,KAAA;AAAA,QACrB,OAAO,KAAA,CAAM,KAAA;AAAA,QACb,UAAU,KAAA,CAAM;AAAA,OACjB,CAAA;AACD,MAAA,IAAI,KAAA,CAAM,OAAA,EAAS,GAAA,CAAI,eAAA,EAAgB;AACvC,MAAA,IAAI,KAAA,CAAM,MAAA,EAAQ,GAAA,CAAI,eAAA,EAAgB;AACtC,MAAA,KAAA,MAAW,IAAA,IAAQ,KAAA,CAAM,UAAA,EAAY,GAAA,CAAI,aAAa,IAAI,CAAA;AAC1D,MAAA,QAAA,EAAS;AAAA,IACX,CAAC,CAAA;AAED,IAAAC,SAAA;AAAA,MACE,MAAM,CAAC,KAAA,CAAM,MAAM,KAAA,CAAM,MAAA,EAAQ,MAAM,UAAU,CAAA;AAAA,MACjD,MAAM,QAAA;AAAS,KACjB;AACA,IAAAA,SAAA;AAAA,MACE,MAAM,KAAA,CAAM,KAAA;AAAA,MACZ,CAAC,CAAA,KAAM;AACL,QAAA,IAAI,CAAA,IAAK,GAAA,EAAK,GAAA,CAAI,UAAA,CAAW,CAAC,CAAA;AAAA,MAChC;AAAA,KACF;AAEA,IAAAC,mBAAA,CAAgB,MAAM;AACpB,MAAA,GAAA,EAAK,OAAA,EAAQ;AACb,MAAA,GAAA,GAAM,IAAA;AAAA,IACR,CAAC,CAAA;AAGD,IAAA,MAAA,CAAO,EAAE,MAAA,EAAQ,MAAM,GAAA,EAAK,CAAA;AAE5B,IAAA,OAAO,MACLC,MAAE,KAAA,EAAO,EAAE,KAAK,SAAA,EAAW,KAAA,EAAO,0BAA0B,CAAA;AAAA,EAChE;AACF,CAAC","file":"index.cjs","sourcesContent":["import {\n defineComponent,\n h,\n onBeforeUnmount,\n onMounted,\n ref,\n watch,\n type PropType,\n} from \"vue\";\nimport {\n createChart,\n type DataFeed,\n type IChartApi,\n type IndicatorInstance,\n type ThemeTokens,\n} from \"@mmflow/charts\";\n\n/**\n * `<MmChart />` — a typed Vue 3 wrapper over the @mmflow/charts engine.\n * The engine is WebGL + client-only; render it client-side.\n */\nexport const MmChart = defineComponent({\n name: \"MmChart\",\n props: {\n feed: { type: Object as PropType<DataFeed>, default: undefined },\n symbol: { type: String, default: undefined },\n resolution: { type: String, default: \"1m\" },\n theme: { type: Object as PropType<ThemeTokens>, default: undefined },\n indicators: {\n type: Array as PropType<IndicatorInstance[]>,\n default: () => [],\n },\n candles: { type: Boolean, default: true },\n volume: { type: Boolean, default: false },\n autosize: { type: Boolean, default: true },\n },\n setup(props, { expose }) {\n const container = ref<HTMLDivElement | null>(null);\n let api: IChartApi | null = null;\n\n const loadData = () => {\n if (api && props.feed) {\n void api.setData(props.feed, {\n symbol: props.symbol,\n resolution: props.resolution,\n });\n }\n };\n\n onMounted(() => {\n if (!container.value) return;\n api = createChart({\n container: container.value,\n theme: props.theme,\n autosize: props.autosize,\n });\n if (props.candles) api.addCandleSeries();\n if (props.volume) api.addVolumeSeries();\n for (const inst of props.indicators) api.addIndicator(inst);\n loadData();\n });\n\n watch(\n () => [props.feed, props.symbol, props.resolution] as const,\n () => loadData(),\n );\n watch(\n () => props.theme,\n (t) => {\n if (t && api) api.applyTheme(t);\n },\n );\n\n onBeforeUnmount(() => {\n api?.dispose();\n api = null;\n });\n\n // Imperative escape hatch: `ref.value?.getApi()`.\n expose({ getApi: () => api });\n\n return () =>\n h(\"div\", { ref: container, style: \"width:100%;height:100%\" });\n },\n});\n"]}
|
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import * as vue from 'vue';
|
|
2
|
+
import { PropType } from 'vue';
|
|
3
|
+
import { DataFeed, ThemeTokens, IndicatorInstance } from '@mmflow/charts';
|
|
4
|
+
export { Candle, CandleRange, ControlDescriptor, DataFeed, FeedUpdate, IChartApi, IndicatorDefinition, IndicatorInstance, ParamSpec, ThemeTokens, composeFeeds, createDataFeed, defineIndicator, defineTheme, getControls, resolveTheme } from '@mmflow/charts';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* `<MmChart />` — a typed Vue 3 wrapper over the @mmflow/charts engine.
|
|
8
|
+
* The engine is WebGL + client-only; render it client-side.
|
|
9
|
+
*/
|
|
10
|
+
declare const MmChart: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
11
|
+
feed: {
|
|
12
|
+
type: PropType<DataFeed>;
|
|
13
|
+
default: undefined;
|
|
14
|
+
};
|
|
15
|
+
symbol: {
|
|
16
|
+
type: StringConstructor;
|
|
17
|
+
default: undefined;
|
|
18
|
+
};
|
|
19
|
+
resolution: {
|
|
20
|
+
type: StringConstructor;
|
|
21
|
+
default: string;
|
|
22
|
+
};
|
|
23
|
+
theme: {
|
|
24
|
+
type: PropType<ThemeTokens>;
|
|
25
|
+
default: undefined;
|
|
26
|
+
};
|
|
27
|
+
indicators: {
|
|
28
|
+
type: PropType<IndicatorInstance[]>;
|
|
29
|
+
default: () => never[];
|
|
30
|
+
};
|
|
31
|
+
candles: {
|
|
32
|
+
type: BooleanConstructor;
|
|
33
|
+
default: boolean;
|
|
34
|
+
};
|
|
35
|
+
volume: {
|
|
36
|
+
type: BooleanConstructor;
|
|
37
|
+
default: boolean;
|
|
38
|
+
};
|
|
39
|
+
autosize: {
|
|
40
|
+
type: BooleanConstructor;
|
|
41
|
+
default: boolean;
|
|
42
|
+
};
|
|
43
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
44
|
+
[key: string]: any;
|
|
45
|
+
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
46
|
+
feed: {
|
|
47
|
+
type: PropType<DataFeed>;
|
|
48
|
+
default: undefined;
|
|
49
|
+
};
|
|
50
|
+
symbol: {
|
|
51
|
+
type: StringConstructor;
|
|
52
|
+
default: undefined;
|
|
53
|
+
};
|
|
54
|
+
resolution: {
|
|
55
|
+
type: StringConstructor;
|
|
56
|
+
default: string;
|
|
57
|
+
};
|
|
58
|
+
theme: {
|
|
59
|
+
type: PropType<ThemeTokens>;
|
|
60
|
+
default: undefined;
|
|
61
|
+
};
|
|
62
|
+
indicators: {
|
|
63
|
+
type: PropType<IndicatorInstance[]>;
|
|
64
|
+
default: () => never[];
|
|
65
|
+
};
|
|
66
|
+
candles: {
|
|
67
|
+
type: BooleanConstructor;
|
|
68
|
+
default: boolean;
|
|
69
|
+
};
|
|
70
|
+
volume: {
|
|
71
|
+
type: BooleanConstructor;
|
|
72
|
+
default: boolean;
|
|
73
|
+
};
|
|
74
|
+
autosize: {
|
|
75
|
+
type: BooleanConstructor;
|
|
76
|
+
default: boolean;
|
|
77
|
+
};
|
|
78
|
+
}>> & Readonly<{}>, {
|
|
79
|
+
symbol: string;
|
|
80
|
+
candles: boolean;
|
|
81
|
+
volume: boolean;
|
|
82
|
+
theme: ThemeTokens;
|
|
83
|
+
resolution: string;
|
|
84
|
+
feed: DataFeed;
|
|
85
|
+
indicators: IndicatorInstance[];
|
|
86
|
+
autosize: boolean;
|
|
87
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
88
|
+
|
|
89
|
+
export { MmChart };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import * as vue from 'vue';
|
|
2
|
+
import { PropType } from 'vue';
|
|
3
|
+
import { DataFeed, ThemeTokens, IndicatorInstance } from '@mmflow/charts';
|
|
4
|
+
export { Candle, CandleRange, ControlDescriptor, DataFeed, FeedUpdate, IChartApi, IndicatorDefinition, IndicatorInstance, ParamSpec, ThemeTokens, composeFeeds, createDataFeed, defineIndicator, defineTheme, getControls, resolveTheme } from '@mmflow/charts';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* `<MmChart />` — a typed Vue 3 wrapper over the @mmflow/charts engine.
|
|
8
|
+
* The engine is WebGL + client-only; render it client-side.
|
|
9
|
+
*/
|
|
10
|
+
declare const MmChart: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
11
|
+
feed: {
|
|
12
|
+
type: PropType<DataFeed>;
|
|
13
|
+
default: undefined;
|
|
14
|
+
};
|
|
15
|
+
symbol: {
|
|
16
|
+
type: StringConstructor;
|
|
17
|
+
default: undefined;
|
|
18
|
+
};
|
|
19
|
+
resolution: {
|
|
20
|
+
type: StringConstructor;
|
|
21
|
+
default: string;
|
|
22
|
+
};
|
|
23
|
+
theme: {
|
|
24
|
+
type: PropType<ThemeTokens>;
|
|
25
|
+
default: undefined;
|
|
26
|
+
};
|
|
27
|
+
indicators: {
|
|
28
|
+
type: PropType<IndicatorInstance[]>;
|
|
29
|
+
default: () => never[];
|
|
30
|
+
};
|
|
31
|
+
candles: {
|
|
32
|
+
type: BooleanConstructor;
|
|
33
|
+
default: boolean;
|
|
34
|
+
};
|
|
35
|
+
volume: {
|
|
36
|
+
type: BooleanConstructor;
|
|
37
|
+
default: boolean;
|
|
38
|
+
};
|
|
39
|
+
autosize: {
|
|
40
|
+
type: BooleanConstructor;
|
|
41
|
+
default: boolean;
|
|
42
|
+
};
|
|
43
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
44
|
+
[key: string]: any;
|
|
45
|
+
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
46
|
+
feed: {
|
|
47
|
+
type: PropType<DataFeed>;
|
|
48
|
+
default: undefined;
|
|
49
|
+
};
|
|
50
|
+
symbol: {
|
|
51
|
+
type: StringConstructor;
|
|
52
|
+
default: undefined;
|
|
53
|
+
};
|
|
54
|
+
resolution: {
|
|
55
|
+
type: StringConstructor;
|
|
56
|
+
default: string;
|
|
57
|
+
};
|
|
58
|
+
theme: {
|
|
59
|
+
type: PropType<ThemeTokens>;
|
|
60
|
+
default: undefined;
|
|
61
|
+
};
|
|
62
|
+
indicators: {
|
|
63
|
+
type: PropType<IndicatorInstance[]>;
|
|
64
|
+
default: () => never[];
|
|
65
|
+
};
|
|
66
|
+
candles: {
|
|
67
|
+
type: BooleanConstructor;
|
|
68
|
+
default: boolean;
|
|
69
|
+
};
|
|
70
|
+
volume: {
|
|
71
|
+
type: BooleanConstructor;
|
|
72
|
+
default: boolean;
|
|
73
|
+
};
|
|
74
|
+
autosize: {
|
|
75
|
+
type: BooleanConstructor;
|
|
76
|
+
default: boolean;
|
|
77
|
+
};
|
|
78
|
+
}>> & Readonly<{}>, {
|
|
79
|
+
symbol: string;
|
|
80
|
+
candles: boolean;
|
|
81
|
+
volume: boolean;
|
|
82
|
+
theme: ThemeTokens;
|
|
83
|
+
resolution: string;
|
|
84
|
+
feed: DataFeed;
|
|
85
|
+
indicators: IndicatorInstance[];
|
|
86
|
+
autosize: boolean;
|
|
87
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
88
|
+
|
|
89
|
+
export { MmChart };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { defineComponent, ref, onMounted, watch, onBeforeUnmount, h } from 'vue';
|
|
2
|
+
import { createChart } from '@mmflow/charts';
|
|
3
|
+
export { composeFeeds, createDataFeed, defineIndicator, defineTheme, getControls, resolveTheme } from '@mmflow/charts';
|
|
4
|
+
|
|
5
|
+
// src/Chart.ts
|
|
6
|
+
var MmChart = defineComponent({
|
|
7
|
+
name: "MmChart",
|
|
8
|
+
props: {
|
|
9
|
+
feed: { type: Object, default: void 0 },
|
|
10
|
+
symbol: { type: String, default: void 0 },
|
|
11
|
+
resolution: { type: String, default: "1m" },
|
|
12
|
+
theme: { type: Object, default: void 0 },
|
|
13
|
+
indicators: {
|
|
14
|
+
type: Array,
|
|
15
|
+
default: () => []
|
|
16
|
+
},
|
|
17
|
+
candles: { type: Boolean, default: true },
|
|
18
|
+
volume: { type: Boolean, default: false },
|
|
19
|
+
autosize: { type: Boolean, default: true }
|
|
20
|
+
},
|
|
21
|
+
setup(props, { expose }) {
|
|
22
|
+
const container = ref(null);
|
|
23
|
+
let api = null;
|
|
24
|
+
const loadData = () => {
|
|
25
|
+
if (api && props.feed) {
|
|
26
|
+
void api.setData(props.feed, {
|
|
27
|
+
symbol: props.symbol,
|
|
28
|
+
resolution: props.resolution
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
onMounted(() => {
|
|
33
|
+
if (!container.value) return;
|
|
34
|
+
api = createChart({
|
|
35
|
+
container: container.value,
|
|
36
|
+
theme: props.theme,
|
|
37
|
+
autosize: props.autosize
|
|
38
|
+
});
|
|
39
|
+
if (props.candles) api.addCandleSeries();
|
|
40
|
+
if (props.volume) api.addVolumeSeries();
|
|
41
|
+
for (const inst of props.indicators) api.addIndicator(inst);
|
|
42
|
+
loadData();
|
|
43
|
+
});
|
|
44
|
+
watch(
|
|
45
|
+
() => [props.feed, props.symbol, props.resolution],
|
|
46
|
+
() => loadData()
|
|
47
|
+
);
|
|
48
|
+
watch(
|
|
49
|
+
() => props.theme,
|
|
50
|
+
(t) => {
|
|
51
|
+
if (t && api) api.applyTheme(t);
|
|
52
|
+
}
|
|
53
|
+
);
|
|
54
|
+
onBeforeUnmount(() => {
|
|
55
|
+
api?.dispose();
|
|
56
|
+
api = null;
|
|
57
|
+
});
|
|
58
|
+
expose({ getApi: () => api });
|
|
59
|
+
return () => h("div", { ref: container, style: "width:100%;height:100%" });
|
|
60
|
+
}
|
|
61
|
+
});
|
|
62
|
+
|
|
63
|
+
export { MmChart };
|
|
64
|
+
//# sourceMappingURL=index.js.map
|
|
65
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Chart.ts"],"names":[],"mappings":";;;;;AAqBO,IAAM,UAAU,eAAA,CAAgB;AAAA,EACrC,IAAA,EAAM,SAAA;AAAA,EACN,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,EAAE,IAAA,EAAM,MAAA,EAA8B,SAAS,MAAA,EAAU;AAAA,IAC/D,MAAA,EAAQ,EAAE,IAAA,EAAM,MAAA,EAAQ,SAAS,MAAA,EAAU;AAAA,IAC3C,UAAA,EAAY,EAAE,IAAA,EAAM,MAAA,EAAQ,SAAS,IAAA,EAAK;AAAA,IAC1C,KAAA,EAAO,EAAE,IAAA,EAAM,MAAA,EAAiC,SAAS,MAAA,EAAU;AAAA,IACnE,UAAA,EAAY;AAAA,MACV,IAAA,EAAM,KAAA;AAAA,MACN,OAAA,EAAS,MAAM;AAAC,KAClB;AAAA,IACA,OAAA,EAAS,EAAE,IAAA,EAAM,OAAA,EAAS,SAAS,IAAA,EAAK;AAAA,IACxC,MAAA,EAAQ,EAAE,IAAA,EAAM,OAAA,EAAS,SAAS,KAAA,EAAM;AAAA,IACxC,QAAA,EAAU,EAAE,IAAA,EAAM,OAAA,EAAS,SAAS,IAAA;AAAK,GAC3C;AAAA,EACA,KAAA,CAAM,KAAA,EAAO,EAAE,MAAA,EAAO,EAAG;AACvB,IAAA,MAAM,SAAA,GAAY,IAA2B,IAAI,CAAA;AACjD,IAAA,IAAI,GAAA,GAAwB,IAAA;AAE5B,IAAA,MAAM,WAAW,MAAM;AACrB,MAAA,IAAI,GAAA,IAAO,MAAM,IAAA,EAAM;AACrB,QAAA,KAAK,GAAA,CAAI,OAAA,CAAQ,KAAA,CAAM,IAAA,EAAM;AAAA,UAC3B,QAAQ,KAAA,CAAM,MAAA;AAAA,UACd,YAAY,KAAA,CAAM;AAAA,SACnB,CAAA;AAAA,MACH;AAAA,IACF,CAAA;AAEA,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,UAAU,KAAA,EAAO;AACtB,MAAA,GAAA,GAAM,WAAA,CAAY;AAAA,QAChB,WAAW,SAAA,CAAU,KAAA;AAAA,QACrB,OAAO,KAAA,CAAM,KAAA;AAAA,QACb,UAAU,KAAA,CAAM;AAAA,OACjB,CAAA;AACD,MAAA,IAAI,KAAA,CAAM,OAAA,EAAS,GAAA,CAAI,eAAA,EAAgB;AACvC,MAAA,IAAI,KAAA,CAAM,MAAA,EAAQ,GAAA,CAAI,eAAA,EAAgB;AACtC,MAAA,KAAA,MAAW,IAAA,IAAQ,KAAA,CAAM,UAAA,EAAY,GAAA,CAAI,aAAa,IAAI,CAAA;AAC1D,MAAA,QAAA,EAAS;AAAA,IACX,CAAC,CAAA;AAED,IAAA,KAAA;AAAA,MACE,MAAM,CAAC,KAAA,CAAM,MAAM,KAAA,CAAM,MAAA,EAAQ,MAAM,UAAU,CAAA;AAAA,MACjD,MAAM,QAAA;AAAS,KACjB;AACA,IAAA,KAAA;AAAA,MACE,MAAM,KAAA,CAAM,KAAA;AAAA,MACZ,CAAC,CAAA,KAAM;AACL,QAAA,IAAI,CAAA,IAAK,GAAA,EAAK,GAAA,CAAI,UAAA,CAAW,CAAC,CAAA;AAAA,MAChC;AAAA,KACF;AAEA,IAAA,eAAA,CAAgB,MAAM;AACpB,MAAA,GAAA,EAAK,OAAA,EAAQ;AACb,MAAA,GAAA,GAAM,IAAA;AAAA,IACR,CAAC,CAAA;AAGD,IAAA,MAAA,CAAO,EAAE,MAAA,EAAQ,MAAM,GAAA,EAAK,CAAA;AAE5B,IAAA,OAAO,MACL,EAAE,KAAA,EAAO,EAAE,KAAK,SAAA,EAAW,KAAA,EAAO,0BAA0B,CAAA;AAAA,EAChE;AACF,CAAC","file":"index.js","sourcesContent":["import {\n defineComponent,\n h,\n onBeforeUnmount,\n onMounted,\n ref,\n watch,\n type PropType,\n} from \"vue\";\nimport {\n createChart,\n type DataFeed,\n type IChartApi,\n type IndicatorInstance,\n type ThemeTokens,\n} from \"@mmflow/charts\";\n\n/**\n * `<MmChart />` — a typed Vue 3 wrapper over the @mmflow/charts engine.\n * The engine is WebGL + client-only; render it client-side.\n */\nexport const MmChart = defineComponent({\n name: \"MmChart\",\n props: {\n feed: { type: Object as PropType<DataFeed>, default: undefined },\n symbol: { type: String, default: undefined },\n resolution: { type: String, default: \"1m\" },\n theme: { type: Object as PropType<ThemeTokens>, default: undefined },\n indicators: {\n type: Array as PropType<IndicatorInstance[]>,\n default: () => [],\n },\n candles: { type: Boolean, default: true },\n volume: { type: Boolean, default: false },\n autosize: { type: Boolean, default: true },\n },\n setup(props, { expose }) {\n const container = ref<HTMLDivElement | null>(null);\n let api: IChartApi | null = null;\n\n const loadData = () => {\n if (api && props.feed) {\n void api.setData(props.feed, {\n symbol: props.symbol,\n resolution: props.resolution,\n });\n }\n };\n\n onMounted(() => {\n if (!container.value) return;\n api = createChart({\n container: container.value,\n theme: props.theme,\n autosize: props.autosize,\n });\n if (props.candles) api.addCandleSeries();\n if (props.volume) api.addVolumeSeries();\n for (const inst of props.indicators) api.addIndicator(inst);\n loadData();\n });\n\n watch(\n () => [props.feed, props.symbol, props.resolution] as const,\n () => loadData(),\n );\n watch(\n () => props.theme,\n (t) => {\n if (t && api) api.applyTheme(t);\n },\n );\n\n onBeforeUnmount(() => {\n api?.dispose();\n api = null;\n });\n\n // Imperative escape hatch: `ref.value?.getApi()`.\n expose({ getApi: () => api });\n\n return () =>\n h(\"div\", { ref: container, style: \"width:100%;height:100%\" });\n },\n});\n"]}
|
package/package.json
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@mmflow/vue",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Vue 3 bindings for @mmflow/charts — a typed <MmChart/> component with bring-your-own-data, custom indicators, and white-label theming.",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"type": "module",
|
|
7
|
+
"sideEffects": false,
|
|
8
|
+
"main": "./dist/index.cjs",
|
|
9
|
+
"module": "./dist/index.js",
|
|
10
|
+
"types": "./dist/index.d.ts",
|
|
11
|
+
"exports": {
|
|
12
|
+
".": {
|
|
13
|
+
"import": {
|
|
14
|
+
"types": "./dist/index.d.ts",
|
|
15
|
+
"default": "./dist/index.js"
|
|
16
|
+
},
|
|
17
|
+
"require": {
|
|
18
|
+
"types": "./dist/index.d.cts",
|
|
19
|
+
"default": "./dist/index.cjs"
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
},
|
|
23
|
+
"files": [
|
|
24
|
+
"dist"
|
|
25
|
+
],
|
|
26
|
+
"dependencies": {
|
|
27
|
+
"@mmflow/charts": "0.1.0"
|
|
28
|
+
},
|
|
29
|
+
"peerDependencies": {
|
|
30
|
+
"vue": ">=3.3"
|
|
31
|
+
},
|
|
32
|
+
"devDependencies": {
|
|
33
|
+
"vue": "^3.4.0"
|
|
34
|
+
},
|
|
35
|
+
"scripts": {
|
|
36
|
+
"build": "tsup src/index.ts --format esm,cjs --dts --treeshake --external vue --external @mmflow/charts",
|
|
37
|
+
"typecheck": "tsc --noEmit"
|
|
38
|
+
}
|
|
39
|
+
}
|