feat(): add a set of default themes (#59)

* feat(themes): initial pass on default themes * chore(): move registerTheme function to base * feat(): update with blessed themes * fix(): change json files to ts * chore(): remove tsconfig json options * feat(): update themes and add theme selector
Teradata · Jul 15, 2019 · 1a7969a · 1a7969a
1 parent 08eb117
commit 1a7969a
Show file tree

Hide file tree

Showing 34 changed files with 4,731 additions and 123 deletions.
diff --git a/src/app/components/types/bar/bar.component.html b/src/app/components/types/bar/bar.component.html
@@ -1,13 +1,13 @@
 <div>
   <mat-card flex>
     <mat-card-title>Bar</mat-card-title>
-    <mat-card-subtitle>Individual component configurations, series, tooltip, toolbox, dataset, x & y axis</mat-card-subtitle>
+    <mat-card-subtitle>Individual component configurations, series, tooltip, toolbox, dataset, x & y axis and theme</mat-card-subtitle>
     <mat-divider></mat-divider>
     <mat-card-content>
       <mat-tab-group mat-stretch-tabs dynamicHeight>
         <mat-tab>
           <ng-template matTabLabel>Demo</ng-template>
-          <td-chart [style.height.px]="300">
+          <td-chart [style.height.px]="300" [themeName]="themeSelector.selected$ | async">
             <td-chart-dataset [source]="[['Electronics', 150, 80], ['Toys', 130, 122], ['Grocery', 150, 80],
               ['Appliances', 120, 120], ['Automotive', 150, 80],
               ['Sports', 120, 120]]">
@@ -46,9 +46,7 @@
                 </table>
               </ng-template>
             </td-chart-toolbox>
-            <td-chart-tooltip [trigger]="'item'"
-                              [textStyle]="{ color: '#818181' }"
-                              [backgroundColor]="'#ffffff'">
+            <td-chart-tooltip [trigger]="'item'">
               <ng-template let-params let-ticket="ticket" tdTooltipFormatter>
                 <ng-container *ngIf="params">
                   <div layout="row" layout-align="start center">
@@ -74,13 +72,11 @@
                               [splitLine]="{ lineStyle: { type: 'dotted' } }">
             </td-chart-y-axis>
             <td-chart-series td-bar
-                            [name]="'Today'"
-                            [color]="'#F2724B'">
+                            [name]="'Today'">
             </td-chart-series>
             <td-chart-series td-bar
                             [name]="'Yesterday'"
-                            [markLine]="{ data: [{ name: 'Average', value: 30, xAxis: 1, yAxis: 30 }] }"
-                            [color]="'#3A4950'">
+                            [markLine]="{ data: [{ name: 'Average', value: 30, xAxis: 1, yAxis: 30 }] }">
             </td-chart-series>
           </td-chart>
         </mat-tab>
@@ -89,7 +85,7 @@
           <p>HTML: </p>
           <td-highlight lang="html">
             <![CDATA[
-            <td-chart [style.height.px]="300">
+            <td-chart [style.height.px]="300" [themeName]="'aqua-splash'">
                 <td-chart-dataset [source]="[['Electronics', 150, 80], ['Toys', 130, 122], ['Grocery', 150, 80],
                   ['Appliances', 120, 120], ['Automotive', 150, 80],
                   ['Sports', 120, 120]]">
@@ -128,9 +124,7 @@
                     </table>
                   </ng-template>
                 </td-chart-toolbox>
-                <td-chart-tooltip [trigger]="'item'"
-                                  [textStyle]="{ color: '#818181' }"
-                                  [backgroundColor]="'#ffffff'">
+                <td-chart-tooltip [trigger]="'item'">
                   <ng-template let-params let-ticket="ticket" tdTooltipFormatter>
                     <ng-container *ngIf="params">
                       <div layout="row" layout-align="start center">
@@ -156,13 +150,11 @@
                                   [splitLine]="{ lineStyle: { type: 'dotted' } }">
                 </td-chart-y-axis>
                 <td-chart-series td-bar
-                                [name]="'Today'"
-                                [color]="'#F2724B'">
+                                [name]="'Today'">
                 </td-chart-series>
                 <td-chart-series td-bar
                                 [name]="'Yesterday'"
-                                [markLine]="{ data: [{ name: 'Average', value: 30, xAxis: 1, yAxis: 30 }] }"
-                                [color]="'#3A4950'">
+                                [markLine]="{ data: [{ name: 'Average', value: 30, xAxis: 1, yAxis: 30 }] }">
                 </td-chart-series>
               </td-chart>
             ]]>

