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
Show 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 @@
"color":"#fff"
},
"title":{
"text":"Distribution of Electricity",
"subtext":"Fake Data",
"text":"Projects",
"subtext":"itmax projects",
"textStyle": {
"color": "#fff"
}
......@@ -49,23 +49,15 @@
"type":"cross"
}
},
"toolbox":{
"show":true,
"feature":{
"saveAsImage":{
}
}
},
"xAxis":{
"type":"category",
"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":{
"type":"value",
"axisLabel":{
"formatter":"{value} W"
"formatter":"{value} users"
},
"axisPointer":{
"snap":true
......@@ -102,7 +94,7 @@
},
"series":[
{
"name":"Electricity",
"name":"Usage",
"type":"line",
"smooth":true,
"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 @@
"data":[
[
{
"name":"Morning Peak",
"xAxis":"07:30"
"name":"Peak",
"xAxis":"Mon"
},
{
"xAxis":"10:00"
"xAxis":"Tue"
}
],
[
{
"name":"Evening Peak",
"xAxis":"17:30"
"name":"Peak",
"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) {
let title = elementObject.attr('title') ?? null;
let subtitle = elementObject.attr('subtitle') ?? null;
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 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 = {
......@@ -113,7 +117,7 @@ function set_data(elementObject, callback) {
//#endregion
//#region FUNCTIONS FOR OPTIONS
function setSeries(series, donut) {
function setSeries(series, pieType, showLabel, labelOnEmphasis) {
if(!series || series.length == 0) return [];
......@@ -121,7 +125,6 @@ function setSeries(series, donut) {
name: series.name,
type: 'pie',
data: series.data,
radius: donut ? ['50%', '70%'] : '70%',
center: ['50%', '57.5%'],
itemStyle: {
normal: {
......@@ -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;
}
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) {
return {
orient: 'vertical',
......
src/Views/Limitless/Piechart/Config.php
View file @ bac52c75
......@@ -65,7 +65,9 @@
return View('Limitless::Piechart.PieChart')
->withTitle($parameters['title'] ?? 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)
->withAnimationDuration($parameters['animation-duration'] ?? 750)
->withSeries($parameters['series'] ?? null)
......
src/Views/Limitless/Piechart/Documentation/Index.blade.php
View file @ bac52c75
......@@ -8,6 +8,7 @@
// sample backend data
$series = ['ONC', 'APR', 'SPR', 'PHX', 'BRG'];
// basic data
$data['name'] = 'Projects';
foreach ($series as $s) {
$seriesData = (object)[];
......@@ -16,6 +17,101 @@
$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
<div class="row">
......@@ -30,15 +126,45 @@
</div>
<div class="col-xl-6">
@Limitless::CardStart(['title' => "Basic Donut Setup", 'icon' => 'icon-info22' ] )
@Limitless::CardStart(['title' => "Donut Pie Setup", 'icon' => 'icon-info22' ] )
@Limitless::PieChart([
'title' => 'Basic Donut Chart',
'subtitle' => 'basic donut chart setup',
'donut' => true,
'pie-type' => 'donut',
'series' => $data,
])
@Limitless::CardStop
</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">
@Limitless::CardStart(['title' => "Raw Data Setup", 'icon' => 'icon-info22' ] )
@Limitless::PieChart([
'raw' => $rawData,
])
@Limitless::CardStop
</div>
</div>
@stop
src/Views/Limitless/Piechart/PieChart.blade.php
View file @ bac52c75
......@@ -3,7 +3,9 @@
title="{{ $title }}"
subtitle="{{ $subtitle }}"
colors="{{ json_encode($colors) }}"
donut="{{$donut}}"
pie-type="{{ $pieType }}"
label="{{ $label }}"
emphasis-label="{{ $emphasisLabel }}"
animation-duration="{{ $animationDuration }}"
series="{{ json_encode($series) }}"
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