feat(series): add treemap series type (closes #7) (#38)

* feat(echarts): Add treemap as a chart option to Covalent E-Charts

* fix linting

* removing json data file

* removing config options that are handled in series component now

* feat(): reformat demo example and rename TreeMap to Treemap

* feat(): demo [leafDepth]="2" in treemap

src/app/components/components.component.ts

@@ -23,37 +23,36 @@ export class ComponentsComponent {
 
   routes: Object[] = [
     {
-      description: 'Atomic and Config Options',
       icon: 'insert_chart',
       route: ['types', 'bar'],
       title: 'Bar',
     },
     {
-      description: 'Atomic and Config Options',
       icon: 'show_chart',
       route: ['types', 'line'],
       title: 'Line',
     },
     {
-      description: 'Atomic and Config Options',
       icon: 'bubble_chart',
       route: ['types', 'scatter'],
       title: 'Scatter',
     },
     {
-      description: 'Example using line/bar and 2 y-axis',
       icon: 'multiline_chart',
       route: ['types', 'combination'],
       title: 'Combination',
     },
     {
-      description: 'Atomic and Config Options',
       icon: 'share',
       route: ['types', 'tree'],
       title: 'Tree',
     },
     {
-      description: 'Atomic and Config Options',
+      icon: 'dashboard',
+      route: ['types', 'treemap'],
+      title: 'Treemap',
+    },
+    {
       icon: 'call_split',
       route: ['types', 'sankey'],
       title: 'Sankey',

src/app/components/overview/overview.component.ts

@@ -42,6 +42,12 @@ export class OverviewComponent {
   },
   {
     color: 'green-A700',
+    icon: 'dashboard',
+    route: ['types', 'treemap'],
+    title: 'Treemap Chart',
+  },
+  {
+    color: 'yellow-A700',
     icon: 'call_split',
     route: ['types', 'sankey'],
     title: 'Sankey Chart',

src/app/components/types/treemap/treemap.component.ts

@@ -0,0 +1,195 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+  selector: 'types-treemap',
+  templateUrl: './treemap.component.html',
+  styleUrls: ['./treemap.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  preserveWhitespaces: true,
+})
+export class TypesTreemapComponent {
+  // Series data
+  data: any = [
+    {
+      value: 40,
+      name: 'Accessibility',
+      path: 'Accessibility',
+    },
+    {
+      value: 180,
+      name: 'Accounts',
+      path: 'Accounts',
+      children: [
+        {
+          value: 76,
+          name: 'Access',
+          path: 'Accounts/Access',
+          children: [
+            {
+              value: 12,
+              name: 'DefaultAccessPlugin.bundle',
+              path: 'Accounts/Access/DefaultAccessPlugin.bundle',
+            },
+            {
+              value: 28,
+              name: 'FacebookAccessPlugin.bundle',
+              path: 'Accounts/Access/FacebookAccessPlugin.bundle',
+            },
+            {
+              value: 20,
+              name: 'LinkedInAccessPlugin.bundle',
+              path: 'Accounts/Access/LinkedInAccessPlugin.bundle',
+            },
+            {
+              value: 16,
+              name: 'TencentWeiboAccessPlugin.bundle',
+              path: 'Accounts/Access/TencentWeiboAccessPlugin.bundle',
+            },
+          ],
+        },
+        {
+          value: 92,
+          name: 'Authentication',
+          path: 'Accounts/Authentication',
+          children: [
+            {
+              value: 24,
+              name: 'FacebookAuthenticationPlugin.bundle',
+              path: 'Accounts/Authentication/FacebookAuthenticationPlugin.bundle',
+            },
+            {
+              value: 16,
+              name: 'LinkedInAuthenticationPlugin.bundle',
+              path: 'Accounts/Authentication/LinkedInAuthenticationPlugin.bundle',
+            },
+            {
+              value: 20,
+              name: 'TencentWeiboAuthenticationPlugin.bundle',
+              path: 'Accounts/Authentication/TencentWeiboAuthenticationPlugin.bundle',
+            },
+            {
+              value: 16,
+              name: 'TwitterAuthenticationPlugin.bundle',
+              path: 'Accounts/Authentication/TwitterAuthenticationPlugin.bundle',
+            },
+            {
+              value: 16,
+              name: 'WeiboAuthenticationPlugin.bundle',
+              path: 'Accounts/Authentication/WeiboAuthenticationPlugin.bundle',
+            },
+          ],
+        },
+        {
+          value: 12,
+          name: 'Notification',
+          path: 'Accounts/Notification',
+          children: [
+            {
+              value: 12,
+              name: 'SPAAccountsNotificationPlugin.bundle',
+              path: 'Accounts/Notification/SPAAccountsNotificationPlugin.bundle',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      value: 1904,
+      name: 'AddressBook Plug-Ins',
+      path: 'AddressBook Plug-Ins',
+      children: [
+        {
+          value: 744,
+          name: 'CardDAVPlugin.sourcebundle',
+          path: 'AddressBook Plug-Ins/CardDAVPlugin.sourcebundle',
+          children: [
+            {
+              value: 744,
+              name: 'Contents',
+              path: 'AddressBook Plug-Ins/CardDAVPlugin.sourcebundle/Contents',
+            },
+          ],
+        },
+        {
+          value: 28,
+          name: 'DirectoryServices.sourcebundle',
+          path: 'AddressBook Plug-Ins/DirectoryServices.sourcebundle',
+          children: [
+            {
+              value: 28,
+              name: 'Contents',
+              path: 'AddressBook Plug-Ins/DirectoryServices.sourcebundle/Contents',
+            },
+          ],
+        },
+        {
+          value: 680,
+          name: 'Exchange.sourcebundle',
+          path: 'AddressBook Plug-Ins/Exchange.sourcebundle',
+          children: [
+            {
+              value: 680,
+              name: 'Contents',
+              path: 'AddressBook Plug-Ins/Exchange.sourcebundle/Contents',
+            },
+          ],
+        },
+        {
+          value: 432,
+          name: 'LDAP.sourcebundle',
+          path: 'AddressBook Plug-Ins/LDAP.sourcebundle',
+          children: [
+            {
+              value: 432,
+              name: 'Contents',
+              path: 'AddressBook Plug-Ins/LDAP.sourcebundle/Contents',
+            },
+          ],
+        },
+        {
+          value: 20,
+          name: 'LocalSource.sourcebundle',
+          path: 'AddressBook Plug-Ins/LocalSource.sourcebundle',
+          children: [
+            {
+              value: 20,
+              name: 'Contents',
+              path: 'AddressBook Plug-Ins/LocalSource.sourcebundle/Contents',
+            },
+          ],
+        },
+      ],
+    },
+  ];
+
+  // CHART JS Config object
+  config: any = {
+    grid: { borderColor: 'transparent' },
+    xAxis: { show: false },
+    yAxis: { show: false },
+    series: [
+      {
+        type: 'treemap',
+        data: this.data,
+
+        top: '10%',
+        left: '10%',
+        bottom: '10%',
+        right: '10%',
+        itemStyle: {
+          normal: {
+            borderColor: '#fff',
+          },
+        },
+        levels: [{ itemStyle: { normal: { borderWidth: 0, gapWidth: 5 } } }, 
+                 { itemStyle: { normal: { gapWidth: 1 } } },
+                 { colorSaturation: [0.35, 0.5], itemStyle: { normal: { gapWidth: 1, borderColorSaturation: 0.6 } } },
+                ],
+        label: {
+          show: true,
+          formatter: '{b}',
+        },
+      },
+    ],
+  };
+}

src/app/components/types/types.module.ts

@@ -29,6 +29,7 @@ import { TypesCombinationComponent } from './combination/combination.component';
 import { TypesTreeComponent } from './tree/tree.component';
 import { TypesSankeyComponent } from './sankey/sankey.component';
 import { TypesGraphComponent } from './graph/graph.component';
+import { TypesTreemapComponent } from './treemap/treemap.component';
 
 import { CovalentBaseEchartsModule } from '@covalent/echarts/base';
 import { CovalentLineEchartsModule } from '@covalent/echarts/line';
@@ -37,6 +38,7 @@ import { CovalentScatterEchartsModule } from '@covalent/echarts/scatter';
 import { CovalentTreeEchartsModule } from '@covalent/echarts/tree';
 import { CovalentSankeyEchartsModule } from '@covalent/echarts/sankey';
 import { CovalentGraphEchartsModule } from '@covalent/echarts/graph';
+import { CovalentTreemapEchartsModule } from '@covalent/echarts/treemap';
 import { CovalentTooltipEchartsModule } from '@covalent/echarts/tooltip';
 import { moduleRoutes } from './types.routes';
 
@@ -75,6 +77,7 @@ import { DocumentationToolsModule } from '../../documentation-tools';
     CovalentTreeEchartsModule,
     CovalentGraphEchartsModule,
     CovalentSankeyEchartsModule,
+    CovalentTreemapEchartsModule,
     // internal
     DocumentationToolsModule,
     moduleRoutes,
@@ -87,6 +90,7 @@ import { DocumentationToolsModule } from '../../documentation-tools';
     TypesTreeComponent,
     TypesSankeyComponent,
     TypesGraphComponent,
+    TypesTreemapComponent,
   ],
 })
 export class TypesModule {}

src/app/components/types/types.routes.ts

@@ -5,6 +5,7 @@ import { TypesLineComponent } from './line/line.component';
 import { TypesScatterComponent } from './scatter/scatter.component';
 import { TypesCombinationComponent } from './combination/combination.component';
 import { TypesTreeComponent } from './tree/tree.component';
+import { TypesTreemapComponent } from './treemap/treemap.component';
 import { TypesSankeyComponent } from './sankey/sankey.component';
 import { TypesGraphComponent } from './graph/graph.component';
 
@@ -31,6 +32,10 @@ const routes: Routes = [{
     component: TypesGraphComponent,
     path: 'graph',
   },
+  {
+    component: TypesTreemapComponent,
+    path: 'treemap',
+  },
 ];
 
 export const moduleRoutes: any = RouterModule.forChild(routes);