{
const { qdtCompose, QdtSelections, QdtPicasso, useTreemapSettings } = QdtComponents;
// https://www.color-hex.com/color-palettes/
const settings = useTreemapSettings({
properties: {
scales: {
c: {
data: { extract: { field: 'qDimensionInfo/0' } },
range: ['#ce4242', '#35ae4c', '#4b6eba', '#d8ca37', '#8e419e'],
},
},
},
});
// Overwrite the coloring from the 2nd measure
settings.collections[0].data.hierarchy.props.color = {field: "qDimensionInfo/0"};
qdtCompose({
element: selectionsToolbarElement,
component: QdtSelections,
app,
options: {},
properties: {
qSelectionObjectDef: {},
}
});
qdtCompose({
element: chartElement,
component: QdtPicasso,
app,
options: {
settings,
height: 400,
},
properties: {
qHyperCubeDef: {
qDimensions: [
{ qDef: { qFieldDefs: ['Case Owner Group'] }, qNullSuppression: true },
{ qDef: { qFieldDefs: ['Priority'] }, qNullSuppression: true },
],
qMeasures: [
{ qDef: { qDef: 'Count(Distinct {$<[Case Is Closed] ={\'False\'} >} [%CaseId])' } },
],
},
},
});
}
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.
