31 lines
1.2 KiB
HTML
31 lines
1.2 KiB
HTML
<div class="pie-chart" ng-class="{ 'danger': chartData.overMax }">
|
|
<chart-tooltip tooltip-data="model.tooltipData"></chart-tooltip>
|
|
|
|
<div ng-if="::model.settings.showTitle && chartData.title"
|
|
class="pie-chart-title {$ ::model.settings.titleClass $}">
|
|
{$ ::chartData.title $} ({$ model.total $} {$ model.totalLabel $})
|
|
</div>
|
|
|
|
<svg class="svg-pie-chart"
|
|
ng-attr-height="{$ ::model.settings.diameter $}"
|
|
ng-attr-width="{$ ::model.settings.diameter $}">
|
|
<g class="chart"
|
|
ng-attr-transform="translate({$ ::model.settings.outerRadius $},{$ ::model.settings.outerRadius $})">
|
|
<g class="slices"></g>
|
|
<g ng-if="::model.settings.showLabel && chartData.label" class="pie-chart-label">
|
|
<text dy="0.35em" ng-style="model.settings.label"
|
|
ng-class="{ 'danger': chartData.overMax }">{$ chartData.label $}</text>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
|
|
<div ng-if="::model.settings.showLegend" class="pie-chart-legend">
|
|
<div ng-repeat="slice in chartData.data | showKeyFilter"
|
|
class="slice-legend">
|
|
<div class="slice-key"
|
|
ng-class="slice.colorClass"
|
|
ng-style="{ 'background-color': '{$ slice.color $}' }"></div>
|
|
{$ slice.value $} {$ slice.label $}
|
|
</div>
|
|
</div>
|
|
</div> |