Drag and drop tags from tree view to power chart in perspective

Ignition
1

Hi,

can any guide me how to drag and drop tags from a tree view to power chart in perspective
@victordcq do you have any idea?

2

Doesnt the power chart already have a tag browser with drag and drop?

3

yes but doesn't provide any tag filter options. for example if i want to hide few tags that's is not possible.

so i have created a tree view that will do this trick

4

I have tired this script. but its not working

treeViewId = "myTreeView"
powerChartId = "myPowerChart"

# Custom property to store the dragged and dropped information
customProperty = "dragAndDropData"

# JavaScript code for drag-and-drop functionality
code = """
<script>
  document.addEventListener('DOMContentLoaded', function() {{
    const treeView = document.getElementById('{treeViewId}');
    const powerChart = document.getElementById('{powerChartId}');
    
    // Prevent default behavior to allow drop
    treeView.addEventListener('dragover', function(event) {{
      event.preventDefault();
    }});
    
    // Handle the drag start event in the tree view
    treeView.addEventListener('dragstart', function(event) {{
      const draggedId = event.target.getAttribute('data-item-path');
      event.dataTransfer.setData('text/plain', draggedId);
    }});
    
    // Handle the drop event in the power chart
    powerChart.addEventListener('drop', function(event) {{
      event.preventDefault();
      const droppedId = event.dataTransfer.getData('text/plain');
      
      // Add your logic to handle the dropped tag in the power chart
      console.log('Dropped tag:', droppedId);
      
      // Store the drag-and-drop data in the view's custom property
      const view = document.page.props.view;
      view.custom.write('{customProperty}', {{
        'draggedId': droppedId,
        'droppedId': droppedId
      }});
    }});
  }});
</script>
"""


return code

I dont know how to receive the drop tag in the power chart

5

You can define the root path for the tags, so only tags below it can be selected. Wouldn't it be easier to move the (dis)allowed tags somewhere else?

Are you familiar with js?

You also seem to be trying to target the main components, but for your tree view you'll need to target every row

Take a look at this one, hre i d&d a table its rows onto a scheduler with its addevent,
i guess it should be similar

6

no i am not much familiar with js

ok i will take look in to it

7

Then it will be quite difficult.

i see the chart has no add event so thats not gonna be the way to go

8

Here you go, these events should get you started.

You can use the view.custom prop to generate a pen for the chart

this is for label
dragtreetochart.zip (27.9 KB)

if you want the "tree array path" instead
dragtreepath.zip (21.2 KB)

1 Like
9

Its working thanks.

one question when i drag and drop its fetching the blue color and lines from the tree view

Is it possible to remove.?

only show the path or show only listener arrow that's enough

image
image849×414 14.2 KB

10

yes, but not really xD

d&d works by grapping a screenshot img of the element, so you cant apply css on it.
But in the dragstart you can use setDragImage(); to set a different image.
However to set text, you would first have to generate a real element on the page, which is quite a pain in perspective.

1 Like