Skip to content

Commit

Permalink
Merge branch 'master' of http://github.com/PredixDev/px-vis-timeseries
Browse files Browse the repository at this point in the history
  • Loading branch information
Benoit Chevalier committed Feb 18, 2017
2 parents 2b3b7ac + 90d73f8 commit 08ebdf9
Show file tree
Hide file tree
Showing 2 changed files with 103 additions and 1 deletion.
2 changes: 1 addition & 1 deletion dev.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ <h2>Example of a timeseries with many options and using old data format with the
"type": "fa",
"offset":[0,0],
"lineColor": "red",
"lineWeight": 5
"lineWeight": 0
},
"Fan start":{
"color": "green",
Expand Down
102 changes: 102 additions & 0 deletions px-vis-timeseries.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,108 @@
<px-vis-timeseries options='{ ... }'></px-vis-timeseries>
### Styling
The following custom properties are available for styling:
Custom property | Description | Default
----------------|-------------|----------
`--px-vis-axis-color` | The color for the axis lines, axis ticks, and axis tick labels | `$gray9`
`--px-vis-axis-title-color` | The color for the axis title | `$gray9`
`--px-vis-axis-inline-title-color` | The color for the axis title | `$gray9`
`--px-vis-axis-inline-type-color` | The color for the axis lines, axis ticks, and axis tick labels when using 'inline' labelPosition | `$white`
`--px-vis-axis-inline-box-color` | The color for the tick boxes when using 'inline' labelPosition | `$gray9`
| |
| |
| |
`--px-vis-nav-brush-outline-color` | The stroke (border) color for the brushed box | `$gray5`
`--px-vis-nav-brush-fill-color` | The fill (background) color for the brushed box | `$gray5`
`--px-vis-nav-brush-opacity` | The opacity of the brushed box | `0.3`
`--px-vis-nav-brush-gradient-fill-color` | The fill (background) color for the brushed box when gradientOverlay is 'true' | `$gray5`
`--px-vis-nav-brush-gradient-opacity-1` | The start opacity of the brushed box when gradientOverlay is 'true' | `0.2`
`--px-vis-nav-brush-gradient-opacity-2` | The end opacity of the brushed box when gradientOverlay is 'true' | `0.8`
`--px-vis-nav-brush-handle-fill-color` | The fill (background) color for the handles on the brushed box | `$white`
`--px-vis-nav-brush-handle-lines-color` | The stroke (border) color for the handles on the brushed box | `$gray5`
`--px-vis-nav-brush-handle-fill-color-hover` | The hover state fill (background) color for the handles on the brushed box | `$gray5`
`--px-vis-nav-brush-handle-lines-color-hover` | The hover state stroke (border) color for the handles on the brushed box | `$gray6`
`--px-vis-nav-brush-handle-fill-color-press` | The pressed/mousedown state fill (background) color for the handles on the brushed box | `$gray6`
`--px-vis-nav-brush-handle-lines-color-press` | The pressed/mousedown state stroke (border) color for the handles on the brushed box | `$gray7`
| |
| |
| |
`--px-vis-cursor-line-color` | The color for the lines which track the cursor/data | `$gray5`
| |
| |
| |
`--px-vis-event-line-color` | The default color for the vertical lines below the icon | `$grey9`
`--px-vis-event-icon-color` | The default color for the event icon markers | `$gray7`
| |
| |
| |
`--px-vis-gridlines-color` | The color for the gridlines | `$gray3`
| |
| |
| |
`--px-vis-threshold-color` | The default color for a threshold | `$gray8`
| |
| |
| |
`--px-vis-zoom-brush-outline-color` | The stroke (border) color for the on-chart zoom/selection brush | `$grey6`
`--px-vis-zoom-brush-fill-color` | The fill (background) color for the on-chart zoom/selection brush | `$gray2`
`--px-vis-zoom-brush-fill-opacity` | The opacity for the on-chart zoom/selection brush | `0.5`
| |
| |
| |
`--px-vis-register-series-name` | The color of the data series name | `$gray5`
`--px-vis-register-data-value` | The color of the data series value | `$black`
`--px-vis-register-box` | The color of the box around the register when a scrollbar is present | `$gray3`
| |
| |
| |
`--px-vis-series-color-0` | These are the colors used to represent the data series on the charts. Used in numerical order by default. Colors MUST start at 0 and cannot contain gaps between numbers. | `$d-dv-basic-1`
`--px-vis-series-color-1` | | `$d-dv-basic-2`
`--px-vis-series-color-2` | | `$d-dv-basic-3`
`--px-vis-series-color-3` | | `$d-dv-basic-4`
`--px-vis-series-color-4` | | `$d-dv-basic-5`
`--px-vis-series-color-5` | | `$d-dv-basic-6`
`--px-vis-series-color-6` | | `$d-dv-basic-7`
`--px-vis-series-color-7` | | `$d-dv-basic-8`
`--px-vis-series-color-8` | | `$d-dv-basic-9`
`--px-vis-series-color-9` | | `$d-dv-basic-10`
`--px-vis-series-color-10` | | `$d-dv-bright-1`
`--px-vis-series-color-11` | | `$d-dv-bright-2`
`--px-vis-series-color-12` | | `$d-dv-bright-3`
`--px-vis-series-color-13` | | `$d-dv-bright-4`
`--px-vis-series-color-14` | | `$d-dv-bright-5`
`--px-vis-series-color-15` | | `$d-dv-bright-6`
`--px-vis-series-color-16` | | `$d-dv-bright-7`
`--px-vis-series-color-17` | | `$d-dv-bright-8`
`--px-vis-series-color-18` | | `$d-dv-bright-9`
`--px-vis-series-color-19` | | `$d-dv-bright-10`
`--px-vis-series-color-20` | | `$d-dv-muted-1`
`--px-vis-series-color-21` | | `$d-dv-muted-2`
`--px-vis-series-color-22` | | `$d-dv-muted-3`
`--px-vis-series-color-23` | | `$d-dv-muted-4`
`--px-vis-series-color-24` | | `$d-dv-muted-5`
`--px-vis-series-color-25` | | `$d-dv-muted-6`
`--px-vis-series-color-26` | | `$d-dv-muted-7`
`--px-vis-series-color-27` | | `$d-dv-muted-8`
`--px-vis-series-color-28` | | `$d-dv-muted-9`
`--px-vis-series-color-29` | | `$d-dv-muted-10`
| |
| |
| |
`--px-tooltip-background-color` | The color of the tooltip | `$black`;
`--px-tooltip-text-color` | The color of the tooltip text | `$white`;
`--px-tooltip-light-background-color` | The color of the light version tooltip | `$white`;
`--px-tooltip-light-text-color` | The color of the light version tooltip text | `$black`;
`--px-tooltip-light-border-color`| The color of the light version tooltip border | `$black`;
| |
| |
| |
`--px-font-family` | The font family for all labels and text | `GE Inspira Sans`
@element px-vis-timeseries
@blurb Creates an interactive timeseries chart
@homepage index.html
Expand Down

0 comments on commit 08ebdf9

Please sign in to comment.