UNPKG

@mongodb-js/charts-embed-dom

Version:

JavaScript library for embedding MongoDB Charts

477 lines (476 loc) 19.2 kB
"use strict"; 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' }, }); }