Merge pull request #8 from SoftwareAG/dev

Add Dark Theme and dynamic loading icon color
Cumulocity-IoT · May 27, 2022 · d7140d5 · d7140d5
2 parents 4bcca49 + 4712afa
commit d7140d5
Show file tree

Hide file tree

Showing 9 changed files with 184 additions and 25 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "gp-smart-echart-widget",
- "version": "1.2.3",
+ "version": "1.2.4",
  "description": "This is an Angular 11 widget, which is designed to display the chart based on the REST data or Datahub.",
  "author": "Neeru Arora - Software AG, Global Presales",
  "license": "Apache 2.0",

diff --git a/projects/gp-smart-echart-widget/package.json b/projects/gp-smart-echart-widget/package.json
@@ -1,6 +1,6 @@
 {
  "name": "gp-smart-echart-widget",
- "version": "1.2.3",
+ "version": "1.2.4",
  "description": "This is an Angular 11 widget, which is designed to display the chart based on the REST data or Datahub.",
  "author": "Neeru Arora - Software AG, Global Presales",
  "license": "Apache 2.0",

diff --git a/projects/gp-smart-echart-widget/src/lib/gp-smart-echart-widget.component.html b/projects/gp-smart-echart-widget/src/lib/gp-smart-echart-widget.component.html
@@ -1,6 +1,5 @@
 <div (resized)="onResized($event)" style="height:99%;width:99%;">
-
+ 
  <div echarts [options]="chartOption" class="demo-chart" #chartBox [style.height.px]="height"
  [style.width.px]="width"></div>
-
 </div>
diff --git a/projects/gp-smart-echart-widget/src/lib/gp-smart-echart-widget.component.ts b/projects/gp-smart-echart-widget/src/lib/gp-smart-echart-widget.component.ts
@@ -15,7 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Component, ElementRef,  Input, OnInit,  ViewChild } from '@angular/core';
+import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
 import * as echarts from 'echarts';
 import { EChartsOption } from 'echarts';
 import { ChartConfig } from './model/config.modal';
