Published
Edited
Mar 21, 2022
Importers
flowQueryBuilder = async function (config) {
// Inject component styles if not already injected
const styleUrl = `https://cdn.skypack.dev/@emuanalytics/flow-vue-query-builder@${queryBuilderVersion}/dist/flow-vue-query-builder.css`;
let styleLink = document
.getElementsByTagName("head")[0]
.querySelector(`link[href='${styleUrl}']`);
if (!styleLink) {
console.log("Injecting styles");
// Inject CSS
styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href = `https://cdn.skypack.dev/@emuanalytics/flow-vue-query-builder@${queryBuilderVersion}/dist/flow-vue-query-builder.css`;
document.getElementsByTagName("head")[0].appendChild(styleLink);
}
let builderConfig = { fields: {}, applyButton: config.applyButton ?? true };
// Auto-configure fields from dataset
if (config.datasetId) {
if (!config.context) {
throw new Error(
"context must be specified to auto-configure using datasetId"
);
}
const dataset = await config.context.flowClient.datasets.get(
config.datasetId
);
builderConfig.fields = dataset.attributes
.filter((a) => !a.isGeometry)
.reduce((accum, attr) => {
accum[attr.attribute] = { name: attr.attribute, type: attr.type };
return accum;
}, {});
}
// Add manual overrides/extra fields
if (config.fields) {
builderConfig.fields = deepMerge(builderConfig.fields, config.fields);
}
console.log(builderConfig.fields);
const queryBuilder = new Vue({
el: html`<flow-query-builder :style="styles" :config="config" :query="query" @apply="apply" @change="queryChanged" />`,
data: {
config: builderConfig,
query: config.query ?? {},
styles: { "max-width": config.maxWidth ?? "100%" }
},
methods: {
apply: function (query) {
console.log("query", query);
queryBuilder.$el.value = JSON.parse(JSON.stringify(query));
queryBuilder.$el.dispatchEvent(new Event("input", { bubbles: true }));
},
queryChanged: function (query) {
if (this.config.applyButton === false) {
this.apply(query);
}
}
}
});
queryBuilder.$el.value = config.query;
queryBuilder.$el.vueInstance = queryBuilder;
return queryBuilder.$el;
}
deepMerge = require("https://bundle.run/deepmerge@4.2.2")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