diff --git a/src/app/components/types/bar/bar.component.ts b/src/app/components/types/bar/bar.component.ts
@@ -1,4 +1,5 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { ChartThemeSelectorService } from '../../../utilities/theme';
 
 @Component({
   selector: 'types-bar',
@@ -90,4 +91,8 @@ export class TypesBarComponent {
       showContent: true,
     },
   };
+
+  constructor(
+    public themeSelector: ChartThemeSelectorService,
+  ) {}
 }
diff --git a/src/app/components/types/combination/combination.component.html b/src/app/components/types/combination/combination.component.html
@@ -1,12 +1,13 @@
 <mat-card flex>
   <mat-card-title>Combination Line + Bar</mat-card-title>
-  <mat-card-subtitle>Individual component configurations, series, tooltip, x & y axis, series tooltip</mat-card-subtitle>
+  <mat-card-subtitle>Individual component configurations, series, tooltip, x & y axis, series tooltip and theme</mat-card-subtitle>
   <mat-divider></mat-divider>
   <mat-card-content>
     <mat-tab-group mat-stretch-tabs dynamicHeight>
       <mat-tab>
         <ng-template matTabLabel>Demo</ng-template>
         <td-chart [style.height.px]="300"
+                  [themeName]="themeSelector.selected$ | async"
                   [config]="{tooltip: {show: true}}">
           <td-chart-x-axis [show]="true"
                             [data]="[
@@ -25,13 +26,11 @@
           </td-chart-y-axis>
           <td-chart-series td-bar
                             [data]="[150, 130, 150, 120, 150, 120]"
-                            [name]="'Yesterday'"
-                            [color]="'#F2724B'">
+                            [name]="'Yesterday'">
           </td-chart-series>
           <td-chart-series td-line
                             [data]="[80, 122, 80, 120, 80, 120]"
-                            [name]="'Today'"
-                            [color]="'#3A4950'">
+                            [name]="'Today'">
           </td-chart-series>
         </td-chart>
       </mat-tab>
@@ -41,6 +40,7 @@
         <td-highlight lang="html">
           <![CDATA[
             <td-chart [style.height.px]="300"
+                      [themeName]="'aqua-splash'"
                       [config]="{tooltip: {show: true}}">
               <td-chart-x-axis [show]="true"
                                 [data]="[
@@ -71,13 +71,11 @@
               </td-chart-y-axis>
               <td-chart-series td-bar
                                 [data]="[150, 130, 150, 120, 150, 120]"
-                                [name]="'Yesterday'"
-                                [color]="'#F2724B'">
+                                [name]="'Yesterday'">
               </td-chart-series>
               <td-chart-series td-line
                                 [data]="[80, 122, 80, 120, 80, 120]"
-                                [name]="'Today'"
-                                [color]="'#3A4950'">
+                                [name]="'Today'">
               </td-chart-series>
             </td-chart>
           ]]>

diff --git a/src/app/components/types/combination/combination.component.ts b/src/app/components/types/combination/combination.component.ts
@@ -1,4 +1,5 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { ChartThemeSelectorService } from '../../../utilities/theme';
 
 @Component({
   selector: 'types-combination',
@@ -62,4 +63,7 @@ export class TypesCombinationComponent {
     },
   };
 
+  constructor(
+    public themeSelector: ChartThemeSelectorService,
+  ) {}
 }
