diff --git a/src/app/components/components.component.ts b/src/app/components/components.component.ts index 9be9712efa..c4fa99f8d3 100644 --- a/src/app/components/components.component.ts +++ b/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', diff --git a/src/app/components/overview/overview.component.ts b/src/app/components/overview/overview.component.ts index ab583e101a..3870795499 100644 --- a/src/app/components/overview/overview.component.ts +++ b/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', diff --git a/src/app/components/types/tree/tree.component.html b/src/app/components/types/tree/tree.component.html index 7e6400b5cd..747a431a5e 100644 --- a/src/app/components/types/tree/tree.component.html +++ b/src/app/components/types/tree/tree.component.html @@ -1,12 +1,324 @@ -
- - Tree - Individual component configurations, series, tooltip - - - - - Demo + + Tree + Individual component configurations, series, tooltip + + + + + Demo + + + + +
+ + info + + {{params.name}} +
+ + + + + + + + + Code +

HTML:

+ + @@ -16,7 +328,7 @@ info - {{params.name}} + { {params.name} }
@@ -314,326 +626,12 @@ [label]="{ backgroundColor: '#3A4950', color: 'white', padding: [2.5, 5], borderRadius: 10, fontSize: 9, distance: 5, position: 'left' }"> - - - Code -

HTML:

- - - - - -
- - info - - { {params.name} } -
- - - - - - - ]]> - - - - - - + ]]> + + + + + Tree (JS Object) Configuration object used to render a chart diff --git a/src/app/components/types/treemap/treemap.component.html b/src/app/components/types/treemap/treemap.component.html new file mode 100644 index 0000000000..a6a9997757 --- /dev/null +++ b/src/app/components/types/treemap/treemap.component.html @@ -0,0 +1,348 @@ + + Treemap + Individual component configurations, series, tooltip + + + + + Demo + + + + +
+ + info + + {{params.name}} +
+ + + + + + + + + Code +

HTML:

+ + + + + +
+ + info + + { {params.name} } +
+ + + + + + + ]]> + + + + + + + Tree Map (JS Object) + Configuration object used to render a chart + + + + + Demo + + + + + Code +

HTML:

+ + + + ]]> + +

config JSON:

