From 0449c33dd6237ecd50f64bdd38d15c106b4a6784 Mon Sep 17 00:00:00 2001 From: Ricardo Hernandez-Montoya Date: Fri, 7 Apr 2017 16:02:31 +0200 Subject: [PATCH] show signals legend in plot table widget --- src/components/widget-plot-table.js | 16 ++++++++++------ src/styles/widgets.css | 24 ++++++++++++++++++++++++ 2 files changed, 34 insertions(+), 6 deletions(-) diff --git a/src/components/widget-plot-table.js b/src/components/widget-plot-table.js index 734b051..0905ba9 100644 --- a/src/components/widget-plot-table.js +++ b/src/components/widget-plot-table.js @@ -160,7 +160,8 @@ class WidgetPlotTable extends Component { // Make tick count proportional to the plot width using a rough scale ratio var tickCount = Math.round(this.state.size.w / 80); - + var colorScale = scaleOrdinal(schemeCategory10); + return (

{this.props.widget.name}

@@ -190,11 +191,14 @@ class WidgetPlotTable extends Component { domain={{ x: [this.state.firstTimestamp, this.state.latestTimestamp] }} /> } -
- { - this.state.signals.map((signal) => - ({signal} + ',') - ) +
+ { + this.state.preselectedSignals.reduce( (accum, signal, i) => { + if (this.state.signals.includes(signal.index)) { + accum.push(
   {signal.name}
) + } + return accum; + }, []) }
diff --git a/src/styles/widgets.css b/src/styles/widgets.css index e43c7ef..90bee10 100644 --- a/src/styles/widgets.css +++ b/src/styles/widgets.css @@ -119,12 +119,36 @@ } .plot-table-widget .checkbox label { + height: 100%; + width: 100%; + padding: 6px 12px; +} + +.plot-table-widget .btn { padding: 0px; } .plot-table-widget input[type="checkbox"] { display: none; } + +.plot-table-widget .plot-legend { + display: -webkit-flex; + display: flex; + flex-wrap: wrap; + justify-content: space-around; +} + +.plot-table-widget .signal-legend { + font-size: 0.8em; + font-weight: 700; +} + +.plot-table-widget .legend-color { + height: 50%; + display: inline-block; + vertical-align: middle; +} /* End PlotTable Widget */ /* Reset Bootstrap styles to "disable" while editing */