horizon/horizon/static/framework/widgets/charts/pie-chart.html

31 lines
1.3 KiB
HTML

<div class="pie-chart text-center" ng-class="{ 'danger': chartData.overMax }">
<chart-tooltip tooltip-data="model.tooltipData"></chart-tooltip>
<div class="pie-chart-title" ng-if="::model.settings.showTitle && chartData.title">
{$ ::chartData.title $} <br/>({$ model.totalLabel $})
</div>
<svg class="svg-pie-chart"
ng-show="chartData.showChart"
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 ng-if="chartData.showChart" class="slice-key" ng-class="slice.colorClass"></div>
<div ng-class="[slice.colorClass, chartData.chartless]">{$ slice.value $}</div>
<div>{$ slice.label $}</div>
</div>
</div>
</div>