text controlled for donut chart
This commit is contained in:
parent
7ac29e566d
commit
baf597ee70
@ -237,7 +237,7 @@ abstract class Report
|
||||
->setColors(array_values($colors))
|
||||
->setDataset($this->tables[$table_key], 'donut', array_values($values));
|
||||
|
||||
$chart->options['legend']['width'] = 150;
|
||||
$chart->options['legend']['width'] = 105;
|
||||
$chart->options['legend']['position'] = 'right';
|
||||
|
||||
return $chart;
|
||||
|
@ -27,7 +27,7 @@ class ExpensesByCategory extends Widget
|
||||
|
||||
$chart = $this->getDonutChart(trans_choice('general.expenses', 2), '100%', 300, 6);
|
||||
|
||||
$chart->options['legend']['width'] = 210;
|
||||
$chart->options['legend']['width'] = 160;
|
||||
$chart->options['legend']['position'] = 'right';
|
||||
|
||||
return $this->view('widgets.donut_chart', [
|
||||
|
31
public/css/app.css
vendored
31
public/css/app.css
vendored
@ -47115,6 +47115,37 @@ html[dir='rtl'] .el-input__suffix {
|
||||
}
|
||||
/* element-ui */
|
||||
|
||||
/* apex-chart */
|
||||
.apexcharts-donut-custom span.apexcharts-legend-text {
|
||||
display: -webkit-box !important;
|
||||
-webkit-line-clamp: 1 !important;
|
||||
-webkit-box-orient: vertical !important;
|
||||
overflow: hidden !important;
|
||||
height: 1rem !important;
|
||||
}
|
||||
|
||||
.apexcharts-donut-custom .apexcharts-legend-series {
|
||||
display: -webkit-box !important;
|
||||
display: -ms-flexbox !important;
|
||||
display: flex !important;
|
||||
-webkit-box-align: center !important;
|
||||
-ms-flex-align: center !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
.apexcharts-donut-custom .apexcharts-legend {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.apexcharts-donut-custom .apexcharts-legend-marker {
|
||||
width: 18px !important;
|
||||
}
|
||||
|
||||
.apexcharts-donut-custom-report .apexcharts-legend-marker {
|
||||
width: 12px !important;
|
||||
}
|
||||
/* apex-chart */
|
||||
|
||||
/* collapse */
|
||||
.active-collapse{
|
||||
opacity: 1;
|
||||
|
27
resources/assets/sass/app.css
vendored
27
resources/assets/sass/app.css
vendored
@ -452,6 +452,33 @@ html[dir='rtl'] .el-input__suffix {
|
||||
}
|
||||
/* element-ui */
|
||||
|
||||
/* apex-chart */
|
||||
.apexcharts-donut-custom span.apexcharts-legend-text {
|
||||
display: -webkit-box !important;
|
||||
-webkit-line-clamp: 1 !important;
|
||||
-webkit-box-orient: vertical !important;
|
||||
overflow: hidden !important;
|
||||
height: 1rem !important;
|
||||
}
|
||||
|
||||
.apexcharts-donut-custom .apexcharts-legend-series {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
.apexcharts-donut-custom .apexcharts-legend {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.apexcharts-donut-custom .apexcharts-legend-marker {
|
||||
width: 18px !important;
|
||||
}
|
||||
|
||||
.apexcharts-donut-custom-report .apexcharts-legend-marker {
|
||||
width: 12px !important;
|
||||
}
|
||||
/* apex-chart */
|
||||
|
||||
/* collapse */
|
||||
.active-collapse {
|
||||
@apply opacity-100;
|
||||
|
@ -18,7 +18,7 @@
|
||||
{!! $charts['bar']->container() !!}
|
||||
</div>
|
||||
|
||||
<div x-show="toggle === 'bar'">
|
||||
<div class="apexcharts-donut-custom apexcharts-donut-custom-report" x-show="toggle === 'bar'">
|
||||
{!! $charts['donut']->container() !!}
|
||||
</div>
|
||||
</div>
|
||||
|
@ -1,4 +1,4 @@
|
||||
<div id="widget-{{ $class->model->id }}" class="{{ $class->model->settings->width }} my-8">
|
||||
<div id="widget-{{ $class->model->id }}" class="apexcharts-donut-custom {{ $class->model->settings->width }} my-8">
|
||||
@include($class->views['header'], ['header_class' => ''])
|
||||
|
||||
<div class="flex flex-col lg:flex-row mt-3" id="widget-donut-{{ $class->model->id }}">
|
||||
|
Loading…
x
Reference in New Issue
Block a user