diff --git a/src/app/components/types/graph/graph.component.html b/src/app/components/types/graph/graph.component.html
@@ -1,12 +1,12 @@
 <mat-card flex>
   <mat-card-title>Graph</mat-card-title>
-  <mat-card-subtitle>Individual component configurations, series, tooltip, x & y axis, series tooltip</mat-card-subtitle>
+  <mat-card-subtitle>Individual component configurations, series, tooltip, x & y axis, series tooltip and theme</mat-card-subtitle>
   <mat-divider></mat-divider>
   <mat-card-content>
     <mat-tab-group mat-stretch-tabs dynamicHeight>
       <mat-tab>
         <ng-template matTabLabel>Demo</ng-template>
-        <td-chart [style.height.px]="500">
+        <td-chart [style.height.px]="500" [themeName]="themeSelector.selected$ | async">
           <td-chart-tooltip [trigger]="'item'">
             <ng-template let-params let-i="index" let-ticket="ticket" tdTooltipFormatter>
               <ng-container *ngIf="params">
@@ -32,23 +32,23 @@
           </td-chart-tooltip>
           <td-chart-series td-graph
                           [data]="[{ x: -739.36383, y: -404.26147, id: 'jquery', name: 'jquery',
-                            symbolSize: 40.7252817, itemStyle: { normal: { color: '#4f19c7' } } },
+                            symbolSize: 40.7252817 },
                           { x: -134.2215, y: -862.7517, id: 'backbone', name: 'backbone',
-                            symbolSize: 60.1554675, itemStyle: { normal: { color: '#c71969' } } },
+                            symbolSize: 60.1554675 },
                           { x: -818.97516, y: 624.50604, id: 'angular', name: 'angular',
-                            symbolSize: 60.7816025, itemStyle: { normal: { color: '#c71969' } } },
+                            symbolSize: 60.7816025 },
                           { x: -710.59204, y: 120.37976, id: 'socket.io', name: 'socket.io',
-                            symbolSize: 19.818306, itemStyle: { normal: { color: '#c71919' } } },
+                            symbolSize: 19.818306 },
                           { x: -127.03764, y: 477.03778, id: 'underscore', name: 'underscore',
-                            symbolSize: 40.0429485, itemStyle: { normal: { color: '#c76919' } } },
+                            symbolSize: 40.0429485 },
                           { x: -338.03128, y: -404.62427, id: 'vue.js', name: 'vue.js',
-                            symbolSize: 80.163814, itemStyle: { normal: { color: '#8419c7' } } },
+                            symbolSize: 80.163814 },
                           { x: 118.30771, y: -380.16626, id: 'lodash', name: 'lodash',
-                            symbolSize: 18.935852, itemStyle: { normal: { color: '#c76919' } } },
+                            symbolSize: 18.935852 },
                           { x: 381.10724, y: -531.28235, id: 'dateformat', name: 'dateformat',
-                            symbolSize: 30.3863845, itemStyle: { normal: { color: '#c71969' } } },
+                            symbolSize: 30.3863845 },
                           { x: -644.2716, y: -230.14833, id: 'express', name: 'express',
-                            symbolSize: 49.608772, itemStyle: { normal: { color: '#c71919' } } }]"
+                            symbolSize: 49.608772 }]"
                           [edges]="[{ source: 'jquery', target: 'backbone' },
                                     { source: 'jquery', target: 'vue.js' },
                                     { source: 'jquery', target: 'lodash' },
