@mongodb-js/charts-embed-dom
Version:
JavaScript library for embedding MongoDB Charts
477 lines (476 loc) • 19.2 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.gettingChartData = exports.tableCharthighlighting = exports.vegaCharthighlighting = exports.clickEventSubscriptionAndUnsubscription = exports.geospatialHeatmap = exports.geospatialScatter = exports.geospatialChoropleth = exports.textWordCloud = exports.textTable = exports.gridHeatmap = exports.columnGrouped = exports.playground = void 0;
const bson_1 = require("bson");
const dom_1 = require("./dom");
const index_1 = __importDefault(require("./index"));
const meta = {
title: 'Charts Embedding SDK | embedChart',
};
exports.default = meta;
exports.playground = {
name: 'Playground',
argTypes: {
baseUrl: {
name: 'Base URL',
type: 'string',
control: {
type: 'text',
labels: {},
},
},
chartId: {
name: 'Chart ID',
type: 'string',
control: 'text',
},
responsive: {
name: 'Responsive',
type: 'boolean',
control: 'boolean',
},
width: {
name: 'Width (px)',
type: 'number',
control: 'number',
if: { arg: 'responsive', eq: true },
},
height: {
name: 'Height (px)',
type: 'number',
control: 'number',
if: { arg: 'responsive', eq: true },
},
background: {
name: 'Background',
type: 'string',
control: 'color',
},
theme: {
name: 'Theme',
type: {
name: 'enum',
value: ['light', 'dark'],
required: false,
},
control: 'select',
options: ['light', 'dark'],
},
filter: {
name: 'Filter',
type: 'string',
control: 'object',
},
preFilter: {
name: 'Pre Filter',
type: 'string',
control: 'object',
},
},
args: {
baseUrl: 'https://charts.mongodb.com/charts-charts-fixture-tenant-zdvkh',
chartId: 'd697f81b-12aa-4586-9bfb-4e94fd3dd866',
responsive: true,
width: 800,
height: 400,
background: 'transparent',
theme: 'transparent',
filter: {},
preFilter: {},
},
render(args) {
return renderEmbeddedChart({
baseUrl: args.baseUrl,
chartId: args.chartId,
width: args.width && `${args.width}px`,
height: args.height && `${args.height}px`,
background: args.background,
theme: args.theme,
filter: args.filter,
preFilter: args.preFilter,
});
},
};
exports.columnGrouped = {
name: 'Column > Grouped',
render() {
const container = createContainer();
const chart = new index_1.default({}).createChart({
baseUrl: 'https://charts.mongodb.com/charts-charts-fixture-tenant-zdvkh',
chartId: 'd697f81b-12aa-4586-9bfb-4e94fd3dd866',
});
chart.render(container);
return container;
},
};
exports.gridHeatmap = {
name: 'Grid > Heatmap',
render() {
const container = createContainer();
const chart = new index_1.default({}).createChart({
baseUrl: 'https://charts.mongodb.com/charts-charts-fixture-tenant-zdvkh',
chartId: 'f301b2b6-9ada-4394-adba-87b89abffaff',
});
chart.render(container);
return container;
},
};
exports.textTable = {
name: 'Text > Table',
render() {
const container = createContainer();
const chart = new index_1.default({}).createChart({
baseUrl: 'https://charts.mongodb.com/charts-charts-fixture-tenant-zdvkh',
chartId: '2cb11216-6668-4695-b73a-d9935049c03f',
});
chart.render(container);
return container;
},
};
exports.textWordCloud = {
name: 'Text > Word cloud',
render() {
const container = createContainer();
const chart = new index_1.default({}).createChart({
baseUrl: 'https://charts.mongodb.com/charts-charts-fixture-tenant-zdvkh',
chartId: '67974453-3f30-4622-ad15-54385bdd0bde',
});
chart.render(container);
return container;
},
};
exports.geospatialChoropleth = {
name: 'Geospatial > Choropleth',
render() {
const container = createContainer();
const chart = new index_1.default({}).createChart({
baseUrl: 'https://charts.mongodb.com/charts-charts-fixture-tenant-zdvkh',
chartId: 'c4f31b57-0ded-40c2-a484-58e4b38d2acf',
});
chart.render(container);
return container;
},
};
exports.geospatialScatter = {
name: 'Geospatial > Scatter',
render() {
const container = createContainer();
const chart = new index_1.default({}).createChart({
baseUrl: 'https://charts.mongodb.com/charts-charts-fixture-tenant-zdvkh',
chartId: '3a0be98d-af1b-4e5f-ab85-8638c498ed14',
});
chart.render(container);
return container;
},
};
exports.geospatialHeatmap = {
name: 'Geospatial > Heatmap',
render() {
const container = createContainer();
const chart = new index_1.default({}).createChart({
baseUrl: 'https://charts.mongodb.com/charts-charts-fixture-tenant-zdvkh',
chartId: 'fe6e9910-aa8c-460a-bc9b-0ad582ed07a0',
});
chart.render(container);
return container;
},
};
exports.clickEventSubscriptionAndUnsubscription = {
name: 'Click Event Subscription and Unsubscription',
render() {
const container = createContainer();
const chart = new index_1.default({}).createChart({
baseUrl: 'https://charts.mongodb.com/charts-charts-fixture-tenant-zdvkh',
chartId: 'fe6e9910-aa8c-460a-bc9b-0ad582ed07a0',
});
const eventHandler = (payload) => {
console.log('received event', payload);
document.getElementById('pre').innerHTML = JSON.stringify(payload, null, ' ');
};
chart.render(container).then(() => {
chart.addEventListener('click', eventHandler);
container.append((0, dom_1.createElement)('button', { id: 'unsubscribe' }, 'Remove event listener'));
container.append((0, dom_1.createElement)('div', {}, [
(0, dom_1.createElement)('pre', {
style: { marginLeft: '1rem' },
id: 'pre',
}),
]));
document.getElementById('unsubscribe').addEventListener('click', () => {
chart.removeEventListener('click', eventHandler);
document.getElementById('pre').innerHTML = '';
});
});
return container;
},
};
exports.vegaCharthighlighting = {
name: 'Vega Chart highlighting',
render() {
const container = createContainer();
const FONT_STYLE = { fontWeight: 800, fontSize: '20px' };
const CHARTS = [
{
baseUrl: 'https://charts.mongodb.com/charts-charts-fixture-tenant-zdvkh',
chartId: 'e0a9a6d6-826a-4807-9742-e4761fe44e4e',
},
{
baseUrl: 'https://charts.mongodb.com/charts-charts-fixture-tenant-zdvkh',
chartId: 'fd2e63bd-56ec-4fa9-9137-0eb9494d003b',
},
{
baseUrl: 'https://charts.mongodb.com/charts-charts-fixture-tenant-zdvkh',
chartId: '0b0fd94e-1ed7-42e0-881b-62b057135b19',
},
];
const SDK_CHARTS = CHARTS.map((chart) => new index_1.default({}).createChart(chart));
const highlights = [
{ name: 'No Filter', value: {} },
{ name: 'Apartment only', value: { property_type: 'Apartment' } },
{
name: 'Parramatta & Manly',
value: { 'address.government_area': { $in: ['Parramatta', 'Manly'] } },
},
{
name: 'No Apartments',
value: { property_type: { $nin: ['Apartment'] } },
},
];
const selectElem = (0, dom_1.createElement)('select', { id: 'filter', style: { ...FONT_STYLE } }, highlights.map((h) => (0, dom_1.createElement)('option', { value: bson_1.EJSON.stringify(h.value) }, h.name)));
const appliedFilter = (0, dom_1.createElement)('p', {
style: { ...FONT_STYLE },
});
function onSelectChange() {
const { value } = this;
appliedFilter.innerText = `Applied filter: ${value}`;
SDK_CHARTS.forEach((sdk) => sdk.setHighlight(bson_1.EJSON.parse(value)));
}
selectElem.addEventListener('change', onSelectChange.bind(selectElem));
const flexContainer = (0, dom_1.createElement)('div', {
style: { display: 'flex', height: '80%' },
});
container.append(flexContainer);
// Adding all the charts to the flex container
Promise.all(SDK_CHARTS.map((chart) => {
const elem = (0, dom_1.createElement)('div', { style: { flex: 1 } });
flexContainer.append(elem);
return chart.render(elem).then(() => {
chart.addEventListener('click', (obj) => {
appliedFilter.innerText = `Applied filter: ${bson_1.EJSON.stringify(obj.selectionFilter)}`;
SDK_CHARTS.forEach((sdk) => sdk.setHighlight(obj.selectionFilter));
});
});
}));
// Adding container controls
container.append((0, dom_1.createElement)('label', {
htmlFor: 'filter',
style: { paddingRight: '10px', ...FONT_STYLE },
}, 'Highlight filter'));
container.append(selectElem);
container.append(appliedFilter);
return container;
},
};
exports.tableCharthighlighting = {
name: 'Table Chart highlighting',
render() {
const container = createContainer();
const FONT_STYLE = { fontWeight: 800, fontSize: '20px' };
const CHARTS = [
{
baseUrl: 'https://charts.mongodb.com/charts-charts-fixture-tenant-zdvkh',
chartId: '1b3dd127-647b-4eec-aa02-21942fe9c09c',
},
{
baseUrl: 'https://charts.mongodb.com/charts-charts-fixture-tenant-zdvkh',
chartId: '4b6bf9e2-55b8-45d6-bc3d-4a23c032b24c',
},
];
const SDK_CHARTS = CHARTS.map((chart) => new index_1.default({}).createChart(chart));
const highlights = [
{ name: 'No Filter', value: {} },
{ name: 'Monthly Price < 15k', value: { monthly_price: { $lt: 15000 } } },
{
name: '>= 2018',
value: { last_review: { $gte: { $date: '2018-01-01' } } },
},
];
const selectElem = (0, dom_1.createElement)('select', { id: 'filter', style: { ...FONT_STYLE } }, highlights.map((h) => (0, dom_1.createElement)('option', { value: bson_1.EJSON.stringify(h.value) }, h.name)));
const appliedFilter = (0, dom_1.createElement)('p', {
style: { ...FONT_STYLE },
});
function onSelectChange() {
const { value } = this;
appliedFilter.innerText = `Applied filter: ${value}`;
SDK_CHARTS.forEach((sdk) => sdk.setHighlight(bson_1.EJSON.parse(value)));
}
selectElem.addEventListener('change', onSelectChange.bind(selectElem));
const flexContainer = (0, dom_1.createElement)('div', {
style: { display: 'flex', height: '80%' },
});
container.append(flexContainer);
// Adding all the charts to the flex container
Promise.all(SDK_CHARTS.map((chart) => {
const elem = (0, dom_1.createElement)('div', { style: { flex: 1 } });
flexContainer.append(elem);
return chart.render(elem).then(() => {
chart.addEventListener('click', (obj) => {
appliedFilter.innerText = `Applied filter: ${bson_1.EJSON.stringify(obj.selectionFilter)}`;
SDK_CHARTS.forEach((sdk) => sdk.setHighlight(obj.selectionFilter));
});
});
}));
// Adding container controls
container.append((0, dom_1.createElement)('label', {
htmlFor: 'filter',
style: { paddingRight: '10px', ...FONT_STYLE },
}, 'Highlight filter'));
container.append(selectElem);
container.append(appliedFilter);
return container;
},
};
exports.gettingChartData = {
name: 'Getting Chart Data',
render() {
const container = createContainer();
const chart = new index_1.default({}).createChart({
baseUrl: 'https://localhost/mongodb-charts-fczdl',
chartId: '58ffd626-8201-44cc-ac49-fa5d0cd3b2e3',
});
chart.render(container).then(() => {
container.append((0, dom_1.createElement)('button', { id: 'getData' }, 'Get Data'));
container.append((0, dom_1.createElement)('p', {
style: { marginLeft: '1rem' },
id: 'p',
}));
document.getElementById('getData').addEventListener('click', () => {
chart.getData().then((resultdata) => {
document.getElementById('p').innerHTML = JSON.stringify(resultdata, null, ' ');
});
});
});
return container;
},
};
function renderEmbeddedChart(options) {
const container = createContainer();
const chart = new index_1.default({}).createChart(options);
chart.render(container).then(() => {
container.append((0, dom_1.createElement)('button', { id: 'refresh' }, 'Refresh Chart'), (0, dom_1.createElement)('div', {}, [
(0, dom_1.createElement)('label', { htmlFor: 'refreshInterval' }, 'Refresh Interval'),
(0, dom_1.createElement)('input', {
style: { marginLeft: '1rem' },
id: 'refreshInterval',
type: 'number',
placeholder: 'seconds',
value: `${options.refreshInterval || 0}`,
}),
]), (0, dom_1.createElement)('div', {}, [
(0, dom_1.createElement)('label', { htmlFor: 'autoRefresh' }, 'Auto Refresh'),
(0, dom_1.createElement)('input', {
style: { marginLeft: '1rem' },
id: 'autoRefresh',
type: 'boolean',
placeholder: 'boolean',
value: `${options.autoRefresh || false}`,
}),
]), (0, dom_1.createElement)('div', {}, [
(0, dom_1.createElement)('label', { htmlFor: 'maxDataAge' }, 'Max Data Age'),
(0, dom_1.createElement)('input', {
style: { marginLeft: '1rem' },
id: 'maxDataAge',
type: 'number',
placeholder: 'seconds',
value: `${options.maxDataAge || 0}`,
}),
]), (0, dom_1.createElement)('div', {}, [
(0, dom_1.createElement)('label', { htmlFor: 'filter' }, 'Filter (expects valid JSON)'),
(0, dom_1.createElement)('input', {
style: { marginLeft: '1rem' },
id: 'filter',
type: 'text',
value: '{}',
}),
(0, dom_1.createElement)('button', { id: 'applyFilter' }, 'Apply filter'),
]), (0, dom_1.createElement)('div', {}, [
(0, dom_1.createElement)('label', { htmlFor: 'pre-filter' }, 'Pre-filter (expects valid JSON)'),
(0, dom_1.createElement)('input', {
style: { marginLeft: '1rem' },
id: 'pre-filter',
type: 'text',
value: '{}',
}),
(0, dom_1.createElement)('button', { id: 'applyPreFilter' }, 'Apply Pre-filter'),
]), (0, dom_1.createElement)('div', {}, [
(0, dom_1.createElement)('label', { htmlFor: 'theme' }, 'Theme (expects light|dark)'),
(0, dom_1.createElement)('input', {
style: { marginLeft: '1rem' },
id: 'theme',
type: 'text',
value: '',
}),
(0, dom_1.createElement)('button', { id: 'applyTheme' }, 'Apply theme'),
]));
document.getElementById('refresh').addEventListener('click', () => {
chart.refresh();
});
document
.getElementById('refreshInterval')
.addEventListener('input', async (e) => {
const target = e.target;
const value = parseInt(target.value);
await chart.setRefreshInterval(value);
target.value = (await chart.getRefreshInterval());
});
document
.getElementById('autoRefresh')
.addEventListener('input', async (e) => {
const target = e.target;
await chart.setAutoRefresh(target.value === 'true');
target.value = (await chart.isAutoRefresh());
});
document
.getElementById('maxDataAge')
.addEventListener('input', async (e) => {
const target = e.target;
const value = parseInt(target.value);
await chart.setMaxDataAge(value);
target.value = (await chart.getMaxDataAge());
});
document
.getElementById('applyFilter')
.addEventListener('click', async () => {
const filterItem = document.getElementById('filter');
await chart.setFilter(bson_1.EJSON.parse(filterItem.value));
const appliedFilter = await chart.getFilter();
filterItem.value = bson_1.EJSON.stringify(appliedFilter);
});
document
.getElementById('applyPreFilter')
.addEventListener('click', async () => {
const filterItem = document.getElementById('pre-filter');
await chart.setPreFilter(bson_1.EJSON.parse(filterItem.value));
const appliedFilter = await chart.getPreFilter();
filterItem.value = bson_1.EJSON.stringify(appliedFilter);
});
document
.getElementById('applyTheme')
.addEventListener('click', async () => {
const themeItem = document.getElementById('theme');
await chart.setTheme(themeItem.value.trim());
themeItem.value = (await chart.getTheme());
});
// Make chart object available on the window
Object.assign(window, { chart });
});
return container;
}
function createContainer() {
return (0, dom_1.createElement)('div', {
style: { height: 'calc(100vh - 96px)', padding: '40px' },
});
}