Notes

<div className="expanded-label">
<button
className={`view-select-button ${chartType === 'bar' ? 'active' : ''}`}
disabled={isEmpty(bar)}
onClick={() => {
this.context.containerCountsSummary.updateValue({key: 'chartType', value: 'bar'});
}}
>
<div className={`label ${chartType === 'bar' ? 'active' : ''}`}>
{/*<span className="apple-icons ac-icon-list" />*/}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.644 91.304"><path d="M10.106 91.304H24.666C31.392 91.304 34.826 88.014 34.826 81.621V38.081C34.825 31.688 31.39 28.451 24.667 28.451H10.107C3.444 28.45 0 31.687 0 38.08V81.621C0 88.014 3.445 91.304 10.106 91.304Z" fill="#007AFF" data-var="1" fill-opacity="undefined"></path><path d="M54.037 91.304H68.607C75.322 91.304 78.767 88.014 78.767 81.621V23.92C78.766 17.515 75.32 14.277 68.608 14.277H54.037C47.375 14.277 43.879 17.515 43.879 23.92V81.621C43.879 88.014 47.375 91.304 54.037 91.304Z" fill="#007AFF" data-var="34" fill-opacity="undefined"></path><path d="M97.926 91.304H112.486C119.199 91.304 122.644 88.014 122.644 81.621V9.641C122.644 3.239 119.199 0 112.486 0H97.926C91.254 0 87.819 3.238 87.819 9.642V81.622C87.819 88.013 91.254 91.303 97.926 91.303Z" fill="#007AFF" data-var="68" fill-opacity="undefined"></path></svg>
Bar View
</div>
</button>
<button
className={`view-select-button ${chartType === 'pie' ? 'active' : ''}`}
disabled={pies.some(pie => isEmpty(pie.data))}
onClick={() => {
this.context.containerCountsSummary.updateValue({key: 'chartType', value: 'pie'});
}}
>
<div className={`label ${chartType === 'pie' ? 'active' : ''}`}>
{/* <span className="apple-icons ac-icon-grid" /> */}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 99.609 99.495">
<path
d="M49.773 99.495C61.51 99.495 72.808 95.298 81.903 87.592L46.678 53.186C45.775 52.293 45.536 51.463 45.536 50.155V.155C20.21 2.331 0 23.907 0 49.722 0 76.955 22.591 99.495 49.773 99.495ZM99.61 49.701C99.61 42.359 97.822 34.727 94.717 28.466L54.843 51.434 86.71 82.888C94.707 74.145 99.61 62.16 99.61 49.7ZM52.055 45.435 91.475 22.766C83.02 9.456 67.604.621 52.054 0Z"
fill="#007AFF"
/>
</svg>
Pie View
</div>
</button>
</div>

.expanded-label {
bottom: 50px;
display: flex;
justify-content: flex-end;
padding: 5px 30px;
button {
outline: none;
}
.label {
color: $glyph-gray;
&:not(.active) {
color: $glyph-blue;
}
cursor: pointer;
font-size: 14px;
font-weight: normal;
padding: 0px 0px 0px 20px;
display: inline-flex;
align-items: center;
.apple-icons {
padding-right: 5px;
margin-top: 2px;
}
}
}