@@ -50,22 +50,128 @@ export class GpSmartEchartWidgetComponent implements OnInit {
  isDatahubPostCall = false;
  dataChart;
  colorsForChart;
+ // for dark mode
+ contrastColor = '#eee';
+ colorPalette = ['#dd6b66', '#759aa0', '#e69d87', '#8dc1a9', '#ea7e53', '#eedd78', '#73a373', '#73b9bc', '#7289ab', '#91ca8c', '#f49f42'];
+ darkTheme = {
+ color: this.colorPalette,
+ backgroundColor: '#333',
+ tooltip: {
+ axisPointer: {
+ lineStyle: {
+ color: this.contrastColor
+ },
+ crossStyle: {
+ color: this.contrastColor
+ }
+ }
+ },
+ legend: {
+ textStyle: {
+ color: this.contrastColor
+ }
+ },
+ textStyle: {
+ color: this.contrastColor
+ },
+ title: {
+ textStyle: {
+ color: this.contrastColor
+ }
+ },
+ toolbox: {
+ iconStyle: {
+ normal: {
+ borderColor: this.contrastColor
+ }
+ }
+ },
+ dataZoom: {
+ textStyle: {
+ color: this.contrastColor
+ }
+ },
+ timeline: {
+ lineStyle: {
+ color: this.contrastColor
+ },
+ itemStyle: {
+ normal: {
+ color: this.colorPalette[1]
+ }
+ },
+ label: {
+ normal: {
+ textStyle: {
+ color: this.contrastColor
+ }
+ }
+ },
+ controlStyle: {
+ normal: {
+ color: this.contrastColor,
+ borderColor: this.contrastColor
+ }
+ }
+ },
+ timeAxis: this.axisCommon(),
+ logAxis: this.axisCommon(),
+ valueAxis: this.axisCommon(),
+ categoryAxis: this.axisCommon(),
+ line: {
+ symbol: 'circle'
+ },
+ graph: {
+ color: this.colorPalette
+ },
+ gauge: {
+ title: {
+ textStyle: {
+ color: this.contrastColor
+ }
+ }
+ },
+ candlestick: {
+ itemStyle: {
+ normal: {
+ color: '#FD1050',
+ color0: '#0CF49B',
+ borderColor: '#FD1050',
+ borderColor0: '#0CF49B'
+ }
+ }
+ }
+ };
+ // end of variable for dark mode
  constructor(private chartService: GpSmartEchartWidgetService,
  private fetchClient: FetchClient,) { }
  ngOnInit(): void {
  this.chartDiv = this.mapDivRef.nativeElement;
  const sessionStorageData = this.getDataFromSessionStorage('Chartsession');
+ this.extractColorsForChart(this.config);
  if (sessionStorageData && sessionStorageData !== 'true') {
- this.dataChart = echarts.init(this.chartDiv);
- this.dataChart.showLoading();
+ if (!this.config.darkMode) {
+ this.dataChart = echarts.init(this.chartDiv);
+ } else {
+ this.dataChart = echarts.init(this.chartDiv, this.darkTheme);
+ }
+ this.dataChart.showLoading({ color: this.colorsForChart[0] });
  this.createChart(this.config);
  } else if (sessionStorageData === 'true') {
- this.dataChart = echarts.init(this.chartDiv);
- this.dataChart.showLoading();
+ if (!this.config.darkMode) {
+ this.dataChart = echarts.init(this.chartDiv);
+ } else {
+ this.dataChart = echarts.init(this.chartDiv, this.darkTheme);
+ }
+ this.dataChart.showLoading({ color: this.colorsForChart[0] });
  this.waitForServiceToComplete();
  } else {
- this.dataChart = echarts.init(this.chartDiv);
- this.dataChart.showLoading();
+ if (!this.config.darkMode) {
+ this.dataChart = echarts.init(this.chartDiv);
+ } else {
+ this.dataChart = echarts.init(this.chartDiv, this.darkTheme);
+ }
+ this.dataChart.showLoading({ color: this.colorsForChart[0] });
  this.createChart(this.config);
  }
  }
@@ -171,12 +277,6 @@ export class GpSmartEchartWidgetComponent implements OnInit {
  }
  }
  }
- if (!userInput.colors) {
- if (isDevMode()) { console.log('No colors Specified'); }
- this.colorsForChart = [];
- } else {
- this.colorsForChart = [...userInput.colors.split(',')]
- }
  if (!userInput.aggrList) {
  userInput.aggrList = [];
  }
