JSFiddle - React, Tailwind, and code Playground
JavaScript
var clusterIconContentLayout = ymaps.templateLayoutFactory.createClass(
'$[properties.geoObjects.length][if properties.viewedNumbers]'+
'/$[properties.viewedNumbers][endif]'
);
var MainContentLayout = ymaps.templateLayoutFactory.createClass('', {
build: function () {
MainContentLayout.superclass.build.call(this);
this.stateListener = this.getData().state.events.group()
.add('change', this.onStateChange, this);
},
onStateChange: function () {
var newActiveObject = this.getData().state.get('activeObject');
var viewed = this.activeObject.properties.get('viewed');
if (!viewed) {
newActiveObject.properties.set('viewed', true);
var currentCluster = this.getData().cluster;
var id = newActiveObject.properties.get('id');
var viewedNumbers = currentCluster.properties.get('viewedNumbers');
currentCluster.properties.set('viewedNumbers', viewedNumbers+1);
}
if (newActiveObject != this.activeObject) {
this.activeObject = newActiveObject;
this.applyContent();
}
},
applyContent: function () {
if (this.activeObjectLayout) {
this.activeObjectLayout.setParentElement(null);
}
this.activeObjectLayout = new MainContentSubLayout({
options: this.options,
properties: this.activeObject.properties
});
this.activeObjectLayout.setParentElement(this.getParentElement());
}
});
var MainContentSubLayout = ymaps.templateLayoutFactory.createClass(...);
var ItemLayout = ymaps.templateLayoutFactory.createClass(...);
var myClusterer = new CountViewedClusterer({ ... /* CountViewedClusterer - переделанный PieChartClusterer из примеров dimik*/
clusterBalloonMainContentLayout: MainContentLayout,
clusterBalloonSidebarItemLayout: ItemLayout,
clusterIconContentLayout: clusterIconContentLayout,
...