+ + + + + + + + + diff --git a/src/app/components/types/treemap/treemap.component.scss b/src/app/components/types/treemap/treemap.component.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/app/components/types/treemap/treemap.component.ts b/src/app/components/types/treemap/treemap.component.ts new file mode 100644 index 0000000000..1d61765eb9 --- /dev/null +++ b/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}', + }, + }, + ], + }; +} diff --git a/src/app/components/types/types.module.ts b/src/app/components/types/types.module.ts index d461fe43a1..7b51d126bf 100644 --- a/src/app/components/types/types.module.ts +++ 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 {} diff --git a/src/app/components/types/types.routes.ts b/src/app/components/types/types.routes.ts index 75db13802e..a1186b55ca 100644 --- a/src/app/components/types/types.routes.ts +++ b/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); diff --git a/src/platform/echarts/treemap/README.md b/src/platform/echarts/treemap/README.md new file mode 100644 index 0000000000..23af96a45f --- /dev/null +++ b/src/platform/echarts/treemap/README.md @@ -0,0 +1,184 @@ +# td-chart-series[td-treemap] + +`td-chart-series[td-treemap]` element generates a treemap series echarts visualization inside a `td-chart`. Its the equivalent of creating a JS series object `type="treemap"` in echarts. + +## API Summary + +#### Inputs + ++ config?: any + + Sets the JS config object if you choose to not use the property inputs. + + Note: property inputs override JS config conject properties. + +There are also lots of property inputs like: + ++ id?: string + + It can be used to refer the component in option or API. ++ name?: string + + Series name used for displaying in tooltip and filtering with legend. ++ leafDepth?: number + + Represents how many levels are shown at most. ++ roam?: boolean + + Whether to enable dragging roam (move and zoom). + +And so many more.. for more info [click here](https://ecomfe.github.io/echarts-doc/public/en/option.html#series-treemap) + +## Setup + +Import the [CovalentTreemapEchartsModule] in your NgModule: + +```typescript +import { CovalentBaseEchartsModule } from '@covalent/echarts/base'; +import { CovalentTreemapEchartsModule } from '@covalent/echarts/treemap'; +@NgModule({ + imports: [ + CovalentBaseEchartsModule, + CovalentTreemapEchartsModule, + ... + ], + ... +}) +export class MyModule {} +``` + +## Usage + +Basic Example: + +```html + + + + +``` diff --git a/src/platform/echarts/treemap/index.ts b/src/platform/echarts/treemap/index.ts new file mode 100644 index 0000000000..7e1a213e3e --- /dev/null +++ b/src/platform/echarts/treemap/index.ts @@ -0,0 +1 @@ +export * from './public-api'; diff --git a/src/platform/echarts/treemap/package.json b/src/platform/echarts/treemap/package.json new file mode 100644 index 0000000000..dedb72ce9c --- /dev/null +++ b/src/platform/echarts/treemap/package.json @@ -0,0 +1,7 @@ +{ + "ngPackage": { + "lib": { + "entryFile": "index.ts" + } + } +} diff --git a/src/platform/echarts/treemap/public-api.ts b/src/platform/echarts/treemap/public-api.ts new file mode 100644 index 0000000000..cb21e9be1d --- /dev/null +++ b/src/platform/echarts/treemap/public-api.ts @@ -0,0 +1,2 @@ +export * from './treemap.module'; +export * from './treemap.component'; diff --git a/src/platform/echarts/treemap/treemap.component.ts b/src/platform/echarts/treemap/treemap.component.ts new file mode 100644 index 0000000000..4f8763db1c --- /dev/null +++ b/src/platform/echarts/treemap/treemap.component.ts @@ -0,0 +1,198 @@ +import { + Component, + Input, + ChangeDetectionStrategy, + forwardRef, +} from '@angular/core'; + +import { + TdChartOptionsService, + ITdItemStyle, + ITdSeriesTooltip, + ITdLabel, + ITdSeries, + TdSeriesComponent, + ITdEmphasis, + ITdShadow, +} from '@covalent/echarts/base'; + +/** + * ECHART OPTION DOCS + * https://ecomfe.github.io/echarts-examples/public/index.html#chart-type-treemap + * + */ + +export interface ITdTreemapEmphasisLineStyle extends ITdShadow { + color?: any; + width?: number; + curveness?: number; +} + +export interface ITdTreemapEmphasis extends ITdEmphasis { + lineStyle: ITdTreemapEmphasisLineStyle; +} + +export interface ITdTreemapUpperLabel { + show?: boolean; + position?: string | any[]; + distance?: string | number; + rotate?: string | number; + offset?: any[]; + formatter?: string; + color?: any; + fontStyle?: string; + fontWeight?: string; + fontFamily?: string; + fontSize?: string | number; + align?: string; + verticalAlign?: string; + lineHeight?: string | number; + backgroundColor?: any; + borderColor?: string; + borderWidth?: string | number; + borderRadius?: string | number; + padding?: number | any[]; + shadowColor?: string; + shadowBlur?: string | number; + shadowOffsetX?: string | number; + shadowOffsetY?: string | number; + width?: string | number; + height?: string | number; + textBorderColor?: string; + textBorderWidth?: string | number; + textShadowColor?: string; + textShadowBlur?: string | number; + textShadowOffsetX?: string | number; + textShadowOffsetY?: string | number; + rich: any; + ellipsis: any; +} + +export interface ITdTreemapBreadcrumb { + show?: boolean; + left?: string | number; + top?: string | number; + right?: string | number; + bottom?: string | number; + height?: string | number; + emptyItemWidth?: string | number; + itemStyle?: ITdItemStyle; + emphasis?: ITdTreemapEmphasis; +} + +interface ITdTreemapSeries extends ITdSeries<'treemap'> { + zlevel?: number; + z?: number; + left?: string | number; + top?: string | number; + right?: string | number; + bottom?: string | number; + width?: string | number; + height?: string | number; + squareRatio?: string | number; + leafDepth?: string | number; + drillDownIcon?: string; + roam?: boolean | string; + nodeClick?: boolean | string; + zoomToNodeRatio?: string | number; + levels?: any[]; + silent?: boolean; + visualDimension?: string | number; + visualMin?: string | number; + visualMax?: string | number; + colorAlpha?: any[]; + colorSaturation?: string | number; + colorMappingBy?: string; + visibleMin?: string | number; + childrenVisibleMin?: string | number; + itemStyle?: ITdItemStyle; + label?: ITdLabel; + upperLabel?: ITdTreemapUpperLabel; + breadcrumb?: ITdTreemapBreadcrumb; + emphasis?: ITdTreemapEmphasis; + data: any[]; +} + +@Component({ + selector: 'td-chart-series[td-treemap]', + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + providers: [{ + provide: TdSeriesComponent, useExisting: forwardRef(() => TdChartSeriesTreemapComponent), + }], +}) +export class TdChartSeriesTreemapComponent extends TdSeriesComponent<'treemap'> implements ITdTreemapSeries { + + @Input('config') config: any = {}; + @Input('id') id: string; + @Input('name') name: string; + @Input('data') data: any; + @Input('zlevel') zlevel: number; + @Input('z') z: number; + @Input('left') left: string | number; + @Input('top') top: string | number; + @Input('right') right: string | number; + @Input('bottom') bottom: string | number; + @Input('width') width: string | number; + @Input('height') height: string | number; + @Input('squareRatio') squareRatio: string | number; + @Input('leafDepth') leafDepth: string | number; + @Input('drillDownIcon') drillDownIcon: string; + @Input('roam') roam: boolean | string; + @Input('nodeClick') nodeClick: boolean | string; + @Input('zoomToNodeRatio') zoomToNodeRatio: string | number; + @Input('levels') levels: any[]; + @Input('silent') silent: boolean; + @Input('visualDimension') visualDimension: string | number; + @Input('visualMin') visualMin: string | number; + @Input('visualMax') visualMax: string | number; + @Input('colorAlpha') colorAlpha: any[]; + @Input('colorSaturation') colorSaturation: string | number; + @Input('colorMappingBy') colorMappingBy: string; + @Input('visibleMin') visibleMin: string | number; + @Input('childrenVisibleMin') childrenVisibleMin: string | number; + @Input('itemStyle') itemStyle: ITdItemStyle; + @Input('label') label: ITdLabel; + @Input('upperLabel') upperLabel: ITdTreemapUpperLabel; + @Input('breadcrumb') breadcrumb: ITdTreemapBreadcrumb; + @Input('emphasis') emphasis: ITdTreemapEmphasis; + @Input('tooltip') tooltip: ITdSeriesTooltip; + + constructor(_optionsService: TdChartOptionsService) { + super('treemap', _optionsService); + } + + getConfig(): any { + return { + zlevel: this.zlevel, + z: this.z, + left: this.left, + top: this.top, + right: this.right, + bottom: this.bottom, + width: this.width, + height: this.height, + squareRatio: this.squareRatio, + leafDepth: this.leafDepth, + drillDownIcon: this.drillDownIcon, + roam: this.roam, + nodeClick: this.nodeClick, + zoomToNodeRatio: this.zoomToNodeRatio, + levels: this.levels, + silent: this.silent, + visualDimension: this.visualDimension, + visualMin: this.visualMin, + visualMax: this.visualMax, + colorAlpha: this.colorAlpha, + colorSaturation: this.colorSaturation, + colorMappingBy: this.colorMappingBy, + visibleMin: this.visibleMin, + childrenVisibleMin: this.childrenVisibleMin, + itemStyle: this.itemStyle, + label: this.label, + upperLabel: this.upperLabel, + breadcrumb: this.breadcrumb, + emphasis: this.emphasis, + }; + } +} diff --git a/src/platform/echarts/treemap/treemap.module.ts b/src/platform/echarts/treemap/treemap.module.ts new file mode 100644 index 0000000000..300de21152 --- /dev/null +++ b/src/platform/echarts/treemap/treemap.module.ts @@ -0,0 +1,25 @@ +import { NgModule, Type } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import 'echarts/lib/chart/treemap'; + +import { TdChartSeriesTreemapComponent } from './treemap.component'; + +export const TREEMAP_MODULE_COMPONENTS: Type[] = [ + TdChartSeriesTreemapComponent, +]; + +@NgModule({ + imports: [ + CommonModule, + ], + declarations: [ + TREEMAP_MODULE_COMPONENTS, + ], + exports: [ + TREEMAP_MODULE_COMPONENTS, + ], +}) +export class CovalentTreemapEchartsModule { + +}