Power BI - Deneb/Vega 6.2.0: Filtering by Day Signal Causes Marks to Disappear
Hi everyone, I am building a real-time schedule visual in Vega. I have a working visual that shows all data, but it breaks when I try to filter for the current day. Data from provided from Power Bi to deneb: - DST_ClockDiffBtwLocationAndLocalOffset:This is a measure. TimeZone Difference. provides the offset of this difference. - From my Power BI table: - ScheduleType - day_num - type -startTime -endTime I have a query named AllSegments that creates a clean, flat table Each day, for each scheduleType, we can have multiple rows. For example: Scheduletype day_num type start_time end_time startTime endTime Production 0 No Production 00:00:00 22:00:00 0 22 Production 0 Normal 22:00:00 23:59:00 22 23.9833333 Production 1 Normal 00:00:00 23:59:00 0 23:9833333 ... SiteOpening 0 No Production 00:00:00 23:59:00 0 23.9833333 SiteOpening 1 Normal 08:30:00 12:30:00 8.5 12.5 SiteOpening 1 Normal 13:30 17:00:00 13.5 17 ... Support 0 No Production 00:00:00 23:59:00 0 23.9833333 Support 1 Normal 08:30:00 12:30:00 8.5 12.5 Support 1 Flexible 13:30:00 17:00:00 13.5 17 The goal is one graph with a 24 hours My working code: { "$schema": "https://vega.github.io/schema/vega/v5.json", "description": "A static visual for Monday with a dynamic real-time clock.", "background": "transparent", "width": 360, "height": 80, "autosize": {"type": "fit", "contains": "padding"}, "signals": [ { "name": "timer", "update": "now()", "on": [{"events": {"type": "timer", "throttle": 1000}, "update": "now()"}] }, { "name": "adjustedTime", "update": "length(data('source')) > 0 ? utcOffset('seconds', timer, data('source')[0].DST_ClockDiffBtwLocationAndLocalOffset) : now()" }, { "name": "currentTime", "update": "hours(adjustedTime) + minutes(adjustedTime) / 60" }, { "name": "adjustedDate", "update": "timeFormat(adjustedTime, '%Y-%m-%d')" } ], "data": [ { "name": "source" }, { "name": "dataset", "source": "source", "transform": [ { "type": "filter", "expr": "datum.ScheduleType == 'SiteOpening' && datum.type != 'No Production' && +datum.day_num == 1" } ] } ], "scales": [ { "name": "xscale", "type": "linear", "domain": [0, 24], "range": "width" } ], "axes": [ { "orient": "bottom", "scale": "xscale", "title": {"signal": "adjustedDate"}, "tickCount": 24, "labelFontSize": 8, "offset": 5 } ], "marks": [ { "type": "rect", "from": {"data": "dataset"}, "encode": { "enter": { "x": {"scale": "xscale", "field": "startTime"}, "x2": {"scale": "xscale", "field": "endTime"}, "y": {"value": 20}, "height": {"value": 30}, "fill": {"value": "lightgray"} } } }, { "type": "rule", "from": {"data": "dataset"}, "encode": { "enter": { "x": {"scale": "xscale", "field": "startTime"}, "y": {"value": 15}, "y2": {"value": 55}, "stroke": {"value": "black"}, "strokeWidth": {"value": 1} } } }, { "type": "symbol", "from": {"data": "dataset"}, "encode": { "enter": { "x": {"scale": "xscale", "field": "startTime"}, "y": {"value": 15}, "shape": {"value": "triangle-down"}, "size": {"value": 40}, "fill": {"value": "black"} } } }, { "type": "symbol", "from": {"data": "dataset"}, "encode": { "enter": { "x": {"scale": "xscale", "field": "endTime"}, "y": {"value": 55}, "shape": {"value": "triangle-up"}, "size": {"value": 40}, "fill": {"value": "black"} } } }, { "type": "rule", "encode": { "update": { "x": {"scale": "xscale", "signal": "currentTime"}, "y": {"value": 10}, "y2": {"value": 60}, "stroke": {"value": "red"}, "strokeWidth": {"value": 2} } } }, { "type": "text", "encode": { "update": { "x": {"scale": "xscale", "signal": "currentTime"}, "y": {"value": 5}, "text": {"signal": "timeFormat(adjustedTime, '%H:%M')"}, "align": {"value": "center"}, "fill": {"value": "red"}, "fontSize": {"value": 10} } } } ] } Now, I want to filter these bars to show only the ones for the current day. I added a signals block for the current time and a filter to my data transform ... Code doesn't work: { "$schema": "https://vega.github.io/schema/vega/v5.json", "description": "A dynamic, real-time visual for Site Opening Hours.", "background": "transparent", "width": 360, "height": 80, "autosize": {"type": "fit", "contains": "padding"}, "signals": [ { "name": "timer", "update": "now()", "on": [{"events": {"type": "timer", "throttle": 1000}, "update": "now()"}] }, { "name": "adjustedTime", "update": "length(data('source')) > 0 ? utcOffset('seconds', timer, data('source')[0].DST_ClockDiffBtwLocationAndLocalOffset) : now()" }, { "name": "currentTime", "update": "hours(adjustedTime) + minutes(adjustedTime) / 60" }, { "name": "adjustedDate", "update": "timeFormat(adjustedTime, '%Y-%m-%d')" }, { "name": "currentDayNum", "update": "day(adjustedTime)" } ], "data": [ { "name": "source" }, { "name": "opening_hours_today", "source": "source", "transform": [ { "type": "filter", "expr": "datum.ScheduleType == 'SiteOpening' && datum.type != 'No Production' && +datum.day_num == currentDayNum" } ] } ], "scales": [ { "name": "xscale", "type": "linear", "domain": [0, 24], "range": "width" } ], "axes": [ { "orient": "bottom", "scale": "xscale", "title": {"signal": "adjustedDate"}, "tickCount": 24, "labelFontSize": 8, "offset": 5 } ], "marks": [ { "type": "rect", "from": {"data": "opening_hours_today"}, "encode": { "enter": { "x": {"scale": "xscale", "field": "startTime"}, "x2": {"scale": "xscale", "field": "endTime"}, "y": {"value": 20}, "height": {"value": 30}, "fill": {"value": "lightgray"} } } }, { "type": "rule", "from": {"data": "opening_hours_today"}, "encode": { "enter": { "x": {"scale": "xscale", "field": "startTime"}, "y": {"value": 15}, "y2": {"value": 55}, "stroke": {"value": "black"}, "strokeWidth": {"value": 1} } } }, { "type": "symbol", "from": {"data": "opening_hours_today"}, "encode": { "enter": { "x": {"scale": "xscale", "field": "startTime"}, "y": {"value": 15}, "shape": {"value": "triangle-down"}, "size": {"value": 40}, "fill": {"value": "black"} } } }, { "type": "symbol", "from": {"data": "opening_hours_today"}, "encode": { "enter": { "x": {"scale": "xscale", "field": "endTime"}, "y": {"value": 55}, "shape": {"value": "triangle-up"}, "size": {"value": 40}, "fill": {"value": "black"} } } }, { "type": "rule", "encode": { "update": { "x": {"scale": "xscale", "signal": "currentTime"}, "y": {"value": 10}, "y2": {"value": 60}, "stroke": {"value": "red"}, "strokeWidth": {"value": 2} } } }, { "type": "text", "encode": { "update": { "x": {"scale": "xscale", "signal": "currentTime"}, "y": {"value": 5}, "text": {"signal": "timeFormat(adjustedTime, '%H:%M')"}, "align": {"value": "center"}, "fill": {"value": "red"}, "fontSize": {"value": 10} } } } ] } the final goal is: - real time current clock (red bar + current hour text) - real time current day. if it is a production day, a blue rect align on the 24 hours, if it is Flexible period, a dark blue rect. if No prod, a gray rect - A second bar to provide info about when the location can have a support - a legend with the different info Thanks a lot for the support you will accept to provideDeneb Sorting Issue when "Datum" is included
Hi Team, I'm using deneb to build my visual using below code, So my target is, I will have sum of price which i will be showing on one layer and sum of profit (Target) showing as as another bar in another layer, however my MonthYear sorting is working correctly untill I add the Datum bar(Target), but as soon as i add it the sort order getting disturbed. I want my targte bar to be at last. PFA screen shots, with Target bar and without target bar. I have tried all the ways including entering manula sorting in the code itself, but still no result. { "data": { "name": "dataset" }, "layer": [ { "mark": { "type": "bar", "tooltip": true } , "encoding": { "x": { "field": "MonthYear", "sort": { "field": "SortOrd", "order": "descending" }, "type": "nominal" }, "y": { "field": "Sum of Price", "type": "quantitative" } } }, { "mark": { "type": "bar", "tooltip": true }, "encoding": { "x": { "datum": "Target", "type": "nominal" }, "y": { "field": "Sum of Profit", "type": "quantitative" } } } ] } Any help is highly apprciated. Thanks.
Bugs in my customized version of a popular gantt chart
Hello Community, I’ve been working on developing a Gantt chart using Madison Giammaria’s giammariam template. It is great already but I had to develop some other custom features so I’ve successfully implemented several functionalities—partly using my own knowledge and partly with AI assistance. However, I’ve now hit a roadblock with three bugs that are preventing the visual from functioning as intended. I’d love any help in resolving them—fixing just one would be a great step forward, but solving all three would be a huge relief! 😊 Bug 1: Expanding/Collapsing Tasks in Bulk I wanted to create a custom bulk expand/collapse button to toggle all tasks at once. However, unlike the original template, if I expand all tasks and then try to collapse just one, it collapses all of them instead of only the selected one. I suspect the issue lies in the hierarchy_initial transformations (lines 2224–2238) in my Vega code, but I haven’t been able to get it working as intended. Bug 2: Horizontal Scrolling, Zooming, and Task Visibility Issues I had to tweak the template to properly display the Today line, as I couldn’t get it working from the original setup. However, my implementation may have introduced unexpected issues. Problem 1: Tasks Not Visible in Default View For example, in the image below, Task 95 (starting on March 19, 2023) should be partially visible, but it isn’t. If I scroll horizontally or zoom out slightly, it suddenly appears. Expanding the task doesn’t reveal the subtasks either. I suspect the issue is related to how the x-axis range is set before and after the min/max task dates. I attempted to configure default views for different task lengths using the configDateStepSizePercentInitial signal (lines 25–28), but that didn’t resolve it. Problem 2: Missing Tasks on Horizontal Scroll If I scroll left (Shift + Mouse Wheel), I expect to see tasks from 2022, but they don’t appear even though they should. This is my biggest issue—if anyone has insights on what might be causing this, I’d be incredibly grateful! Bug 3: Bottom Tasks Not Expandable This issue also exists in the original template: If the last task in the visual reaches the bottom of the canvas, the task is not clickable, preventing expansion. The only workaround is to collapse some other tasks first, but that negatively affects the user experience. I’d really appreciate any advice, guidance, or fixes for these issues. Even just pointing me in the right direction would be incredibly helpful. Sample file: https://www.dropbox.com/scl/fi/dcrciewmls9dj3fqpc4m8/sample_data_tasks.pbix?rlkey=65tjgo587u9991jaj7t4j2y3s&st=r5j7jh0n&dl=0 Thanks in advance, and have a great day! Petr
Deneb: only hardcoded data works?
Hello all, I'm trying to get some Deneb visualization going. However, even when I dumb it down to the simplest example, Deneb refuses to show me anything. For example, here I made the simplest Test data and I just want Deneb to show it. But no matter what I do, it just doesn't show it. Meanwhile hardcoded data does show: How should I proceed?Issue with rendering Deneb/HTML Visuals in Chrome
Hello, Since couple of weeks I have a problem with Deneb & HTML Content visuals not rendering correctly in Power BI Services, in Chrome browser, in my company's tenant. On pages with multiple visuals, some of the visuals are not loading at all, leaving empty space and no error messages on the frontend. After refreshing the page some visuals may appear and others disappear, although for each page there's always one visual which seems to be loading at all times in all tests. Visuals failing to load seem to be throwing the following error in Chrome console: What I've been able to establish: other employees have the same issue with displaying my published report, also when they publish my reports themselves visuals are working properly on Edge and Firefox, no errors thrown for HTML Content, same SVG code used in new cards works properly doesn't matter if I publish from PBI Desktop or upload through PBI Service doesn't matter if published from .pbix or .pbip Setup: Power BI Desktop 2.138.1452.0 (November 2024), but issue was the same with August version Deneb 1.7.2.1, certified version from AppSource Chrome 131.0.6778.205 I'd be grateful for solution or some hints where to look for more details on the issue. Thank you!
No scroll capability in Deneb Gantt visualztion
Greetings. Have a use case for a Gantt like visualization. Landed on the Gantt rendering in the Deneb visual provided by David on his Github repoistory for Showcase Samples. Great documentation, easy to configure and get something stood up. I'm being stumped though on how to get the scroll bars to display on the visual. I've gone into the Format editor and enabled the scroll bars to be visible when editing. I can see them inside the editor. However, when I render the visual there's nothing there. Below is a screenshot of the settings. I went throgh the Vega documentation searching on the keywork "Scroll" without any luck. Any ideas on what is probably a simple thing I am missing? TIA. dm-p
Deneb grid
I want to create a grid that should display images in base64 format from my table. The idea is that the spaces (and therefore the images) should grow as I filter the data, always filling the canvas with images (so if I select just one image, the canvas is basically one image. If I filter by a group of 100 images, the code should split the canvas evenly across 100 cells). Currently I have a grid where I can display images. If I don't filter, it looks fine, but not all images are displayed. (see 1. screenshot) If I filter for a group with many images, it works, the size of the images grows and there are fewer cells, but it seems to keep the space of the filtered out image. (see 2. screenshot) When I filter for a group with only a few images, it stops working and I get a blank canvas again. I can't figure out what the problem is, as it works to some extent, but not completely. I would appreciate any help or ideas. Here is my Vega code: { "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 1100, "height": 600, "data": [ { "name": "dataset", "format": {"type": "json"}, "url": "data:dataset" // Load filtered data from Power BI } ], "signals": [ { "name": "filteredDatasetLength", "update": "data('dataset').length" // Track the length of the filtered dataset }, { "name": "gridSize", "update": "filteredDatasetLength > 0 ? ceil(sqrt(filteredDatasetLength)) : 0" // Grid size adjusts based on available data }, { "name": "cellSize", "update": "filteredDatasetLength > 0 ? ceil((width - 20) / gridSize) : 0" // Dynamic cell size based on grid size } ], "marks": [ { "type": "image", "from": {"data": "dataset"}, "encode": { "enter": { "url": {"field": "Base64:"}, // Use the Base64 column for images "x": { "signal": "cellSize * (datum.Index % gridSize) + 10" // Dynamic calculation of X position based on index and grid size }, "y": { "signal": "cellSize * floor(datum.Index / gridSize) + 10" // Dynamic calculation of Y position based on index and grid size }, "width": {"signal": "cellSize - 5"}, // Image width adjusted to fit in grid "height": {"signal": "cellSize - 5"} // Image height adjusted to fit in grid } } } ] }
advanced cross filtering with deneb and vega - brushed area disappearing when doing cross filter
My report has a deneb vega line chart and a table. I want to filter the table by brushing the chart and then clicking on the brushed area. The idea is to only apply cross filtering when required. PBIX file The filter works partially: (1) brushing on the area works as expected: (2) Then clicking on the brushed area filters the table: However the brushed area disappears. I'd like to keep the brushed area after the click. I've tried different debounce, throttle and consume values for the event - not sure what is causing the brushed area to disappear. { "data": [ { "name": "dataset" } ], "width": 200, "height": 200, "signals": [ { "name": "colour", "value": "blue" }, // brush { "name": "brush", "value": 0, "on": [ { "events": "@main:pointerdown", "update": "[x(), x()]" }, { "events": "[@main:pointerdown, window:pointerup] > window:pointermove!", "update": "[brush[0], clamp(round(x()-brush[0])+brush[0], 0, width)]" }, { "events": { "signal": "delta" }, "update": "clampRange([anchor[0] + delta, anchor[1] + delta], 0, width)" } ] }, // anchor { "name": "anchor", "value": null, "on": [ { "events": "@brush:pointerdown", "update": "slice(brush)" } ] }, // xdown { "name": "xdown", "value": 0, "on": [ { "events": "@brush:pointerdown", "update": "x()" } ] }, // delta { "name": "delta", "value": 0, "on": [ { "events": "[@brush:pointerdown, window:pointerup] > window:pointermove!", "update": "x() - xdown" } ] }, // main_brush { "name": "main_brush", // "push": "outer", "on": [ { "events": { "signal": "brush" }, "update": "span(brush) ? invert('x_scale', brush) : null" } ] }, // cross filter start ------------------------------------------ { "name": "pbiCrossFilterSelection", "value": [], "on": [ // when mark is brushed apply cross filter { "events": { "markname": "brush", "type": "click", "consume": true, "debounce": 100, "throttle": 100 }, "update": "pbiCrossFilterApply(event, \"datum['x'] >= main_brush[0] & datum['x'] <= main_brush[1]\" )" } ] } // cross filter end ------------------------------------------ ], "scales": [ { "name": "x_scale", "range": "width", "padding": 10, "domain": { "data": "dataset", "field": "x" } }, { "name": "y_scale", "range": "height", "padding": 10, "domain": { "data": "dataset", "field": "y" } } ], "axes": [ { "orient": "bottom", "scale": "x_scale" }, { "orient": "left", "scale": "y_scale" } ], "marks": [ { "name": "main", "type": "group", "encode": { "enter": { "x": { "value": 0 }, "y": { "value": 0 }, "height": { "value": 200 }, "width": { "value": 200 }, "fill": { "value": "transparent" } } }, "marks": [ // main line chart { "name": "main_line", "type": "line", "from": { "data": "dataset" }, "encode": { "enter": { "x": { "scale": "x_scale", "field": "x" }, "y": { "scale": "y_scale", "field": "y" } }, "update": { "stroke": { "signal": "colour" } } } }, // brush area mark { "type": "rect", "name": "brush", "encode": { "enter": { "y": { "value": 0 }, "height": { "value": 200 }, "fill": { "value": "#333" }, "fillOpacity": { "value": 0.2 } }, "update": { "x": { "signal": "brush[0]" }, "x2": { "signal": "brush[1]" } } } } ] } ] }Deneb data label help
I haven't been able to clear a hurdle with the labels on a Deneb bar chart. By default, as you can see in the GIF, the labels are on. I want the labels to be off by default. I only want to see a label when the user clicks on a row in the table. I'm unable to share a workbook due to restrictive workplace security measures. I will paste in some dummy data and my spec below: { "data": {"name": "dataset"}, "layer": [ { "mark": { "type": "bar", "opacity": 0.3, "tooltip": true }, "encoding": { "x": { "field": "ModelKey", "type": "nominal", "sort": { "field": "Min of MAPEVl", "order": "ascending" } }, "y": { "field": "Min of MAPEVl", "type": "quantitative" }, "color": {"value": "lightgrey"} } }, { "mark": { "type": "bar", "tooltip": true }, "encoding": { "x": { "field": "ModelKey", "type": "nominal", "sort": { "field": "Min of MAPEVl", "order": "ascending" } }, "y": { "field": "Min of MAPEVl__highlight", "type": "quantitative" }, "color": { "condition": { "test": "datum['Min of MAPEVl__highlight'] !== null", "value": "steelblue" }, "value": "lightgrey" } } }, { "mark": { "type": "text", "align": "center", "baseline": "bottom", "dy": -5 }, "encoding": { "x": { "field": "ModelKey", "type": "nominal", "sort": { "field": "Min of MAPEVl", "order": "ascending" } }, "y": { "field": "Min of MAPEVl__highlight", "type": "quantitative" }, "text": { "field": "Min of MAPEVl__highlight", "type": "quantitative", "format": ".2f" }, "color": {"value": "black"}, "opacity": { "condition": { "test": "datum['Min of MAPEVl__highlight'] !== null", "value": 1 }, "value": 0 } } } ], "encoding": { "x": { "field": "ModelKey", "type": "nominal", "sort": { "field": "Min of MAPEVl", "order": "ascending" }, "axis": null }, "y": { "type": "quantitative", "axis": { "title": null, "grid": false } } } } ModelKey MAPEVl 362609410_61 5.08 362619010_61 3.99 362706010_61 5.09 362715610_61 5.04 362968800_61 4.47 362978400_61 4.92 362978410_61 5.04 363134910_61 4.83 363242600_61 8.28 363289400_61 7.13 363664400_61 4.94 363854000_61 3.85 363961500_61 5.71 363961510_61 5.79 364201100_61 5.78 364344500_61 5.23 364380810_61 5.49 364404000_61 4.92 364622800_61 5.12 Anyone have a solution to share? giammariam , maybe? Thanks.
