Skip to content

Commit 205a7ee

Browse files
authored
Implement wordcloud visualization (#786)
* Implement wordcloud visualization * Changing the name
1 parent 0b43862 commit 205a7ee

File tree

3 files changed

+96
-1
lines changed

3 files changed

+96
-1
lines changed
Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import React, { useEffect, useState } from "react";
2+
import { VegaLite } from "react-vega";
3+
import { downloadVisData, fileDownloaded } from "../../../utils/visualization";
4+
import {
5+
guessDataType,
6+
parseTextToJson,
7+
readTextFromFile,
8+
} from "../../../utils/common";
9+
import { Box, Container, Grid, MenuItem, Select } from "@mui/material";
10+
import { ClowderInputLabel } from "../../styledComponents/ClowderInputLabel";
11+
import { theme } from "../../../theme";
12+
13+
type TextProps = {
14+
fileId?: string;
15+
visualizationId?: string;
16+
};
17+
18+
const allowedType = [
19+
"quantitative",
20+
"temporal",
21+
"ordinal",
22+
"nominal",
23+
"geojson",
24+
];
25+
26+
export default function VegaSpec(props: TextProps) {
27+
let { fileId, visualizationId } = props;
28+
const [data, setData] = useState();
29+
30+
useEffect(() => {
31+
const processBlob = async () => {
32+
try {
33+
let blob;
34+
if (visualizationId) {
35+
blob = await downloadVisData(visualizationId);
36+
} else {
37+
blob = await fileDownloaded(fileId, 0);
38+
}
39+
const file = new File([blob], "text.tmp");
40+
const reader = new FileReader();
41+
reader.onload = function (e) {
42+
try {
43+
const jsonData = JSON.parse(e.target.result);
44+
setData(jsonData);
45+
console.debug('JSON data from file:', jsonData);
46+
} catch (error) {
47+
console.error('Error parsing JSON:', error);
48+
}
49+
};
50+
const text = await reader.readAsText(file);
51+
console.debug(text);
52+
} catch (error) {
53+
console.error("Error fetching data:", error);
54+
}
55+
};
56+
57+
processBlob();
58+
}, [visualizationId, fileId]);
59+
60+
61+
return (
62+
<Container sx={{ marginTop: "2em"}}>
63+
{data && <VegaLite spec={data} />}
64+
</Container>
65+
);
66+
}
Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "vega-spec",
3+
"version": "1.0.0",
4+
"description": "A simple visualization using vegalite and the spec in json from vis data.",
5+
"main": "VegaSpec.tsx",
6+
"dependencies": {
7+
"clowder2-core": "1.0.0",
8+
"react": "^17.0.2",
9+
"react-dom": "^17.0.2",
10+
"vega": "^5.20.2"
11+
},
12+
"visConfig": {
13+
"name": "VegaSpec",
14+
"mainType": "application",
15+
"mimeTypes": [
16+
"application/json"
17+
],
18+
"fields": [
19+
]
20+
}
21+
}

frontend/src/visualization.config.ts

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,4 +84,12 @@ visComponentDefinitions.push({
8484
component: React.createElement(registerComponent(configVega)),
8585
});
8686

87-
export {visComponentDefinitions};
87+
const configWordCloudSpec = require("./components/visualizations/VegaSpec/manifest.json");
88+
visComponentDefinitions.push({
89+
name: configWordCloudSpec.name,
90+
mainType: configWordCloudSpec.visConfig.mainType,
91+
mimeTypes: configWordCloudSpec.visConfig.mimeTypes,
92+
component: React.createElement(registerComponent(configWordCloudSpec)),
93+
});
94+
95+
export { visComponentDefinitions };

0 commit comments

Comments
 (0)