What is the best solution to implement this?-CodePudding

I'm quite new on extjs but i am facing a problem because i don't really know what is the best option to implement the following:

I have a panel that contains on the left a grid with a store structured like this:

store: {
  fields: ['id', 'name', 'attr1', 'attr2'],
  data: [{ id: 'id_a', name:'object A', attr1: '1', attr2: '3' },
         { id: 'id_b', name:'object B', attr1: '3', attr2: '3' },
         { id: 'id_c', name:'object C', attr1: '4', attr2: '4' },
         { id: 'id_d', name:'object D', attr1: '2', attr2: '5' },
         { id: 'id_e', name:'object E', attr1: '1', attr2: '3' }]
}

Each of my attributes 'attr1' and 'attr2' have their own values domain:

"attr1": { 
  "1": "Value 1_1",
  "2": "Value 1_2",
  "3": "Value 1_3",
  "4": "Value 1_4",
  "5": "Value 1_5"
},
"attr2": {
  "1": "Value 2_1",
  "2": "Value 2_2",
  "3": "Value 2_3",
  "4": "Value 2_4",
  "5": "Value 2_5"}
}

I must create on the right of the grid a component that looks like this: component design

This new component can be filled using drag and drop from the grid or between the cells of the component it self. Each axis represents the attributes values domain and in the cells i can drop the objects from my grid. Each cell can have a dedicated brackground color. Actually i started using the heatmap from the d3 library but i don't think it is the best option. Perhaps someone can advise me a component to be used or way.

My problem is just to know, regarding all the requirements i exposed, which solution would be the more adapted to my case:

Using the d3 heatmap component embedded in extjs 7.6
Using directly d3 in extjs without using the d3 component emebedded in extjs 7.6
Using an extjs grid to make it looks like my component
Using perhaps extjs panels
Using just html divs
...

Thanks!

CodePudding user response：

Thank you @Arthur for your guidance. Your proposed component fulfills all my requirements and i could implement all the required features.