@@ -72,7 +72,7 @@
         <p>HTML: </p>
         <td-highlight lang="html">
           <![CDATA[
-          <td-chart [style.height.px]="500">
+          <td-chart [style.height.px]="500" [themeName]="'aqua-splash'">
             <td-chart-tooltip [trigger]="'item'">
               <ng-template let-params let-i="index" let-ticket="ticket" tdTooltipFormatter>
                 <ng-container *ngIf="params">
@@ -98,23 +98,23 @@
             </td-chart-tooltip>
             <td-chart-series td-graph
                             [data]="[{ x: -739.36383, y: -404.26147, id: 'jquery', name: 'jquery',
-                              symbolSize: 40.7252817, itemStyle: { normal: { color: '#4f19c7' } } },
+                              symbolSize: 40.7252817 },
                             { x: -134.2215, y: -862.7517, id: 'backbone', name: 'backbone',
-                              symbolSize: 60.1554675, itemStyle: { normal: { color: '#c71969' } } },
+                              symbolSize: 60.1554675 },
                             { x: -818.97516, y: 624.50604, id: 'angular', name: 'angular',
-                              symbolSize: 60.7816025, itemStyle: { normal: { color: '#c71969' } } },
+                              symbolSize: 60.7816025 },
                             { x: -710.59204, y: 120.37976, id: 'socket.io', name: 'socket.io',
-                              symbolSize: 19.818306, itemStyle: { normal: { color: '#c71919' } } },
+                              symbolSize: 19.818306 },
                             { x: -127.03764, y: 477.03778, id: 'underscore', name: 'underscore',
-                              symbolSize: 40.0429485, itemStyle: { normal: { color: '#c76919' } } },
+                              symbolSize: 40.0429485 },
                             { x: -338.03128, y: -404.62427, id: 'vue.js', name: 'vue.js',
-                              symbolSize: 80.163814, itemStyle: { normal: { color: '#8419c7' } } },
+                              symbolSize: 80.163814 },
                             { x: 118.30771, y: -380.16626, id: 'lodash', name: 'lodash',
-                              symbolSize: 18.935852, itemStyle: { normal: { color: '#c76919' } } },
+                              symbolSize: 18.935852 },
                             { x: 381.10724, y: -531.28235, id: 'dateformat', name: 'dateformat',
-                              symbolSize: 30.3863845, itemStyle: { normal: { color: '#c71969' } } },
+                              symbolSize: 30.3863845 },
                             { x: -644.2716, y: -230.14833, id: 'express', name: 'express',
-                              symbolSize: 49.608772, itemStyle: { normal: { color: '#c71919' } } }]"
+                              symbolSize: 49.608772 }]"
                             [edges]="[{ source: 'jquery', target: 'backbone' },
                                       { source: 'jquery', target: 'vue.js' },
                                       { source: 'jquery', target: 'lodash' },

diff --git a/src/app/components/types/graph/graph.component.ts b/src/app/components/types/graph/graph.component.ts
@@ -1,4 +1,5 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { ChartThemeSelectorService } from '../../../utilities/theme';
 
 @Component({
   selector: 'types-graph',
@@ -68,4 +69,8 @@ export class TypesGraphComponent {
       },
     ],
   };
+
+  constructor(
+    public themeSelector: ChartThemeSelectorService,
+  ) {}
 }
diff --git a/src/app/components/types/line/line.component.html b/src/app/components/types/line/line.component.html
@@ -1,12 +1,12 @@
 <mat-card flex>
   <mat-card-title>Line</mat-card-title>
-  <mat-card-subtitle>Individual component configurations, series, tooltip, x & y axis, series tooltip</mat-card-subtitle>
+  <mat-card-subtitle>Individual component configurations, series, tooltip, x & y axis, series tooltip and theme</mat-card-subtitle>
   <mat-divider></mat-divider>
   <mat-card-content>
     <mat-tab-group mat-stretch-tabs dynamicHeight>
       <mat-tab>
         <ng-template matTabLabel>Demo</ng-template>
-        <td-chart [style.height.px]="300">
+        <td-chart [style.height.px]="300" [themeName]="themeSelector.selected$ | async">
           <td-chart-tooltip [trigger]="'item'">
           </td-chart-tooltip>
           <td-chart-x-axis [show]="true"
@@ -40,8 +40,7 @@
                               ]
                             }]"
                             [name]="'Revenue'"
-                            [symbol]="'roundRect'"
-                            [color]="'#F2724B'">
+                            [symbol]="'roundRect'">
             <td-chart-series-tooltip>
               <ng-template let-params let-ticket="ticket" tdTooltipFormatter>
                 <ng-container *ngIf="params">
