visualifyjs 2.5.3-2.dev → 2.5.3-9-dev
Sign up to get free protection for your applications and to get access to all the features.
Potentially problematic release.
This version of visualifyjs might be problematic. Click here for more details.
- package/.github/workflows/{static.yml.bak → build.yaml} +51 -51
- package/LICENSE +674 -674
- package/README.md +40 -58
- package/config-overrides.js +31 -31
- package/dist/visualify.js +3 -3
- package/docs/CLI.md +15 -0
- package/docs/{docs/README.md → README.md} +41 -65
- package/docs/{docs/Rechart → Rechart}/bar.md +190 -190
- package/docs/{docs/Rechart → Rechart}/funnel.md +193 -241
- package/docs/{docs/Rechart → Rechart}/line.md +355 -355
- package/docs/{docs/Rechart → Rechart}/pie.md +225 -225
- package/docs/{docs/Rechart → Rechart}/radar.md +253 -253
- package/docs/{docs/_404.md → _404.md} +51 -51
- package/docs/{docs/_coverpage.md → _coverpage.md} +11 -11
- package/docs/{docs/_sidebar.md → _sidebar.md} +42 -44
- package/docs/{docs/components → components}/dotBio.md +34 -34
- package/docs/{docs/components → components}/echart.md +82 -82
- package/docs/{docs/components → components}/html.md +34 -34
- package/docs/{docs/components → components}/macaron.md +145 -145
- package/docs/components/markdown.md +0 -0
- package/docs/{docs/components → components}/more.md +142 -142
- package/docs/{docs/components → components}/plotly.md +62 -62
- package/docs/{docs/components → components}/scatterL.md +70 -70
- package/docs/{docs/components → components}/visium.md +56 -56
- package/docs/{docs/configuration.md → configuration.md} +123 -121
- package/docs/{docs/deploy.md → deploy.md} +23 -31
- package/docs/index.html +70 -70
- package/docs/log.md +1 -0
- package/docs/manifest.json +23 -23
- package/docs/{docs/more-pages.md → more-pages.md} +23 -23
- package/docs/{docs/quickstart.md → quickstart.md} +115 -124
- package/docs/{docs/rechart-attributes.md → rechart-attributes.md} +74 -74
- package/docs/{docs/rechart-basic-usage.md → rechart-basic-usage.md} +162 -162
- package/docs/static/css/fluff-stuff.css +169 -169
- package/docs/static/css/font-awesome.min.css +4 -4
- package/docs/static/css/visualify.css +25 -25
- package/docs/static/js/configuration.js +448 -448
- package/docs/static/js/visualify.js +24 -23
- package/docs/theme.md +3 -0
- package/package.json +74 -83
- package/rollup.config.mjs +75 -75
- package/src/_css/404.css +115 -115
- package/src/_css/App.css +37 -37
- package/src/_css/autoSuggestion.css +26 -26
- package/src/_css/circular-progress.css +32 -32
- package/src/_css/index.css +36 -36
- package/src/_css/modern.css +24 -24
- package/src/_media/corner.svg +8 -8
- package/src/_media/download.svg +3 -3
- package/src/_media/logo.svg +14 -14
- package/src/_test/App.test.js +15 -15
- package/src/_utils/reportWebVitals.js +13 -13
- package/src/core/appContext.js +27 -27
- package/src/core/components/Scatter.js +188 -188
- package/src/core/components/ScatterBio.js +572 -572
- package/src/core/components/VisiumPlot.js +165 -165
- package/src/core/components/browser.js +42 -42
- package/src/core/components/dotplot.js +413 -413
- package/src/core/components/html.js +29 -29
- package/src/core/components/list.js +178 -178
- package/src/core/components/macaron.js +201 -201
- package/src/core/components/markdown.js +56 -56
- package/src/core/components/parser.scatterBio.js +579 -587
- package/src/core/components/ratio.js +80 -80
- package/src/core/components/scatterL.js +173 -173
- package/src/core/components/searchbar.js +131 -131
- package/src/core/components/selection.js +193 -193
- package/src/core/components/timeline.js +281 -281
- package/src/core/components/visium.js +97 -97
- package/src/core/fetch/condfetch.js +82 -82
- package/src/core/fetch/fetch.js +92 -92
- package/src/core/fetch/json.js +29 -29
- package/src/core/fetch/vfetch.js +42 -42
- package/src/core/liveEditor.js +44 -44
- package/src/core/modules/codeEditorWithPreview.js +104 -104
- package/src/core/modules/echarts/common.js +20 -20
- package/src/core/modules/echarts/presetHandler.js +41 -41
- package/src/core/modules/echarts/presets/esodev.chromium.js +172 -172
- package/src/core/modules/echarts/presets/esodev.codex.js +130 -130
- package/src/core/modules/echarts/presets/esodev.visium.js +123 -123
- package/src/core/modules/echarts/presets/mmtrbc.js +186 -186
- package/src/core/modules/echarts.js +71 -71
- package/src/core/modules/echartsUtils.js +43 -43
- package/src/core/modules/echartswitcher.js +152 -152
- package/src/core/modules/replotly/presetHandler.js +24 -24
- package/src/core/modules/replotly/presets/minimum.js +18 -18
- package/src/core/modules/replotly/presets/mmtrbc.dot.js +114 -114
- package/src/core/modules/replotly/presets/mmtrbc.violin.js +100 -100
- package/src/core/modules/replotly.js +71 -71
- package/src/core/pages/404.js +50 -50
- package/src/core/pages/error.js +27 -27
- package/src/core/pages/jsonPage.js +62 -62
- package/src/core/pages/loading.js +44 -44
- package/src/core/parser/echart.data.js +183 -183
- package/src/core/parser/echart.features.js +125 -125
- package/src/core/parser/echart.general.js +143 -147
- package/src/core/parser/echart.hilbert.js +57 -57
- package/src/core/parser/echart.parser.js +210 -210
- package/src/core/parser/echart.series.js +67 -67
- package/src/core/parser/echart.types.js +76 -76
- package/src/core/parser/plotly.config.js +10 -10
- package/src/core/parser/plotly.data.js +132 -132
- package/src/core/parser/plotly.layout.js +9 -9
- package/src/core/parser/plotly.violin.js +18 -18
- package/src/core/recharts.js +62 -62
- package/src/core/router/alias.js +49 -49
- package/src/core/router/jsonRouter.js +31 -31
- package/src/core/themes/modern.js +32 -32
- package/src/core/themes/themeSelector.js +33 -33
- package/src/core/visualify.js +47 -47
- package/src/core/widgets/circularProgress.js +23 -23
- package/src/core/widgets/controller.js +83 -83
- package/src/core/widgets/errorBoundary.js +36 -36
- package/src/core/widgets/footer.js +177 -177
- package/src/core/widgets/header.js +234 -234
- package/src/core/widgets/layout/Grid.js +31 -31
- package/src/core/widgets/layout.js +36 -36
- package/src/core/widgets/mapping.js +42 -42
- package/src/index.js +62 -62
- package/src/setupTests.js +5 -5
- package/docs/docs/CLI.md +0 -34
- package/docs/docs/Rechart/scatter.md +0 -298
- package/docs/docs/log.md +0 -9
- package/docs/docs/static/logo/favicon.ico +0 -0
- package/docs/docs/static/logo/logo_128x128.png +0 -0
- package/docs/docs/static/logo/logo_192x192.png +0 -0
- package/docs/docs/static/logo/logo_256x256.png +0 -0
- package/docs/docs/static/logo/logo_512x512.png +0 -0
- package/docs/docs/static/logo/logo_64x64.png +0 -0
- package/docs/docs/theme.md +0 -5
- /package/docs/{docs/Rechart → Rechart}/geo.md +0 -0
- /package/docs/{docs/Rechart → Rechart}/liquidfill.md +0 -0
- /package/docs/{docs/Rechart → Rechart}/polar.md +0 -0
- /package/docs/{docs/Rechart → Rechart}/sankey.md +0 -0
- /package/docs/{docs/Rechart/sunburst.md → Rechart/scatter.md} +0 -0
- /package/docs/{docs/Rechart/tree.md → Rechart/sunburst.md} +0 -0
- /package/docs/{docs/Rechart/wordcloud.md → Rechart/tree.md} +0 -0
- /package/docs/{docs/components/markdown.md → Rechart/wordcloud.md} +0 -0
- /package/docs/{docs/static → static}/_images/deploy-github-pages.png +0 -0
package/src/core/pages/error.js
CHANGED
@@ -1,27 +1,27 @@
|
|
1
|
-
/*
|
2
|
-
* @Author : Lihao leolihao@arizona.edu
|
3
|
-
* @Date : 2023-12-23 13:22:50
|
4
|
-
* @FilePath : /visualifyjs/src/core/pages/error.js
|
5
|
-
* @Description :
|
6
|
-
* Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
|
7
|
-
*/
|
8
|
-
import React from 'react';
|
9
|
-
|
10
|
-
function Error({ message, style }) {
|
11
|
-
return (
|
12
|
-
<div
|
13
|
-
style={{
|
14
|
-
display: 'flex',
|
15
|
-
alignItems: 'center',
|
16
|
-
justifyContent: 'center',
|
17
|
-
height: '100%',
|
18
|
-
color: 'red',
|
19
|
-
...style,
|
20
|
-
}}>
|
21
|
-
{/* Display the error message */}
|
22
|
-
<p>{message}</p>
|
23
|
-
</div>
|
24
|
-
);
|
25
|
-
}
|
26
|
-
|
27
|
-
export default Error;
|
1
|
+
/*
|
2
|
+
* @Author : Lihao leolihao@arizona.edu
|
3
|
+
* @Date : 2023-12-23 13:22:50
|
4
|
+
* @FilePath : /visualifyjs/src/core/pages/error.js
|
5
|
+
* @Description :
|
6
|
+
* Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
|
7
|
+
*/
|
8
|
+
import React from 'react';
|
9
|
+
|
10
|
+
function Error({ message, style }) {
|
11
|
+
return (
|
12
|
+
<div
|
13
|
+
style={{
|
14
|
+
display: 'flex',
|
15
|
+
alignItems: 'center',
|
16
|
+
justifyContent: 'center',
|
17
|
+
height: '100%',
|
18
|
+
color: 'red',
|
19
|
+
...style,
|
20
|
+
}}>
|
21
|
+
{/* Display the error message */}
|
22
|
+
<p>{message}</p>
|
23
|
+
</div>
|
24
|
+
);
|
25
|
+
}
|
26
|
+
|
27
|
+
export default Error;
|
@@ -1,62 +1,62 @@
|
|
1
|
-
/*
|
2
|
-
* @Author : Lihao leolihao@arizona.edu
|
3
|
-
* @Date : 2023-11-29 21:20:55
|
4
|
-
* @FilePath : /visualifyjs/src/core/pages/jsonPage.js
|
5
|
-
* @Description :
|
6
|
-
* Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
|
7
|
-
*/
|
8
|
-
import React, { useEffect, useState } from 'react';
|
9
|
-
import { useLocation } from 'react-router-dom';
|
10
|
-
import NotFoundPage from './404';
|
11
|
-
import fetchJson from '../fetch/json';
|
12
|
-
import LayoutParser from '../widgets/layout';
|
13
|
-
import Vcontroller from '../widgets/controller';
|
14
|
-
|
15
|
-
const JsonPage = () => {
|
16
|
-
const [jsonData, setJsonData] = useState(null);
|
17
|
-
const [loading, setLoading] = useState(true);
|
18
|
-
const [error, setError] = useState(null);
|
19
|
-
const location = useLocation();
|
20
|
-
|
21
|
-
useEffect(() => {
|
22
|
-
const routerpath = location.pathname.replace(/^\/|\.json$/g, '');
|
23
|
-
const jsonurl =
|
24
|
-
routerpath === ''
|
25
|
-
? 'home'
|
26
|
-
: routerpath.endsWith('/')
|
27
|
-
? routerpath + 'home'
|
28
|
-
: routerpath;
|
29
|
-
//console.log('JsonPage jsonurl:', jsonurl);
|
30
|
-
if (jsonurl) {
|
31
|
-
setLoading(true);
|
32
|
-
setError(null);
|
33
|
-
|
34
|
-
fetchJson(jsonurl)
|
35
|
-
.then((data) => {
|
36
|
-
setJsonData(data);
|
37
|
-
setLoading(false);
|
38
|
-
})
|
39
|
-
.catch((err) => {
|
40
|
-
setError(err);
|
41
|
-
setLoading(false);
|
42
|
-
});
|
43
|
-
}
|
44
|
-
}, [location.pathname]); // React to changes in pathname
|
45
|
-
|
46
|
-
if (loading) {
|
47
|
-
return <div>Loading...</div>;
|
48
|
-
}
|
49
|
-
if (error || !jsonData) {
|
50
|
-
return <NotFoundPage page={location.pathname} />;
|
51
|
-
}
|
52
|
-
|
53
|
-
return (
|
54
|
-
<>
|
55
|
-
<LayoutParser config={jsonData.layout}>
|
56
|
-
<Vcontroller components={jsonData.components} />
|
57
|
-
</LayoutParser>
|
58
|
-
</>
|
59
|
-
);
|
60
|
-
};
|
61
|
-
|
62
|
-
export default JsonPage;
|
1
|
+
/*
|
2
|
+
* @Author : Lihao leolihao@arizona.edu
|
3
|
+
* @Date : 2023-11-29 21:20:55
|
4
|
+
* @FilePath : /visualifyjs/src/core/pages/jsonPage.js
|
5
|
+
* @Description :
|
6
|
+
* Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
|
7
|
+
*/
|
8
|
+
import React, { useEffect, useState } from 'react';
|
9
|
+
import { useLocation } from 'react-router-dom';
|
10
|
+
import NotFoundPage from './404';
|
11
|
+
import fetchJson from '../fetch/json';
|
12
|
+
import LayoutParser from '../widgets/layout';
|
13
|
+
import Vcontroller from '../widgets/controller';
|
14
|
+
|
15
|
+
const JsonPage = () => {
|
16
|
+
const [jsonData, setJsonData] = useState(null);
|
17
|
+
const [loading, setLoading] = useState(true);
|
18
|
+
const [error, setError] = useState(null);
|
19
|
+
const location = useLocation();
|
20
|
+
|
21
|
+
useEffect(() => {
|
22
|
+
const routerpath = location.pathname.replace(/^\/|\.json$/g, '');
|
23
|
+
const jsonurl =
|
24
|
+
routerpath === ''
|
25
|
+
? 'home'
|
26
|
+
: routerpath.endsWith('/')
|
27
|
+
? routerpath + 'home'
|
28
|
+
: routerpath;
|
29
|
+
//console.log('JsonPage jsonurl:', jsonurl);
|
30
|
+
if (jsonurl) {
|
31
|
+
setLoading(true);
|
32
|
+
setError(null);
|
33
|
+
|
34
|
+
fetchJson(jsonurl)
|
35
|
+
.then((data) => {
|
36
|
+
setJsonData(data);
|
37
|
+
setLoading(false);
|
38
|
+
})
|
39
|
+
.catch((err) => {
|
40
|
+
setError(err);
|
41
|
+
setLoading(false);
|
42
|
+
});
|
43
|
+
}
|
44
|
+
}, [location.pathname]); // React to changes in pathname
|
45
|
+
|
46
|
+
if (loading) {
|
47
|
+
return <div>Loading...</div>;
|
48
|
+
}
|
49
|
+
if (error || !jsonData) {
|
50
|
+
return <NotFoundPage page={location.pathname} />;
|
51
|
+
}
|
52
|
+
|
53
|
+
return (
|
54
|
+
<>
|
55
|
+
<LayoutParser config={jsonData.layout}>
|
56
|
+
<Vcontroller components={jsonData.components} />
|
57
|
+
</LayoutParser>
|
58
|
+
</>
|
59
|
+
);
|
60
|
+
};
|
61
|
+
|
62
|
+
export default JsonPage;
|
@@ -1,44 +1,44 @@
|
|
1
|
-
/*
|
2
|
-
* @Author : Lihao leolihao@arizona.edu
|
3
|
-
* @Date : 2023-12-23 13:22:33
|
4
|
-
* @FilePath : /visualifyjs/src/core/pages/Loading.js
|
5
|
-
* @Description :
|
6
|
-
* Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
|
7
|
-
*/
|
8
|
-
import React from 'react';
|
9
|
-
import Error from './error';
|
10
|
-
import CircularProgress from '../widgets/circularProgress';
|
11
|
-
|
12
|
-
function Loading({
|
13
|
-
message,
|
14
|
-
style,
|
15
|
-
msgStyle,
|
16
|
-
ProgressColor = 'primary',
|
17
|
-
error = false,
|
18
|
-
}) {
|
19
|
-
return (
|
20
|
-
<div
|
21
|
-
style={{
|
22
|
-
display: 'flex',
|
23
|
-
flexDirection: 'column', // Added to stack elements vertically
|
24
|
-
alignItems: 'center',
|
25
|
-
justifyContent: 'center',
|
26
|
-
height: '100%',
|
27
|
-
...style,
|
28
|
-
}}>
|
29
|
-
<CircularProgress color={ProgressColor} />
|
30
|
-
<div style={{ marginTop: '10px', ...msgStyle }}>
|
31
|
-
{error ? (
|
32
|
-
<Error
|
33
|
-
message={message}
|
34
|
-
style={msgStyle}
|
35
|
-
/>
|
36
|
-
) : (
|
37
|
-
<p>{message}</p>
|
38
|
-
)}
|
39
|
-
</div>
|
40
|
-
</div>
|
41
|
-
);
|
42
|
-
}
|
43
|
-
|
44
|
-
export default Loading;
|
1
|
+
/*
|
2
|
+
* @Author : Lihao leolihao@arizona.edu
|
3
|
+
* @Date : 2023-12-23 13:22:33
|
4
|
+
* @FilePath : /visualifyjs/src/core/pages/Loading.js
|
5
|
+
* @Description :
|
6
|
+
* Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
|
7
|
+
*/
|
8
|
+
import React from 'react';
|
9
|
+
import Error from './error';
|
10
|
+
import CircularProgress from '../widgets/circularProgress';
|
11
|
+
|
12
|
+
function Loading({
|
13
|
+
message,
|
14
|
+
style,
|
15
|
+
msgStyle,
|
16
|
+
ProgressColor = 'primary',
|
17
|
+
error = false,
|
18
|
+
}) {
|
19
|
+
return (
|
20
|
+
<div
|
21
|
+
style={{
|
22
|
+
display: 'flex',
|
23
|
+
flexDirection: 'column', // Added to stack elements vertically
|
24
|
+
alignItems: 'center',
|
25
|
+
justifyContent: 'center',
|
26
|
+
height: '100%',
|
27
|
+
...style,
|
28
|
+
}}>
|
29
|
+
<CircularProgress color={ProgressColor} />
|
30
|
+
<div style={{ marginTop: '10px', ...msgStyle }}>
|
31
|
+
{error ? (
|
32
|
+
<Error
|
33
|
+
message={message}
|
34
|
+
style={msgStyle}
|
35
|
+
/>
|
36
|
+
) : (
|
37
|
+
<p>{message}</p>
|
38
|
+
)}
|
39
|
+
</div>
|
40
|
+
</div>
|
41
|
+
);
|
42
|
+
}
|
43
|
+
|
44
|
+
export default Loading;
|
@@ -1,183 +1,183 @@
|
|
1
|
-
/*
|
2
|
-
* @Author : Lihao leolihao@arizona.edu
|
3
|
-
* @Date : 2023-12-02 16:52:58
|
4
|
-
* @FilePath : /visualifyjs/src/core/parser/echart.data.js
|
5
|
-
* @Description :
|
6
|
-
* Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
|
7
|
-
*/
|
8
|
-
import { getArrayEl, _handleSeries } from './echart.series';
|
9
|
-
import {
|
10
|
-
_parsePeakvalley,
|
11
|
-
_parseMarkArea,
|
12
|
-
_parseMarkLine,
|
13
|
-
} from './echart.features';
|
14
|
-
|
15
|
-
const _parser_data = (options = {}, preset = {}) => {
|
16
|
-
// Parse the custom options
|
17
|
-
const parsedOptions = {
|
18
|
-
...preset,
|
19
|
-
yAxis: { ...preset.yAxis },
|
20
|
-
xAxis: { ...preset.xAxis },
|
21
|
-
legend: { ...preset.legend },
|
22
|
-
title: { ...preset.title },
|
23
|
-
tooltip: { ...preset.tooltip },
|
24
|
-
// ... other default settings for charts
|
25
|
-
series: [],
|
26
|
-
};
|
27
|
-
|
28
|
-
// Initialize totalValues array if percentage mode is active
|
29
|
-
let totalValues = options.percentage
|
30
|
-
? new Array(options.xAxis.length).fill(0)
|
31
|
-
: [];
|
32
|
-
|
33
|
-
// calculate total values if in percentage mode
|
34
|
-
if (options.percentage && options.data) {
|
35
|
-
Object.entries(options.data).forEach(([_, data]) => {
|
36
|
-
data.forEach((value, idx) => {
|
37
|
-
totalValues[idx] += value;
|
38
|
-
});
|
39
|
-
});
|
40
|
-
}
|
41
|
-
|
42
|
-
if (options.data && typeof options.data === 'object') {
|
43
|
-
parsedOptions.series = Object.entries(options.data).map(
|
44
|
-
([name, data], index) => {
|
45
|
-
let seriesObject = {
|
46
|
-
name,
|
47
|
-
type: getArrayEl(options.type, index),
|
48
|
-
data,
|
49
|
-
...(options.markArea && {
|
50
|
-
markArea: _parseMarkArea(options.markArea, index),
|
51
|
-
}),
|
52
|
-
...(options.markLine && {
|
53
|
-
markLine: _parseMarkLine(options.markLine, index),
|
54
|
-
}),
|
55
|
-
...(options.symbol && {
|
56
|
-
symbol: getArrayEl(options.symbol, index),
|
57
|
-
}),
|
58
|
-
...(options.symbolSize && {
|
59
|
-
symbolSize: getArrayEl(options.symbolSize, index),
|
60
|
-
}),
|
61
|
-
...(options.stack && {
|
62
|
-
stack: options.stack.includes(name)
|
63
|
-
? 'total'
|
64
|
-
: getArrayEl(options.stack, index),
|
65
|
-
}),
|
66
|
-
...(options.emphasis && {
|
67
|
-
emphasis: getArrayEl(options.emphasis, index),
|
68
|
-
}),
|
69
|
-
};
|
70
|
-
|
71
|
-
if (
|
72
|
-
options.percentage &&
|
73
|
-
(options.type === 'bar' || options.type === 'line')
|
74
|
-
) {
|
75
|
-
seriesObject.data = seriesObject.data.map(
|
76
|
-
(value, idx) => (value / totalValues[idx]) * 100,
|
77
|
-
);
|
78
|
-
seriesObject.stack = 'total';
|
79
|
-
}
|
80
|
-
|
81
|
-
if (options.waterfall) {
|
82
|
-
if (name === 'Placeholder' || name === options.waterfall) {
|
83
|
-
seriesObject.itemStyle = {
|
84
|
-
borderColor: 'transparent',
|
85
|
-
color: 'transparent',
|
86
|
-
};
|
87
|
-
seriesObject = {
|
88
|
-
...seriesObject,
|
89
|
-
emphasis: {
|
90
|
-
...seriesObject?.emphasis,
|
91
|
-
itemStyle: {
|
92
|
-
borderColor: 'transparent',
|
93
|
-
color: 'transparent',
|
94
|
-
},
|
95
|
-
},
|
96
|
-
};
|
97
|
-
}
|
98
|
-
}
|
99
|
-
|
100
|
-
_parsePeakvalley(options, seriesObject);
|
101
|
-
|
102
|
-
_handleSeries(options, seriesObject, index);
|
103
|
-
|
104
|
-
return seriesObject;
|
105
|
-
},
|
106
|
-
);
|
107
|
-
}
|
108
|
-
|
109
|
-
if (
|
110
|
-
(Array.isArray(options.type) && options.type.includes('radar')) ||
|
111
|
-
options.type === 'radar'
|
112
|
-
)
|
113
|
-
parsedOptions.radar = options.radar;
|
114
|
-
|
115
|
-
// Modify yAxis for percentage display
|
116
|
-
if (options.percentage) {
|
117
|
-
parsedOptions.yAxis = {
|
118
|
-
...parsedOptions.yAxis,
|
119
|
-
axisLabel: { formatter: '{value}%' },
|
120
|
-
max: 100,
|
121
|
-
};
|
122
|
-
|
123
|
-
parsedOptions.tooltip = {
|
124
|
-
trigger: 'axis',
|
125
|
-
formatter: percentageTooltipFormatter,
|
126
|
-
};
|
127
|
-
}
|
128
|
-
|
129
|
-
if (options.markArea || options.markLine) {
|
130
|
-
parsedOptions.tooltip = {
|
131
|
-
trigger: 'axis',
|
132
|
-
axisPointer: {
|
133
|
-
type: 'cross',
|
134
|
-
},
|
135
|
-
};
|
136
|
-
}
|
137
|
-
|
138
|
-
if (options.waterfall) {
|
139
|
-
parsedOptions.legend = {
|
140
|
-
...parsedOptions.legend,
|
141
|
-
data: parsedOptions.series
|
142
|
-
.map((series) => series.name)
|
143
|
-
.filter((name) => name !== 'Placeholder'),
|
144
|
-
};
|
145
|
-
parsedOptions.xAxis = {
|
146
|
-
...parsedOptions.xAxis,
|
147
|
-
splitLine: { show: false },
|
148
|
-
};
|
149
|
-
|
150
|
-
parsedOptions.tooltip = {
|
151
|
-
trigger: 'axis',
|
152
|
-
axisPointer: {
|
153
|
-
type: 'shadow',
|
154
|
-
},
|
155
|
-
formatter: function (params) {
|
156
|
-
var tar = params[1];
|
157
|
-
return (
|
158
|
-
tar.name +
|
159
|
-
'<br/>' +
|
160
|
-
tar.marker +
|
161
|
-
tar.seriesName +
|
162
|
-
' : ' +
|
163
|
-
tar.value
|
164
|
-
);
|
165
|
-
},
|
166
|
-
};
|
167
|
-
}
|
168
|
-
|
169
|
-
return parsedOptions;
|
170
|
-
};
|
171
|
-
|
172
|
-
export default _parser_data;
|
173
|
-
|
174
|
-
export function percentageTooltipFormatter(params) {
|
175
|
-
let total = params.reduce((sum, item) => sum + item.value, 0);
|
176
|
-
let tooltipContent = params
|
177
|
-
.map((item) => {
|
178
|
-
let percentage = ((item.value / total) * 100).toFixed(2);
|
179
|
-
return `${item.marker}${item.seriesName}: ${percentage}%`;
|
180
|
-
})
|
181
|
-
.join('<br/>');
|
182
|
-
return `${params[0].axisValueLabel}<br/>${tooltipContent}`;
|
183
|
-
}
|
1
|
+
/*
|
2
|
+
* @Author : Lihao leolihao@arizona.edu
|
3
|
+
* @Date : 2023-12-02 16:52:58
|
4
|
+
* @FilePath : /visualifyjs/src/core/parser/echart.data.js
|
5
|
+
* @Description :
|
6
|
+
* Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
|
7
|
+
*/
|
8
|
+
import { getArrayEl, _handleSeries } from './echart.series';
|
9
|
+
import {
|
10
|
+
_parsePeakvalley,
|
11
|
+
_parseMarkArea,
|
12
|
+
_parseMarkLine,
|
13
|
+
} from './echart.features';
|
14
|
+
|
15
|
+
const _parser_data = (options = {}, preset = {}) => {
|
16
|
+
// Parse the custom options
|
17
|
+
const parsedOptions = {
|
18
|
+
...preset,
|
19
|
+
yAxis: { ...preset.yAxis },
|
20
|
+
xAxis: { ...preset.xAxis },
|
21
|
+
legend: { ...preset.legend },
|
22
|
+
title: { ...preset.title },
|
23
|
+
tooltip: { ...preset.tooltip },
|
24
|
+
// ... other default settings for charts
|
25
|
+
series: [],
|
26
|
+
};
|
27
|
+
|
28
|
+
// Initialize totalValues array if percentage mode is active
|
29
|
+
let totalValues = options.percentage
|
30
|
+
? new Array(options.xAxis.length).fill(0)
|
31
|
+
: [];
|
32
|
+
|
33
|
+
// calculate total values if in percentage mode
|
34
|
+
if (options.percentage && options.data) {
|
35
|
+
Object.entries(options.data).forEach(([_, data]) => {
|
36
|
+
data.forEach((value, idx) => {
|
37
|
+
totalValues[idx] += value;
|
38
|
+
});
|
39
|
+
});
|
40
|
+
}
|
41
|
+
|
42
|
+
if (options.data && typeof options.data === 'object') {
|
43
|
+
parsedOptions.series = Object.entries(options.data).map(
|
44
|
+
([name, data], index) => {
|
45
|
+
let seriesObject = {
|
46
|
+
name,
|
47
|
+
type: getArrayEl(options.type, index),
|
48
|
+
data,
|
49
|
+
...(options.markArea && {
|
50
|
+
markArea: _parseMarkArea(options.markArea, index),
|
51
|
+
}),
|
52
|
+
...(options.markLine && {
|
53
|
+
markLine: _parseMarkLine(options.markLine, index),
|
54
|
+
}),
|
55
|
+
...(options.symbol && {
|
56
|
+
symbol: getArrayEl(options.symbol, index),
|
57
|
+
}),
|
58
|
+
...(options.symbolSize && {
|
59
|
+
symbolSize: getArrayEl(options.symbolSize, index),
|
60
|
+
}),
|
61
|
+
...(options.stack && {
|
62
|
+
stack: options.stack.includes(name)
|
63
|
+
? 'total'
|
64
|
+
: getArrayEl(options.stack, index),
|
65
|
+
}),
|
66
|
+
...(options.emphasis && {
|
67
|
+
emphasis: getArrayEl(options.emphasis, index),
|
68
|
+
}),
|
69
|
+
};
|
70
|
+
|
71
|
+
if (
|
72
|
+
options.percentage &&
|
73
|
+
(options.type === 'bar' || options.type === 'line')
|
74
|
+
) {
|
75
|
+
seriesObject.data = seriesObject.data.map(
|
76
|
+
(value, idx) => (value / totalValues[idx]) * 100,
|
77
|
+
);
|
78
|
+
seriesObject.stack = 'total';
|
79
|
+
}
|
80
|
+
|
81
|
+
if (options.waterfall) {
|
82
|
+
if (name === 'Placeholder' || name === options.waterfall) {
|
83
|
+
seriesObject.itemStyle = {
|
84
|
+
borderColor: 'transparent',
|
85
|
+
color: 'transparent',
|
86
|
+
};
|
87
|
+
seriesObject = {
|
88
|
+
...seriesObject,
|
89
|
+
emphasis: {
|
90
|
+
...seriesObject?.emphasis,
|
91
|
+
itemStyle: {
|
92
|
+
borderColor: 'transparent',
|
93
|
+
color: 'transparent',
|
94
|
+
},
|
95
|
+
},
|
96
|
+
};
|
97
|
+
}
|
98
|
+
}
|
99
|
+
|
100
|
+
_parsePeakvalley(options, seriesObject);
|
101
|
+
|
102
|
+
_handleSeries(options, seriesObject, index);
|
103
|
+
|
104
|
+
return seriesObject;
|
105
|
+
},
|
106
|
+
);
|
107
|
+
}
|
108
|
+
|
109
|
+
if (
|
110
|
+
(Array.isArray(options.type) && options.type.includes('radar')) ||
|
111
|
+
options.type === 'radar'
|
112
|
+
)
|
113
|
+
parsedOptions.radar = options.radar;
|
114
|
+
|
115
|
+
// Modify yAxis for percentage display
|
116
|
+
if (options.percentage) {
|
117
|
+
parsedOptions.yAxis = {
|
118
|
+
...parsedOptions.yAxis,
|
119
|
+
axisLabel: { formatter: '{value}%' },
|
120
|
+
max: 100,
|
121
|
+
};
|
122
|
+
|
123
|
+
parsedOptions.tooltip = {
|
124
|
+
trigger: 'axis',
|
125
|
+
formatter: percentageTooltipFormatter,
|
126
|
+
};
|
127
|
+
}
|
128
|
+
|
129
|
+
if (options.markArea || options.markLine) {
|
130
|
+
parsedOptions.tooltip = {
|
131
|
+
trigger: 'axis',
|
132
|
+
axisPointer: {
|
133
|
+
type: 'cross',
|
134
|
+
},
|
135
|
+
};
|
136
|
+
}
|
137
|
+
|
138
|
+
if (options.waterfall) {
|
139
|
+
parsedOptions.legend = {
|
140
|
+
...parsedOptions.legend,
|
141
|
+
data: parsedOptions.series
|
142
|
+
.map((series) => series.name)
|
143
|
+
.filter((name) => name !== 'Placeholder'),
|
144
|
+
};
|
145
|
+
parsedOptions.xAxis = {
|
146
|
+
...parsedOptions.xAxis,
|
147
|
+
splitLine: { show: false },
|
148
|
+
};
|
149
|
+
|
150
|
+
parsedOptions.tooltip = {
|
151
|
+
trigger: 'axis',
|
152
|
+
axisPointer: {
|
153
|
+
type: 'shadow',
|
154
|
+
},
|
155
|
+
formatter: function (params) {
|
156
|
+
var tar = params[1];
|
157
|
+
return (
|
158
|
+
tar.name +
|
159
|
+
'<br/>' +
|
160
|
+
tar.marker +
|
161
|
+
tar.seriesName +
|
162
|
+
' : ' +
|
163
|
+
tar.value
|
164
|
+
);
|
165
|
+
},
|
166
|
+
};
|
167
|
+
}
|
168
|
+
|
169
|
+
return parsedOptions;
|
170
|
+
};
|
171
|
+
|
172
|
+
export default _parser_data;
|
173
|
+
|
174
|
+
export function percentageTooltipFormatter(params) {
|
175
|
+
let total = params.reduce((sum, item) => sum + item.value, 0);
|
176
|
+
let tooltipContent = params
|
177
|
+
.map((item) => {
|
178
|
+
let percentage = ((item.value / total) * 100).toFixed(2);
|
179
|
+
return `${item.marker}${item.seriesName}: ${percentage}%`;
|
180
|
+
})
|
181
|
+
.join('<br/>');
|
182
|
+
return `${params[0].axisValueLabel}<br/>${tooltipContent}`;
|
183
|
+
}
|