-
Notifications
You must be signed in to change notification settings - Fork 357
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feature(charts): d3 responsive line/bar/area/combo charts (#52)
* initial Line Chart commit * changes for individual modules load * commit for reviewing build script changes d3 import statements * individual packages added in platform package config * support for different content types added * update(chart): styles * multi line chart support; updated docs; modified sample files; colors passed as config * bar chart added; color config added * docs updated for bar chart * build script modified for d3 colors-color brewer library * default color palette added for bar chart; drop shdows added as part of config * docs modified, config names modified, icons added * changed chart rendering elemnt from id to class * update(bar-chart): default zDepth 1 values * update(bar-chart-component): add shadow color & opacity * added opacity & shadowColor as part of config; more typedefs added * update(zdepth): zDepth 2 by defafault, fill opacity 1 - TODO if no fillOpacity, don’t render feComponentTransfer * feature(chart): x and y axis ticks styles & grid * parent directive td-chart added * custom color palette, default color palette & docs for td-charts * file names modified based on component names; css moved to respective files * Charts attributes migrated from individual charts to md-charts * nomenclature modified for some params * bringing foundation stuff to td-charts * sorting and transition added; sass fixed * area chart added with transitions * support for multiple similar charts added; changes for DOM; reusability; parameters name change * update(charts): area on top of grid * attributes added for transitions; error handling for bar chart color palette * time-series support added; code cleanup * removed contentType, added hideAxis, shadow working on area chart * remove system-config.ts * mover charts in overview/sidenav to be in the group of `viz` * removed d3 from scripts in angular-cli.json and used require to include it into components * chart height added; grid/ticks became optional; bottomAxisTitle added * update(chart): add material2 scss theme - removed unneccessary styles - charts seem to be responsive w/o responsive class * update(charts): relocated bottom axis label to center instead or right * update(chart-line): remove unnecessary styles * update(docs): added sparkline example - updated colors * opacity issue fixed * added `data` input, validations, refactored code + bugfix for areachart * made opacity 1 by default * forgot one line in the merge lol * abstracted titles into abstract class * added defaults for fillOpacity and chartHeight * removed inputs to allow default to work in demo * draw all the charts into parent container so its easier to implement multiple charts later on * update(charts): try combo chart - add json data * changed to ngOnInit so inputs get loaded * abstracted code into setters in main charts component * remove sorting for now * added axis linked to charts * moved code around a little bit * update(chart-theme): default domain stroke color * update(charts): smaller default margins * udpate(charts): proper color palette & hide some grids * changes first point * removed grid from td-charts and added into axis components * default padding and param added for bar chart * added margin input * bar chart transitions modified * add offset to area-chart and line-chart only if bar-chart sibling * added bar padding to combo chart demo * allow grids to be drawn when no ticks * update(charts): docs examples and attr * first pass on updating docs * docs * updated data-table desc * data table desc fix * updated readme and setup * added axes in readme
- Loading branch information
1 parent
2bc5234
commit c14d6f1
Showing
40 changed files
with
1,939 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
476 changes: 476 additions & 0 deletions
476
src/app/components/components/charts/charts.component.html
Large diffs are not rendered by default.
Oops, something went wrong.
Empty file.
181 changes: 181 additions & 0 deletions
181
src/app/components/components/charts/charts.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,181 @@ | ||
| import { Component} from '@angular/core'; | ||
|
|
||
| @Component({ | ||
| selector: 'charts-demo', | ||
| styleUrls: ['charts.component.scss'], | ||
| templateUrl: 'charts.component.html', | ||
| }) | ||
| export class ChartsDemoComponent { | ||
|
|
||
| chartsAttr: Object[] = [{ | ||
| description: 'Sets the Chart Title', | ||
| name: 'title?', | ||
| type: 'string', | ||
| }, { | ||
| description: 'Sets the height of the chart', | ||
| name: 'chartHeight?', | ||
| type: 'string', | ||
| }, { | ||
| description: 'Set the parameters for shadowDepth (size, y offset, x offset, blur)', | ||
| name: 'shadowDepth?', | ||
| type: 'array[]', | ||
| }, { | ||
| description: 'Sets shadow color for the charts (rgba preferred)', | ||
| name: 'shadowColor?', | ||
| type: 'string', | ||
| }, { | ||
| description: 'Sets opacity for the charts', | ||
| name: 'fillOpacity?', | ||
| type: 'number', | ||
| }, { | ||
| description: 'Sets SVG margin (top, right, bottom, left)', | ||
| name: 'margin?', | ||
| type: 'IChartMargin', | ||
| }]; | ||
|
|
||
| barChartAttrs: Object[] = [{ | ||
| description: 'Sets data source for the Bar Chart', | ||
| name: 'dataSrc?', | ||
| type: 'string', | ||
| }, { | ||
| description: 'Sets data for the Bar Chart. Overrides [dataSrc]', | ||
| name: 'data?', | ||
| type: 'any', | ||
| }, { | ||
| description: 'Sets the name for bottom axis; should match with the column name defined in data source', | ||
| name: 'bottomAxis?', | ||
| type: 'string', | ||
| }, { | ||
| description: 'Sets the name for left axis; should match with the bar column name defined in data source', | ||
| name: 'columns?', | ||
| type: 'string', | ||
| }, { | ||
| description: 'Select two material design color palettes (red, pink, blue, etc) and will blend between for you', | ||
| name: 'colors?', | ||
| type: 'any[]', | ||
| }, { | ||
| description: 'Sets the flag as true or false for transitions', | ||
| name: 'transition?', | ||
| type: 'boolean', | ||
| }, { | ||
| description: 'Sets the duration for transition', | ||
| name: 'transitionDuration?', | ||
| type: 'number', | ||
| }, { | ||
| description: 'Sets the delay time before transition starts', | ||
| name: 'transitionDelay?', | ||
| type: 'number', | ||
| }, { | ||
| description: 'Sets spacing between bars', | ||
| name: 'padding?', | ||
| type: 'number', | ||
| }]; | ||
|
|
||
| lineChartAttrs: Object[] = [{ | ||
| description: 'Sets data source for the Line Chart', | ||
| name: 'dataSrc?', | ||
| type: 'string', | ||
| }, { | ||
| description: 'Sets data for the Line Chart. Overrides [dataSrc]', | ||
| name: 'data?', | ||
| type: 'any', | ||
| }, { | ||
| description: 'Sets flag as true or false for time series data', | ||
| name: 'timeSeries?', | ||
| type: 'boolean', | ||
| }, { | ||
| description: 'Sets the name for bottom axis; should match with the column name defined in data source', | ||
| name: 'bottomAxis?', | ||
| type: 'string', | ||
| }, { | ||
| description: 'Sets the name for single/multi lines; should match with the columns names defined in data source', | ||
| name: 'columns?', | ||
| type: 'array[]', | ||
| }, { | ||
| description: 'Sets the title for single/multi lines', | ||
| name: 'titles?', | ||
| type: 'array[]', | ||
| }, { | ||
| description: 'Sets the rgba or hex color for single/multi lines', | ||
| name: 'colors?', | ||
| type: 'string', | ||
| }, { | ||
| description: 'Sets the flag as true or false for transitions', | ||
| name: 'transition?', | ||
| type: 'boolean', | ||
| }, { | ||
| description: 'Sets the duration for transition', | ||
| name: 'transitionDuration?', | ||
| type: 'number', | ||
| }, { | ||
| description: 'Sets the delay time before transition starts', | ||
| name: 'transitionDelay?', | ||
| type: 'number', | ||
| }]; | ||
|
|
||
| areaChartAttrs: Object[] = [{ | ||
| description: 'Sets data source for the Bar Chart', | ||
| name: 'dataSrc?', | ||
| type: 'string', | ||
| }, { | ||
| description: 'Sets data for the Line Chart. Overrides [dataSrc]', | ||
| name: 'data?', | ||
| type: 'any', | ||
| }, { | ||
| description: 'Sets the name for bottom axis; should match with the column name defined in data source', | ||
| name: 'bottomAxis?', | ||
| type: 'string', | ||
| }, { | ||
| description: 'Sets the name for single/multi lines; should match with the columns names defined in data source', | ||
| name: 'columns?', | ||
| type: 'array[]', | ||
| }, { | ||
| description: 'Sets the rgba or hex color for area chart and stroke', | ||
| name: 'colors?', | ||
| type: 'string', | ||
| }, { | ||
| description: 'Sets the flag as true or false for transitions', | ||
| name: 'transition?', | ||
| type: 'boolean', | ||
| }, { | ||
| description: 'Sets the duration for transition', | ||
| name: 'transitionDuration?', | ||
| type: 'number', | ||
| }, { | ||
| description: 'Sets the delay time before transition starts', | ||
| name: 'transitionDelay?', | ||
| type: 'number', | ||
| }]; | ||
|
|
||
| axisAttrs: Object[] = [{ | ||
| description: 'Reference to the chart', | ||
| name: 'link', | ||
| type: 'Any [td-chart-xxx] element', | ||
| }, { | ||
| description: 'Sets display as true/false for rendering ticks', | ||
| name: 'ticks?', | ||
| type: 'boolean', | ||
| }, { | ||
| description: 'Sets display as true/false for rendering grid lines', | ||
| name: 'grid?', | ||
| type: 'boolean', | ||
| }, { | ||
| description: 'Sets display as true/false for rendering entire axis', | ||
| name: 'show?', | ||
| type: 'boolean', | ||
| }]; | ||
|
|
||
| jsonData: any = [ | ||
| {'x': 'Jan', 'y': 70}, | ||
| {'x': 'Feb', 'y': 190}, | ||
| {'x': 'Mar', 'y': 220}, | ||
| {'x': 'Apr', 'y': 160}, | ||
| {'x': 'May', 'y': 240}, | ||
| {'x': 'Jun', 'y': 70}, | ||
| {'x': 'Jul', 'y': 190}, | ||
| {'x': 'Aug', 'y': 210}, | ||
| {'x': 'Sep', 'y': 150}, | ||
| {'x': 'Oct', 'y': 170}, | ||
| {'x': 'Nov', 'y': 150}, | ||
| {'x': 'Dec', 'y': 260}]; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
src/app/components/components/data-table/data-table.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| # td-charts | ||
|
|
||
| `<td-charts>` is a directive for Ng2 + D3 V4 Chart. This is a parent element and all the charts would be rendered inside this. | ||
|
|
||
| ## API Summary | ||
|
|
||
| Properties: | ||
|
|
||
| | Name | Type | Description | | ||
| | --- | --- | --- | | ||
| | `title?` | `string` | Sets the Chart Title | ||
| | `chartHeight?` | `string` | Sets the height of the chart | ||
| | `shadowDepth?` | `array[]` | Set the parameters for shadowDepth (size, y offset, x offset, blur) | ||
| | `shadowColor?` | `string` | Sets shadow color for the charts (rgba preferred) | ||
| | `fillOpacity?` | `number` | Sets opacity for the charts | ||
| | `margin?` | `IChartMargin` | Sets SVG margin (top, right, bottom, left) | ||
|
|
||
| ## Setup | ||
|
|
||
| Import the [CovalentChartsModule] using the forRoot() method in your NgModule: | ||
|
|
||
| ```typescript | ||
| import { CovalentChartsModule } from '@covalent/charts'; | ||
| @NgModule({ | ||
| imports: [ | ||
| CovalentChartsModule.forRoot(), | ||
| ... | ||
| ], | ||
| ... | ||
| }) | ||
| export class MyModule {} | ||
| ``` | ||
|
|
||
| ## Usage | ||
|
|
||
| Example for HTML usage: | ||
|
|
||
| ```html | ||
| <td-charts title="Sales Bar/Line Combo Chart" | ||
| [margin]="{top: 50, bottom: 50}" | ||
| chartHeight="450" | ||
| [shadowDepth]="['125%', 2, 0, 2]" | ||
| shadowColor="rgba(0, 0, 0, 0.54)" | ||
| fillOpacity="0.95"> | ||
| <td-axis-x [link]="chartLine1" [ticks]="true" [show]="true" [grid]="false" legend="Day Offset"></td-axis-x> | ||
| <td-axis-y-left [link]="chartLine1" [ticks]="true" [show]="true" [grid]="false" legend="Sales"></td-axis-y-left> | ||
| <td-axis-y-right [link]="chartBar1" [ticks]="true" [show]="true" [grid]="true" legend="Sales 2"></td-axis-y-right> | ||
| <td-chart-bar #chartBar1 [colors]="['amber', 'orange']" | ||
| dataSrc="platform/charts/chart-line/datatime.csv" | ||
| [padding]="0.1" | ||
| bottomAxis="date" | ||
| columns="close" | ||
| titles="close" | ||
| [transition]="true" | ||
| transitionDuration="2050" | ||
| transitionDelay="5000"> | ||
| </td-chart-bar> | ||
| <td-chart-line #chartLine1 dataSrc="platform/charts/chart-line/datatime.csv" | ||
| timeSeries="true" | ||
| bottomAxis="date" | ||
| [columns]="['close']" | ||
| [titles]="['close']" | ||
| [colors]="['#03a9f4']" | ||
| [transition]="true" | ||
| transitionDuration="2000" | ||
| transitionDelay="5000"> | ||
| </td-chart-line> | ||
| </td-charts> | ||
| ``` |
Oops, something went wrong.