From ffd58ddc301f2db09fb646ebb6e97e77fc2ab70e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=87etin?=
 <69278826+cetincakiroglu@users.noreply.github.com>
Date: Fri, 7 Jan 2022 16:07:38 +0300
Subject: [PATCH] Fix charts

---
 src/app/app.config.component.ts               |   1 -
 src/app/components/charts/charts.component.ts | 208 +++++++++++++++++-
 2 files changed, 202 insertions(+), 7 deletions(-)

diff --git a/src/app/app.config.component.ts b/src/app/app.config.component.ts
index e4a0d90..2513072 100644
--- a/src/app/app.config.component.ts
+++ b/src/app/app.config.component.ts
@@ -58,7 +58,6 @@ export class AppConfigComponent implements OnInit, OnDestroy {
     }
 
     onInputStyleChange() {
-        console.log(this.config)
         this.configService.updateConfig(this.config);
     }
 
diff --git a/src/app/components/charts/charts.component.ts b/src/app/components/charts/charts.component.ts
index 5b20f8c..23748dd 100755
--- a/src/app/components/charts/charts.component.ts
+++ b/src/app/components/charts/charts.component.ts
@@ -36,7 +36,6 @@ export class ChartsComponent implements OnInit, OnDestroy {
 
     ngOnInit() {
         this.config = this.configService.config;
-
         this.subscription = this.configService.configUpdate$.subscribe(config => {
             this.config = config;
             this.updateChartOptions();
@@ -68,7 +67,7 @@ export class ChartsComponent implements OnInit, OnDestroy {
             plugins: {
                 legend: {
                     labels: {
-                        fontColor: '#A0A7B5'
+                        color: '#A0A7B5'
                     }
                 }
             },
@@ -112,7 +111,7 @@ export class ChartsComponent implements OnInit, OnDestroy {
             plugins: {
                 legend: {
                     labels: {
-                        fontColor: '#A0A7B5'
+                        color: '#A0A7B5'
                     }
                 }
             },
@@ -159,7 +158,7 @@ export class ChartsComponent implements OnInit, OnDestroy {
             plugins: {
                 legend: {
                     labels: {
-                        fontColor: '#A0A7B5'
+                        color: '#A0A7B5'
                     }
                 }
             }
@@ -196,7 +195,7 @@ export class ChartsComponent implements OnInit, OnDestroy {
             plugins: {
                 legend: {
                     labels: {
-                        fontColor: '#A0A7B5'
+                        color: '#A0A7B5'
                     }
                 }
             },
@@ -239,7 +238,7 @@ export class ChartsComponent implements OnInit, OnDestroy {
             plugins: {
                 legend: {
                     labels: {
-                        fontColor: '#A0A7B5'
+                        color: '#A0A7B5'
                     }
                 }
             },
@@ -261,11 +260,208 @@ export class ChartsComponent implements OnInit, OnDestroy {
     }
 
     applyLightTheme() {
+        this.lineOptions = {
+            plugins: {
+                legend: {
+                    labels: {
+                        color: '#A0A7B5'
+                    }
+                }
+            },
+            scales: {
+                x: {
+                    ticks: {
+                        color: '#A0A7B5'
+                    },
+                    grid: {
+                        color:  'rgba(160, 167, 181, .3)',
+                    }
+                },
+                y: {
+                    ticks: {
+                        color: '#A0A7B5'
+                    },
+                    grid: {
+                        color:  'rgba(160, 167, 181, .3)',
+                    }
+                },
+            }
+        };
+
+        this.barOptions = {
+            plugins: {
+                legend: {
+                    labels: {
+                        color: '#A0A7B5'
+                    }
+                }
+            },
+            scales: {
+                x: {
+                    ticks: {
+                        color: '#A0A7B5'
+                    },
+                    grid: {
+                        color:  'rgba(160, 167, 181, .3)',
+                    }
+                },
+                y: {
+                    ticks: {
+                        color: '#A0A7B5'
+                    },
+                    grid: {
+                        color:  'rgba(160, 167, 181, .3)',
+                    }
+                },
+            }
+        };
+
+        this.pieOptions = {
+            plugins: {
+                legend: {
+                    labels: {
+                        color: '#A0A7B5'
+                    }
+                }
+            }
+        };
+
+        this.polarOptions = {
+            plugins: {
+                legend: {
+                    labels: {
+                        color: '#A0A7B5'
+                    }
+                }
+            },
+            scales: {
+                r: {
+                    grid: {
+                        color: 'rgba(160, 167, 181, .3)'
+                    }
+                }
+            }
+        };
+
+        this.radarOptions = {
+            plugins: {
+                legend: {
+                    labels: {
+                        color: '#A0A7B5'
+                    }
+                }
+            },
+            scales: {
+                r: {
+                    grid: {
+                        color: 'rgba(160, 167, 181, .3)'
+                    }
+                }
+            }
+        };
 
     }
 
     applyDarkTheme() {
+        this.lineOptions = {
+            plugins: {
+                legend: {
+                    labels: {
+                        color: '#ebedef'
+                    }
+                }
+            },
+            scales: {
+                x: {
+                    ticks: {
+                        color: '#ebedef'
+                    },
+                    grid: {
+                        color:  'rgba(160, 167, 181, .3)',
+                    }
+                },
+                y: {
+                    ticks: {
+                        color: '#ebedef'
+                    },
+                    grid: {
+                        color:  'rgba(160, 167, 181, .3)',
+                    }
+                },
+            }
+        };
 
+        this.barOptions = {
+            plugins: {
+                legend: {
+                    labels: {
+                        color: '#ebedef'
+                    }
+                }
+            },
+            scales: {
+                x: {
+                    ticks: {
+                        color: '#ebedef'
+                    },
+                    grid: {
+                        color:  'rgba(160, 167, 181, .3)',
+                    }
+                },
+                y: {
+                    ticks: {
+                        color: '#ebedef'
+                    },
+                    grid: {
+                        color:  'rgba(160, 167, 181, .3)',
+                    }
+                },
+            }
+        };
+
+        this.pieOptions = {
+            plugins: {
+                legend: {
+                    labels: {
+                        color: '#ebedef'
+                    }
+                }
+            }
+        };
+
+        this.polarOptions = {
+            plugins: {
+                legend: {
+                    labels: {
+                        color: '#ebedef'
+                    }
+                }
+            },
+            scales: {
+                r: {
+                    grid: {
+                        color: 'rgba(160, 167, 181, .3)'
+                    }
+                }
+            }
+        };
+
+        this.radarOptions = {
+            plugins: {
+                legend: {
+                    labels: {
+                        color: '#ebedef'
+                    }
+                }
+            },
+            scales: {
+                r: {
+                    grid: {
+                        color: 'rgba(160, 167, 181, .3)'
+                    }
+                }
+            }
+        };
     }
 
     ngOnDestroy() {