@@ -481,9 +581,9 @@ export class GpSmartEchartWidgetComponent implements OnInit {
  && (userInput.layout !== 'simpleHorizontalBar' && userInput.layout !== 'stackedHorizontalBar')) {
  this.seriesData = this.getSeriesData(userInput);
  let boundaryGapValue;
- if(userInput.type==='line'){
+ if (userInput.type === 'line') {
  boundaryGapValue = false;
- }else {
+ } else {
  boundaryGapValue = true;
  }
  let xAxisName; let yAxisName;
@@ -683,9 +783,9 @@ export class GpSmartEchartWidgetComponent implements OnInit {
  }
  encodeData = this.getEncodeData(userInput, datasetId, xDimensions, yDimensions);
  let boundaryGapValue;
- if(userInput.type==='line'){
+ if (userInput.type === 'line') {
  boundaryGapValue = false;
- }else {
+ } else {
  boundaryGapValue = true;
  }
  this.chartOption = {
@@ -1102,9 +1202,9 @@ export class GpSmartEchartWidgetComponent implements OnInit {
  }
  encodeData = this.getEncodeData(userInput, datasetId, xDimensions, yDimensions);
  let boundaryGapValue;
- if(userInput.type==='line'){
+ if (userInput.type === 'line') {
  boundaryGapValue = false;
- }else {
+ } else {
  boundaryGapValue = true;
  }
  this.chartOption = {
@@ -2346,4 +2446,52 @@ export class GpSmartEchartWidgetComponent implements OnInit {
  });
  }
  }
+ extractColorsForChart(userInput) {
+ if (!userInput.colors) {
+ if (isDevMode()) { console.log('No colors Specified'); }
+ this.colorsForChart = [];
+ } else {
+ this.colorsForChart = [...userInput.colors.split(',')]
+ }
+ }
+ // For Dark Mode
+ axisCommon() {
+ return {
+ axisLine: {
+ lineStyle: {
+ color: this.contrastColor
+ }
+ },
+ axisTick: {
+ lineStyle: {
+ color: this.contrastColor
+ }
+ },
+ axisLabel: {
+ textStyle: {
+ color: this.contrastColor
+ }
+ },
+ splitLine: {
+ lineStyle: {
+ type: 'dashed',
+ color: '#aaa'
+ }
+ },
+ splitArea: {
+ areaStyle: {
+ color: this.contrastColor
+ }
+ }
+ };
+ };
+ toggleTheme() {
+ this.dataChart.dispose();
+ if (this.config.darkMode) {
+ this.dataChart = echarts.init(this.chartDiv);
+ } else {
+ this.dataChart = echarts.init(this.chartDiv, this.darkTheme);
+ }
+ this.dataChart.setOption(this.chartOption);
+ }
 }
diff --git a/projects/gp-smart-echart-widget/src/lib/model/config.modal.ts b/projects/gp-smart-echart-widget/src/lib/model/config.modal.ts
@@ -69,6 +69,8 @@
  yAxisRotateLabels?:number;
  sqlLimit?:number;
  datahubUrl?:string;
+ darkMode?:boolean;
+
 }
 
 export class Emphasis{

diff --git a/projects/gp-smart-echart-widget/src/lib/smart-chart-config/smart-chart-config.component.html b/projects/gp-smart-echart-widget/src/lib/smart-chart-config/smart-chart-config.component.html
@@ -360,6 +360,7 @@ <h4>Appearance Config</h4>
  <span>Box Zoom</span>
  </label>
  </div>
+
  </div>
  <div class="row">
  <div class="col-xs-3 col-md-3">
@@ -372,6 +373,14 @@ <h4>Appearance Config</h4>
  <input class="form-control" type="color" placeholder="Enter color HEX"
  (change)="colorUpdate($event.target.value)">
  </div>
+ <div class="col-xs-3 col-md-3">
+ <br />
+ <label title="DarkMode" class="c8y-checkbox" style="height: 35px;">
+ <input type="checkbox" value="false" [(ngModel)]="config.darkMode">
+ <span></span>
+ <span>Dark Mode</span>
+ </label>
+ </div>
  </div>
 </div>
 <!-- End Of Legend Config Section -->
diff --git a/projects/gp-smart-echart-widget/src/lib/smart-chart-config/smart-chart-config.component.ts b/projects/gp-smart-echart-widget/src/lib/smart-chart-config/smart-chart-config.component.ts
@@ -256,6 +256,7 @@ export class SmartChartConfigComponent implements OnInit {
  radarDimensions: '',
  // addStack: false,
  showApiInput: false,
+ darkMode: false,
  stack: [],
  stackList: Stack[''],
  aggrArr: [],

diff --git a/runtime/cumulocity.json b/runtime/cumulocity.json
@@ -9,7 +9,7 @@
  "manifest": {
  "noAppSwitcher": true,
  "requiredPlatformVersion": ">=1011.0.0",
- "version":"1.2.3",
+ "version":"1.2.4",
  "author":"Software AG, Global Presales",
  "description": "This is an Angular 11 widget, which is designed to display the chart based on the REST data or Datahub.",
  "license": "Apache 2.0"

diff --git a/runtime/package.json b/runtime/package.json
@@ -4,7 +4,7 @@
  "dist\\bundle-src\\custom-widget.js": "smart-echart-runtime-widget-CustomWidget",
  "dist/bundle-src/custom-widget.js": "smart-echart-runtime-widget-CustomWidget"
  },
- "version": "1.2.3",
+ "version": "1.2.4",
  "description": "Runtime package.json for library widget (written by Software AG Global Presales)",
  "author": "Darpankumar Lalani - Software AG, Global Presales",
  "license": "Apache 2.0"