How to filter in Yandex map by diagrams?

Question

JavaScript

Good afternoon, do not tell me how to remake the filtering of elements on the map by diagrams, and not by points. I changed the filtering example described in the documentation , instead of dots, make charts https://jsfiddle.net/kurhinsan/1nre34fx/. But in this case, the filtering stops working, can you tell me how to make it work?

Answer 1

ymaps.ready(init);

const items = [
    new ymaps.Placemark(
          [55.34954, 37.721587],
          {
            data: [{
                weight: 1,
                color: 'red'
              },
              {
                weight: 1,
                color: 'green'
              },
              {
                weight: 1,
                color: 'yellow'
              }
            ]
          }, 
          {
            preset: "islands#yellowIcon",
            iconLayout: 'default#pieChart',
            iconPieChartRadius: 25,
            iconPieChartCoreRadius: 10,
            iconPieChartCoreFillStyle: '#ffffff',
            iconPieChartStrokeStyle: '#ffffff',
            iconPieChartStrokeWidth: 3,
            iconPieChartCaptionMaxWidth: 200
          }),

    new ymaps.Placemark(
          [55.24954, 37.5], 
          {
            data: [{
                weight: 1,
                color: 'red'
              },
              {
                weight: 1,
                color: 'green'
              },
            ]
          },
          {
            preset: "islands#redIcon",
            iconLayout: 'default#pieChart',
            iconPieChartRadius: 25,
            iconPieChartCoreRadius: 10,
            iconPieChartCoreFillStyle: '#ffffff',
            iconPieChartStrokeStyle: '#ffffff',
            iconPieChartStrokeWidth: 3,
            iconPieChartCaptionMaxWidth: 200
          })  
];

function init() {
  var myMap = new ymaps.Map('map', {
    center: [55.30954, 37.721587],
    zoom: 8
  }, {
    searchControlProvider: 'yandex#search'
  });

  

  // Функция, которая по состоянию чекбоксов в меню
  // показывает или скрывает геообъекты из выборки.
  function checkState() {
    let itemsFilter = [];
    
    // добавляем item в если в массиве item нет
    const addItemsFilter = item =>{
    	const index = itemsFilter.indexOf(item);
        index === -1 && itemsFilter.push(item);
    };
    
    // фильтр по цвету - если хотя-бы один цвет есть в диаграмме 
    const filter = color => items.filter(item=>{
    	const props = item.properties.getAll();
    	return props.data.some(d => d.color === color);
    })

    // Отберем объекты по цвету. 
    
    if ($('#red').prop('checked')) {
      itemsFilter =  itemsFilter.concat(filter('red'));
    }
    if ($('#green').prop('checked')) {
       itemsFilter = itemsFilter.concat(filter('green'));
    }
    if ($('#yellow').prop('checked')) {
    	itemsFilter = itemsFilter.concat(filter('yellow'));
    } 
    myMap.geoObjects.removeAll();
    itemsFilter.forEach(item=> myMap.geoObjects.add(item));
  }

  $('#red').click(checkState);
  $('#green').click(checkState);
  $('#yellow').click(checkState);

  
  items.forEach(item=> myMap.geoObjects.add(item));
}