From 90d73f8ae009ce6ffe0fd29167b6c0004619a5f2 Mon Sep 17 00:00:00 2001 From: Elliot Nahman Date: Thu, 16 Feb 2017 18:00:29 -0800 Subject: [PATCH] css var docs --- dev.html | 2 +- px-vis-timeseries.html | 102 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 103 insertions(+), 1 deletion(-) diff --git a/dev.html b/dev.html index b5ae7ff0..9c1ba389 100644 --- a/dev.html +++ b/dev.html @@ -56,7 +56,7 @@

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", diff --git a/px-vis-timeseries.html b/px-vis-timeseries.html index a1142e2d..c688bcab 100644 --- a/px-vis-timeseries.html +++ b/px-vis-timeseries.html @@ -30,6 +30,108 @@ +### 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