@@ -82,8 +81,7 @@
                               ]
                             }]"
                             [name]="'Sales'"
-                            [symbol]="'roundRect'"
-                            [color]="'#3A4950'">
+                            [symbol]="'roundRect'">
             <td-chart-series-tooltip>
               <ng-template let-params let-ticket="ticket" tdTooltipFormatter>
                 <ng-container *ngIf="params">
@@ -109,7 +107,7 @@
         <p>HTML: </p>
         <td-highlight lang="html">
           <![CDATA[
-            <td-chart [style.height.px]="300">
+            <td-chart [style.height.px]="300" [themeName]="'aqua-splash'">
               <td-chart-tooltip [trigger]="'item'">
               </td-chart-tooltip>
               <td-chart-x-axis [show]="true"
@@ -143,8 +141,7 @@
                                   ]
                                 }]"
                                 [name]="'Revenue'"
-                                [symbol]="'roundRect'"
-                                [color]="'#F2724B'">
+                                [symbol]="'roundRect'">
                 <td-chart-series-tooltip>
                   <ng-template let-params let-ticket="ticket" tdTooltipFormatter>
                     <ng-container *ngIf="params">
@@ -185,8 +182,7 @@
                                   ]
                                 }]"
                                 [name]="'Sales'"
-                                [symbol]="'roundRect'"
-                                [color]="'#3A4950'">
+                                [symbol]="'roundRect'">
                 <td-chart-series-tooltip>
                   <ng-template let-params let-ticket="ticket" tdTooltipFormatter>
                     <ng-container *ngIf="params">

diff --git a/src/app/components/types/line/line.component.ts b/src/app/components/types/line/line.component.ts
@@ -1,4 +1,5 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { ChartThemeSelectorService } from '../../../utilities/theme';
 
 @Component({
   selector: 'types-line',
@@ -78,4 +79,8 @@ export class TypesLineComponent {
       showContent: true,
     },
   };
+
+  constructor(
+    public themeSelector: ChartThemeSelectorService,
+  ) {}
 }
diff --git a/src/app/components/types/sankey/sankey.component.html b/src/app/components/types/sankey/sankey.component.html
@@ -1,12 +1,12 @@
 <mat-card flex>
   <mat-card-title>Sankey</mat-card-title>
-  <mat-card-subtitle>Individual component configurations, series, tooltip, x & y axis, series tooltip</mat-card-subtitle>
+  <mat-card-subtitle>Individual component configurations, series, tooltip, x & y axis, series tooltip and theme</mat-card-subtitle>
   <mat-divider></mat-divider>
   <mat-card-content>
     <mat-tab-group mat-stretch-tabs dynamicHeight>
       <mat-tab>
         <ng-template matTabLabel>Demo</ng-template>
-        <td-chart [style.height.px]="300">
+        <td-chart [style.height.px]="300" [themeName]="themeSelector.selected$ | async">
           <td-chart-series td-sankey
                             [focusNodeAdjacency]="'allEdges'"
                             [right]="40"
@@ -73,7 +73,7 @@
         <p>HTML: </p>
         <td-highlight lang="html">
           <![CDATA[
-            <td-chart [style.height.px]="300">
+            <td-chart [style.height.px]="300" [themeName]="'aqua-splash'">
               <td-chart-series td-sankey
                                 [focusNodeAdjacency]="'allEdges'"
                                 [right]="40"

diff --git a/src/app/components/types/sankey/sankey.component.ts b/src/app/components/types/sankey/sankey.component.ts
@@ -1,4 +1,5 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { ChartThemeSelectorService } from '../../../utilities/theme';
 
 @Component({
   selector: 'types-sankey',
@@ -53,4 +54,8 @@ export class TypesSankeyComponent {
       },
     ],
   };
+
+  constructor(
+    public themeSelector: ChartThemeSelectorService,
+  ) {}
 }