Skip to content

S
sidekick
Commit bac52c75 authored by Kevin Yumang's avatar Kevin Yumang
Browse files
Options

SERV-2286 - pie chart elements setup and configurations + doc sample outputs

parent 9280c168
Hide whitespace changes
Inline Side-by-side
Showing with 253 additions and 38 deletions
src/Views/Limitless/Linechart/Documentation/Index.blade.php
View file @ bac52c75
...@@ -37,8 +37,8 @@ ...@@ -37,8 +37,8 @@
"color":"#fff" "color":"#fff"
}, },
"title":{ "title":{
"text":"Distribution of Electricity", "text":"Projects",
"subtext":"Fake Data", "subtext":"itmax projects",
"textStyle": { "textStyle": {
"color": "#fff" "color": "#fff"
} }
...@@ -49,23 +49,15 @@ ...@@ -49,23 +49,15 @@
"type":"cross" "type":"cross"
} }
}, },
"toolbox":{
"show":true,
"feature":{
"saveAsImage":{
}
}
},
"xAxis":{ "xAxis":{
"type":"category", "type":"category",
"boundaryGap":false, "boundaryGap":false,
"data":["00:00","01:15","02:30","03:45","05:00","06:15","07:30","08:45","10:00","11:15","12:30","13:45","15:00","16:15","17:30","18:45","20:00","21:15","22:30","23:45"] "data":["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]
}, },
"yAxis":{ "yAxis":{
"type":"value", "type":"value",
"axisLabel":{ "axisLabel":{
"formatter":"{value} W" "formatter":"{value} users"
}, },
"axisPointer":{ "axisPointer":{
"snap":true "snap":true
...@@ -102,7 +94,7 @@ ...@@ -102,7 +94,7 @@
}, },
"series":[ "series":[
{ {
"name":"Electricity", "name":"Usage",
"type":"line", "type":"line",
"smooth":true, "smooth":true,
"data":[300,280,250,260,270,300,550,500,400,390,380,390,400,500,600,750,800,700,600,400], "data":[300,280,250,260,270,300,550,500,400,390,380,390,400,500,600,750,800,700,600,400],
...@@ -113,20 +105,20 @@ ...@@ -113,20 +105,20 @@
"data":[ "data":[
[ [
{ {
"name":"Morning Peak", "name":"Peak",
"xAxis":"07:30" "xAxis":"Mon"
}, },
{ {
"xAxis":"10:00" "xAxis":"Tue"
} }
], ],
[ [
{ {
"name":"Evening Peak", "name":"Peak",
"xAxis":"17:30" "xAxis":"Thu"
}, },
{ {
"xAxis":"21:15" "xAxis":"Fri"
} }
] ]
] ]
......
src/Views/Limitless/Piechart/Attachments/piechart.init.js
View file @ bac52c75
...@@ -67,13 +67,17 @@ function set_data(elementObject, callback) { ...@@ -67,13 +67,17 @@ function set_data(elementObject, callback) {
let title = elementObject.attr('title') ?? null; let title = elementObject.attr('title') ?? null;
let subtitle = elementObject.attr('subtitle') ?? null; let subtitle = elementObject.attr('subtitle') ?? null;
let colors = JSON.parse(elementObject.attr('colors')) ?? defaultColors; let colors = JSON.parse(elementObject.attr('colors')) ?? defaultColors;
let donut = (elementObject.attr('donut') == 'true' || elementObject.attr('donut') == true); let pieType = elementObject.attr('pie-type') ?? null; // donut or rose types
let showLabel = (elementObject.attr('label') == 'true' || elementObject.attr('label') == true);
let labelOnEmphasis = (elementObject.attr('emphasis-label') == 'true' || elementObject.attr('emphasis-label') == true);
let animationDuration = elementObject.attr('animation-duration') ?? 750; let animationDuration = elementObject.attr('animation-duration') ?? 750;
let series = JSON.parse(elementObject.attr('series')) ?? null; let series = JSON.parse(elementObject.attr('series')) ?? null;
let seriesNames = series && series.data.map(function(item){ return item.name });
let seriesObject = setSeries(series, donut);
let nested = series.nested ?? false;
let seriesNames = setSeriesNames(series, nested);
let seriesObject = nested ? setNestedSeries(series, showLabel, labelOnEmphasis) : setSeries(series, pieType, showLabel, labelOnEmphasis);
// Options // Options
options = { options = {
...@@ -113,7 +117,7 @@ function set_data(elementObject, callback) { ...@@ -113,7 +117,7 @@ function set_data(elementObject, callback) {
//#endregion //#endregion
//#region FUNCTIONS FOR OPTIONS //#region FUNCTIONS FOR OPTIONS
function setSeries(series, donut) { function setSeries(series, pieType, showLabel, labelOnEmphasis) {
if(!series || series.length == 0) return []; if(!series || series.length == 0) return [];
...@@ -121,7 +125,6 @@ function setSeries(series, donut) { ...@@ -121,7 +125,6 @@ function setSeries(series, donut) {
name: series.name, name: series.name,
type: 'pie', type: 'pie',
data: series.data, data: series.data,
radius: donut ? ['50%', '70%'] : '70%',
center: ['50%', '57.5%'], center: ['50%', '57.5%'],
itemStyle: { itemStyle: {
normal: { normal: {
...@@ -131,9 +134,99 @@ function setSeries(series, donut) { ...@@ -131,9 +134,99 @@ function setSeries(series, donut) {
}, },
} }
switch (pieType) {
case "donut":
data.radius = ['50%', '70%'];
break;
case "rose":
data.radius = ['15%', '80%'];
data.roseType = 'radius';
break;
default:
data.radius = '70%';
break;
}
data.itemStyle.normal.label = { show: showLabel };
data.itemStyle.normal.labelLine = { show: showLabel };
data.itemStyle.emphasis = {};
data.itemStyle.emphasis.label = { show: labelOnEmphasis };
data.itemStyle.emphasis.labelLine = { show: labelOnEmphasis };
return data; return data;
} }
function setNestedSeries(series, showLabel, labelOnEmphasis) {
if(!series || series.length == 0) return [];
let data = [{
name: series.name,
type: 'pie',
selectedMode: 'single',
radius: [0, '50%'],
itemStyle: {
normal: {
borderWidth: 2,
borderColor: '#353f53',
label: {
position: 'inner'
},
labelLine: {
show: false
}
}
},
data: series.innerData
},
{
name: series.name,
type: 'pie',
radius: ['60%', '85%'],
itemStyle: {
normal: {
borderWidth: 2,
borderColor: '#353f53',
label: {
show: showLabel
},
labelLine: {
show: showLabel
}
},
emphasis: {
label: {
show: labelOnEmphasis
},
labelLine: {
show: labelOnEmphasis
}
}
},
data: series.outerData
}];
return data;
}
function setSeriesNames(series, nested) {
if(series.length == 0) return null;
if(nested) {
let nestedSeries;
let innerSeries = series.innerData.map(function(item){ return item.name });
let outerSeries = series.outerData.map(function(item){ return item.name });
nestedSeries = innerSeries.concat(outerSeries);
return nestedSeries;
} else {
return series.data.map(function(item){ return item.name });
}
}
function setLegend(legendData) { function setLegend(legendData) {
return { return {
orient: 'vertical', orient: 'vertical',
......
src/Views/Limitless/Piechart/Config.php
View file @ bac52c75
...@@ -65,7 +65,9 @@ ...@@ -65,7 +65,9 @@
return View('Limitless::Piechart.PieChart') return View('Limitless::Piechart.PieChart')
->withTitle($parameters['title'] ?? null) ->withTitle($parameters['title'] ?? null)
->withSubtitle($parameters['subtitle'] ?? null) ->withSubtitle($parameters['subtitle'] ?? null)
->withDonut($parameters['donut'] ?? false) ->withPieType($parameters['pie-type'] ?? false)
->withLabel($parameters['label'] ?? true)
->withEmphasisLabel($parameters['emphasis-label'] ?? true)
->withColors($parameters['colors'] ?? null) ->withColors($parameters['colors'] ?? null)
->withAnimationDuration($parameters['animation-duration'] ?? 750) ->withAnimationDuration($parameters['animation-duration'] ?? 750)
->withSeries($parameters['series'] ?? null) ->withSeries($parameters['series'] ?? null)
......
src/Views/Limitless/Piechart/Documentation/Index.blade.php
View file @ bac52c75
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
// sample backend data // sample backend data
$series = ['ONC', 'APR', 'SPR', 'PHX', 'BRG']; $series = ['ONC', 'APR', 'SPR', 'PHX', 'BRG'];
// basic data
$data['name'] = 'Projects'; $data['name'] = 'Projects';
foreach ($series as $s) { foreach ($series as $s) {
$seriesData = (object)[]; $seriesData = (object)[];
...@@ -16,27 +17,152 @@ ...@@ -16,27 +17,152 @@
$data['data'][] = $seriesData; $data['data'][] = $seriesData;
} }
// nested pie data
$nestedSeriesInner = ['ONC', 'APR', 'SPR', 'PHX'];
$nestedSeriesOuter = ['BRG', 'SDK', 'OCT', 'SIG'];
$nestedData['name'] = 'All Projects';
$nestedData['nested'] = true; // this will be auto set when inner and outer data have values
foreach ($nestedSeriesInner as $i) {
$nestedSeriesInnerData = (object)[];
$nestedSeriesInnerData->name = $i;
$nestedSeriesInnerData->value = rand(1,100);
$nestedData['innerData'][] = $nestedSeriesInnerData;
}
foreach ($nestedSeriesOuter as $o) {
$nestedSeriesOuterData = (object)[];
$nestedSeriesOuterData->name = $o;
$nestedSeriesOuterData->value = rand(1,100);
$nestedData['outerData'][] = $nestedSeriesOuterData;
}
$rawData = '{
"color":[
"#2ec7c9",
"#b6a2de",
"#5ab1ef",
"#ffb980",
"#d87a80",
"#8d98b3",
"#e5cf0d"
],
"textStyle":{
"color":"#fff"
},
"tooltip":{
"trigger":"item"
},
"legend":{
"top":"5%",
"left":"center",
"textStyle": {
"color":"#fff"
}
},
"series":[
{
"name":"Projects",
"type":"pie",
"radius":[
"40%",
"70%"
],
"avoidLabelOverlap":false,
"itemStyle":{
"borderRadius":10,
"borderColor":"#fff",
"borderWidth":2
},
"label":{
"show":false,
"position":"center"
},
"emphasis":{
"label":{
"show":true,
"fontSize":"40",
"fontWeight":"bold"
}
},
"labelLine":{
"show":false
},
"data":[
{
"value":1048,
"name":"ONC"
},
{
"value":735,
"name":"APR"
},
{
"value":580,
"name":"PHX"
},
{
"value":484,
"name":"SPR"
},
{
"value":300,
"name":"BRG"
}
]
}
]
}';
@endphp @endphp
<div class="row"> <div class="row">
<div class="col-xl-6"> <div class="col-xl-6">
@Limitless::CardStart(['title' => "Basic Pie Setup", 'icon' => 'icon-info22' ] ) @Limitless::CardStart(['title' => "Basic Pie Setup", 'icon' => 'icon-info22' ] )
@Limitless::PieChart([ @Limitless::PieChart([
'title' => 'Basic Pie Chart', 'title' => 'Basic Pie Chart',
'subtitle' => 'basic pie chart setup', 'subtitle' => 'basic pie chart setup',
'series' => $data, 'series' => $data,
]) ])
@Limitless::CardStop
</div>
<div class="col-xl-6">
@Limitless::CardStart(['title' => "Donut Pie Setup", 'icon' => 'icon-info22' ] )
@Limitless::PieChart([
'title' => 'Basic Donut Chart',
'subtitle' => 'basic donut chart setup',
'pie-type' => 'donut',
'series' => $data,
])
@Limitless::CardStop @Limitless::CardStop
</div> </div>
</div>
<div class="row">
<div class="col-xl-6">
@Limitless::CardStart(['title' => "Rose Pie Setup", 'icon' => 'icon-info22' ] )
@Limitless::PieChart([
'pie-type' => 'rose',
'series' => $data,
])
@Limitless::CardStop
</div>
<div class="col-xl-6">
@Limitless::CardStart(['title' => "Nested Pie Setup", 'icon' => 'icon-info22' ] )
@Limitless::PieChart([
'series' => $nestedData,
'label' => false,
'emphasis-label' => true
])
@Limitless::CardStop
</div>
</div>
<div class="row">
<div class="col-xl-6"> <div class="col-xl-6">
@Limitless::CardStart(['title' => "Basic Donut Setup", 'icon' => 'icon-info22' ] ) @Limitless::CardStart(['title' => "Raw Data Setup", 'icon' => 'icon-info22' ] )
@Limitless::PieChart([ @Limitless::PieChart([
'title' => 'Basic Donut Chart', 'raw' => $rawData,
'subtitle' => 'basic donut chart setup', ])
'donut' => true,
'series' => $data,
])
@Limitless::CardStop @Limitless::CardStop
</div> </div>
</div> </div>
......
src/Views/Limitless/Piechart/PieChart.blade.php
View file @ bac52c75
...@@ -3,7 +3,9 @@ ...@@ -3,7 +3,9 @@
title="{{ $title }}" title="{{ $title }}"
subtitle="{{ $subtitle }}" subtitle="{{ $subtitle }}"
colors="{{ json_encode($colors) }}" colors="{{ json_encode($colors) }}"
donut="{{$donut}}" pie-type="{{ $pieType }}"
label="{{ $label }}"
emphasis-label="{{ $emphasisLabel }}"
animation-duration="{{ $animationDuration }}" animation-duration="{{ $animationDuration }}"
series="{{ json_encode($series) }}" series="{{ json_encode($series) }}"
raw="{{ json_encode(json_decode($raw)) }}" raw="{{ json_encode(json_decode($raw)) }}"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment