Mirrors/VILLASweb
1
0
Fork 0
mirror of https://git.rwth-aachen.de/acs/public/villas/web/ synced 2025-03-09 00:00:01 +01:00
Code Issues Releases Wiki Activity

Major reworking of color picker and edit widget components that use it #312

Browse source
This commit is contained in:
Sonja Happ 2021-05-03 16:53:13 +02:00
parent ac5b40f768
commit 5f2699b938
9 changed files with 225 additions and 234 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/signal/edit-signal-mapping.js
View file

@ -95,7 +95,6 @@ class EditSignalMappingDialog extends React.Component {
let signals = this.state.signals;
let modifiedSignals = this.state.modifiedSignalIDs;
console.log("HandleMappingChange", row, column)
if (column === 2) { // Name change
signals[row].name = event.target.value;
if (modifiedSignals.find(id => id === signals[row].id) === undefined) {
@ -112,7 +111,6 @@ class EditSignalMappingDialog extends React.Component {
modifiedSignals.push(signals[row].id);
}
} else if (column === 1) { //index change
console.log("Index change")
signals[row].index =parseInt(event.target.value, 10);
if (modifiedSignals.find(id => id === signals[row].id) === undefined) {
modifiedSignals.push(signals[row].id);

3
src/signal/signals-data-manager.js
View file

@ -71,7 +71,7 @@ class SignalsDataManager extends RestDataManager{
let configured = false;
let error = false;
for(let nodeConfig of nodes){
console.log("parsing node config: ", nodeConfig)
//console.log("parsing node config: ", nodeConfig)
if(!nodeConfig.hasOwnProperty("name")){
console.warn("Could not parse the following node config because it lacks a name parameter:", nodeConfig);
} else if(nodeConfig.name === socketname){
@ -128,7 +128,6 @@ class SignalsDataManager extends RestDataManager{
for (let outSig of nodeConfig.out.signals) {
if (outSig.enabled) {
console.log("adding output signal:", outSig);
let newSignal = {
configID: configID,
direction: 'out',

110
src/widget/edit-widget/color-picker.js
View file

@ -19,27 +19,29 @@ import React from 'react';
import { Form } from 'react-bootstrap';
import { SketchPicker } from 'react-color';
import Dialog from '../../common/dialogs/dialog';
import {schemeCategory10} from "d3-scale-chromatic";
class ColorPicker extends React.Component {
valid = true;
constructor(props) {
super(props);
this.state = {
widget: {}
rgbColor: {},
};
}
static getDerivedStateFromProps(props, state) {
return {
widget: props.widget
};
componentDidUpdate(prevProps: Readonly<P>, prevState: Readonly<S>, snapshot: SS) {
if(this.props.show !== prevProps.show){
// update color if show status of color picker has changed
this.setState({rgbColor: ColorPicker.hexToRgb(this.props.hexcolor,this.props.opacity)})
}
}
hexToRgb = (hex,opacity) => {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
static hexToRgb(hex,opacity) {
let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
@ -49,27 +51,7 @@ class ColorPicker extends React.Component {
}
handleChangeComplete = (color) => {
let temp = this.state.widget;
if (this.props.controlId === 'strokeStyle'){
temp.customProperties.zones[this.props.zoneIndex]['strokeStyle'] = color.hex;
}
else if (this.props.controlId === 'lineColor'){
temp.customProperties.lineColors[this.props.lineIndex] = color.hex;
}
else {
let parts = this.props.controlId.split('.');
let isCustomProperty = true;
if (parts.length === 1){
isCustomProperty = false;
}
isCustomProperty ? temp[parts[0]][parts[1]] = color.hex : temp[this.props.controlId] = color.hex;
isCustomProperty ? temp[parts[0]][parts[1] + "_opacity"] = color.rgb.a : temp[this.props.controlId +"_opacity"] = color.rgb.a;
}
this.setState({ widget: temp });
this.setState({rgbColor: color.rgb})
};
onClose = canceled => {
@ -81,52 +63,40 @@ class ColorPicker extends React.Component {
return;
}
if (this.valid && this.props.onClose != null) {
this.props.onClose(this.state.widget);
if (this.props.onClose != null) {
const rgbToHex = (r, g, b) => '#' + [r, g, b].map(x => {
const hex = x.toString(16)
return hex.length === 1 ? '0' + hex : hex
}).join('')
let data = {
hexcolor: rgbToHex(this.state.rgbColor.r, this.state.rgbColor.g,this.state.rgbColor.b),
opacity: this.state.rgbColor.a,
}
this.props.onClose(data);
}
};
render() {
let hexColor;
let opacity = 1;
let parts = this.props.controlId.split('.');
let isCustomProperty = true;
if (parts.length === 1) {
isCustomProperty = false;
}
if (this.props.controlId === 'strokeStyle') {
if (typeof this.state.widget.customProperties.zones[this.props.zoneIndex] !== 'undefined') {
hexColor = this.state.widget.customProperties.zones[this.props.zoneIndex]['strokeStyle'];
}
}
else if (this.props.controlId === 'lineColor') {
if (typeof this.state.widget.customProperties.lineColors[this.props.lineIndex] !== 'undefined') {
hexColor = this.state.widget.customProperties.lineColors[this.props.lineIndex];
}
}
else{
hexColor = isCustomProperty ? this.state.widget[parts[0]][parts[1]]: this.state.widget[this.props.controlId];
opacity = isCustomProperty ? this.state.widget[parts[0]][parts[1] + "_opacity"]: this.state.widget[this.props.controlId + "_opacity"];
}
let rgbColor = this.hexToRgb(hexColor, opacity);
return <Dialog
show={this.props.show}
title='Color Picker'
buttonTitle='Save'
onClose={(c) => this.onClose(c)}
valid={true}
>
<Form>
<SketchPicker
color={rgbColor}
disableAlpha={this.props.disableOpacity}
onChangeComplete={ this.handleChangeComplete }
width={300}
/>
</Form>
</Dialog>;
return <Dialog
show={this.props.show}
title='Color Picker'
buttonTitle='Save'
onClose={(c) => this.onClose(c)}
valid={true}
>
<Form>
<SketchPicker
color={this.state.rgbColor}
disableAlpha={this.props.disableOpacity}
onChangeComplete={ this.handleChangeComplete }
width={300}
/>
</Form>
</Dialog>;
}
}

64
src/widget/edit-widget/edit-widget-color-control.js
View file

@ -28,55 +28,51 @@ class EditWidgetColorControl extends Component {
super(props);
this.state = {
widget: {},
color: null,
opacity: null,
showColorPicker: false,
originalColor: null
};
}
static getDerivedStateFromProps(props, state){
let parts = props.controlId.split('.');
let isCustomProperty = true;
if (parts.length === 1){
isCustomProperty = false;
}
let color = (isCustomProperty ? props.widget[parts[0]][parts[1]] : props.widget[props.controlId]);
let opacity = (isCustomProperty ? props.widget[parts[0]][parts[1] + "_opacity"] : props.widget[props.controlId + "_opacity"]);
return {
widget: props.widget
color: color,
opacity: opacity,
};
}
openColorPicker = () =>{
let parts = this.props.controlId.split('.');
let isCustomProperty = true;
if (parts.length === 1){
isCustomProperty = false;
}
let color = (isCustomProperty ? this.props.widget[parts[0]][parts[1]] : this.props.widget[this.props.controlId]);
this.setState({showColorPicker: true, originalColor: color});
this.setState({showColorPicker: true, originalColor: this.state.color});
}
closeEditModal = (data) => {
closeColorPickerEditModal = (data) => {
this.setState({showColorPicker: false})
if(typeof data === 'undefined'){
let parts = this.props.controlId.split('.');
let isCustomProperty = true;
if (parts.length === 1) {
isCustomProperty = false;
}
let temp = this.state.widget;
isCustomProperty ? temp[parts[0]][parts[1]] = this.state.originalColor : temp[this.props.controlId] = this.state.originalColor;
this.setState({ widget: temp });
if(typeof data === 'undefined'){
this.setState({ color: this.state.originalColor });
} else {
// color picker with result data {hexcolor, opacity}
this.setState({color: data.hexcolor, opacity: data.opacity})
this.props.handleChange({target: { id: this.props.controlId, value: data.hexcolor} })
this.props.handleChange({target: { id: this.props.controlId + "_opacity", value: data.opacity} })
}
}
render() {
let parts = this.props.controlId.split('.');
let isCustomProperty = true;
if (parts.length === 1){
isCustomProperty = false;
}
let color = (isCustomProperty ? this.props.widget[parts[0]][parts[1]] : this.props.widget[this.props.controlId]);
let opacity = (isCustomProperty ? this.props.widget[parts[0]][parts[1] + "_opacity"] : this.props.widget[this.props.controlId + "_opacity"]);
let style = {
backgroundColor: color,
opacity: opacity,
backgroundColor: this.state.color,
opacity: this.state.opacity,
width: '80px',
height: '40px',
}
@ -85,8 +81,6 @@ class EditWidgetColorControl extends Component {
if(this.props.disableOpacity){
tooltipText = "Change border color";
}
return ( <Form.Row>
<Form.Group as={Col}>
<Form.Label>{this.props.label}</Form.Label>
@ -100,7 +94,13 @@ class EditWidgetColorControl extends Component {
</Button>
</OverlayTrigger>
</div>
<ColorPicker show={this.state.showColorPicker} onClose={(data) => this.closeEditModal(data)} widget={this.state.widget} controlId={this.props.controlId} disableOpacity={this.props.disableOpacity}/>
<ColorPicker
show={this.state.showColorPicker}
onClose={(data) => this.closeColorPickerEditModal(data)}
hexcolor={this.state.color}
opacity={this.state.opacity}
disableOpacity={this.props.disableOpacity}
/>
</Form.Group>
</Form.Row>
);

154
src/widget/edit-widget/edit-widget-color-zones-control.js
View file

@ -18,7 +18,6 @@
import React from 'react';
import { Form, Table, Button, Tooltip, OverlayTrigger } from 'react-bootstrap';
import ColorPicker from './color-picker'
import Icon from '../../common/icon';
import { Collapse } from 'react-collapse';
@ -27,12 +26,7 @@ class EditWidgetColorZonesControl extends React.Component {
super(props);
this.state = {
widget: {
customProperties:{
zones: []
}
},
selectedZone: null,
colorZones: [],
selectedIndex: null,
showColorPicker: false,
originalColor: null,
@ -43,89 +37,88 @@ class EditWidgetColorZonesControl extends React.Component {
static getDerivedStateFromProps(props, state){
return {
widget: props.widget
colorZones: props.widget.customProperties.zones
};
}
addZone = () => {
// add row
const widget = this.state.widget;
widget.customProperties.zones.push({ strokeStyle: '#d3cbcb', min: 0, max: 100 });
const zones = JSON.parse(JSON.stringify(this.state.colorZones));
zones.push({ strokeStyle: '#d3cbcb', min: 0, max: 100 });
if(widget.customProperties.zones.length > 0){
let length = widget.customProperties.zones.length
if(zones.length > 0){
let length = zones.length
for(let i= 0 ; i < length; i++){
widget.customProperties.zones[i].min = i* 100/length;
widget.customProperties.zones[i].max = (i+1)* 100/length;
}
for(let i= 0 ; i < length; i++){
zones[i].min = i* 100/length;
zones[i].max = (i+1)* 100/length;
}
}
this.setState({ widget, selectedZone: null, selectedIndex: null });
this.sendEvent(widget);
this.setState({ colorZones: zones, selectedIndex: null });
this.props.handleChange({target: { id: this.props.controlId, value: zones}})
}
removeZones = () => {
let temp = this.state.widget;
temp.customProperties.zones.splice(this.state.selectedIndex, 1);
if(temp.customProperties.zones.length > 0){
let length = temp.customProperties.zones.length
let zones = JSON.parse(JSON.stringify(this.state.colorZones));
zones.splice(this.state.selectedIndex, 1);
if(zones.length > 0){
let length = zones.length
for(let i= 0 ; i < length; i++){
temp.customProperties.zones[i].min = i* 100/length;
temp.customProperties.zones[i].max = (i+1)* 100/length;
zones[i].min = i* 100/length;
zones[i].max = (i+1)* 100/length;
}
}
this.setState({widget: temp,selectedZone: null, selectedIndex: null});
}
this.setState({colorZones: zones, selectedIndex: null});
this.props.handleChange({target: { id: this.props.controlId, value: zones}})
}
changeCell = (event, row, column) => {
// change row
const widget = this.state.widget;
const zones = JSON.parse(JSON.stringify(this.state.colorZones))
if (column === 1) {
widget.customProperties.zones[row].strokeStyle = event.target.value;
zones[row].strokeStyle = event.target.value;
} else if (column === 2) {
widget.customProperties.zones[row].min = event.target.value;
zones[row].min = event.target.value;
} else if (column === 3) {
widget.customProperties.zones[row].max = event.target.value;
zones[row].max = event.target.value;
}
this.setState({ widget });
this.sendEvent(widget);
this.setState({ colorZones: zones });
this.props.handleChange({target: { id: this.props.controlId, value: zones}})
}
editColorZone = (index) => {
if(this.state.selectedIndex !== index){
this.setState({selectedZone: this.state.widget.customProperties.zones[index], selectedIndex: index , minValue: this.state.widget.customProperties.zones[index].min, maxValue: this.state.widget.customProperties.zones[index].max});
this.setState({
selectedIndex: index ,
minValue: this.state.colorZones[index].min,
maxValue: this.state.colorZones[index].max}
);
}
else{
this.setState({selectedZone: null, selectedIndex: null});
this.setState({selectedIndex: null});
}
}
openColorPicker = () => {
let color = this.state.selectedZone.strokeStyle;
let color = this.state.colorZones[this.state.selectedIndex].strokeStyle;
this.setState({showColorPicker: true, originalColor: color});
}
closeEditModal = (data) => {
closeColorPickerEditModal = (data) => {
this.setState({showColorPicker: false})
let zones = JSON.parse(JSON.stringify(this.state.colorZones))
if(typeof data === 'undefined'){
let temp = this.state.selectedZone;
temp.strokeStyle = this.state.originalColor;
this.setState({ selectedZone : temp });
zones[this.state.selectedIndex].strokeStyle = this.state.originalColor
this.setState({ colorZones : zones });
} else {
// color picker with result data {hexcolor, opacity}
zones[this.state.selectedIndex].strokeStyle = data.hexcolor
this.setState({ colorZones : zones });
this.props.handleChange({target: { id: this.props.controlId, value: zones}})
}
}
@ -134,14 +127,15 @@ class EditWidgetColorZonesControl extends React.Component {
if(e.target.value < 0) return;
this.setState({minValue: e.target.value});
let temp = this.state.widget;
temp.customProperties.zones[this.state.selectedIndex]['min'] = e.target.value;
let zones = JSON.parse(JSON.stringify(this.state.colorZones));
zones[this.state.selectedIndex]['min'] = e.target.value;
if(this.state.selectedIndex !== 0){
temp.customProperties.zones[this.state.selectedIndex - 1]['max'] = e.target.value
zones[this.state.selectedIndex - 1]['max'] = e.target.value
}
this.setState({ widget: temp });
this.setState({ colorZones: zones });
this.props.handleChange({target: { id: this.props.controlId, value: zones}})
}
handleMaxChange = (e) => {
@ -149,32 +143,19 @@ class EditWidgetColorZonesControl extends React.Component {
if(e.target.value > 100) return;
this.setState({maxValue: e.target.value});
let temp = this.state.widget;
temp.customProperties.zones[this.state.selectedIndex]['max'] = e.target.value;
let zones = JSON.parse(JSON.stringify(this.state.colorZones));
zones[this.state.selectedIndex]['max'] = e.target.value;
if(this.state.selectedIndex !== this.state.widget.customProperties.zones.length -1){
temp.customProperties.zones[this.state.selectedIndex + 1]['min'] = e.target.value
if(this.state.selectedIndex !== zones.length -1){
zones[this.state.selectedIndex + 1]['min'] = e.target.value
}
this.setState({ widget: temp });
}
sendEvent(widget) {
// create event
const event = {
target: {
id: 'zones',
value: widget.customProperties.zones
}
};
this.props.handleChange(event);
this.setState({ colorZones: zones });
this.props.handleChange({target: { id: this.props.controlId, value: zones}})
}
render() {
const buttonStyle = {
marginBottom: '10px',
marginLeft: '120px',
@ -187,9 +168,9 @@ class EditWidgetColorZonesControl extends React.Component {
let tempColor = 'FFFFFF';
let collapse = false;
if(this.state.selectedZone !== null){
if(this.state.selectedIndex !== null){
collapse = true;
tempColor = this.state.selectedZone.strokeStyle;
tempColor = this.state.colorZones[this.state.selectedIndex].strokeStyle;
}
let pickerStyle = {
@ -213,7 +194,7 @@ class EditWidgetColorZonesControl extends React.Component {
</span>
<div>
{
this.state.widget.customProperties.zones.map((zone, idx) => {
this.state.colorZones.map((zone, idx) => {
let color = zone.strokeStyle;
let width = (zone.max - zone.min)*(260/100);
let style = {
@ -222,7 +203,12 @@ class EditWidgetColorZonesControl extends React.Component {
height: '40px'
}
return (<Button
style={style} key={idx} onClick={i => this.editColorZone(idx)} disabled={!this.props.widget.customProperties.colorZones}><Icon icon="pen" /></Button>
style={style}
key={idx}
onClick={i => this.editColorZone(idx)}
disabled={!this.props.widget.customProperties.colorZones}>
<Icon icon="pen" />
</Button>
)
})
}
@ -258,10 +244,20 @@ class EditWidgetColorZonesControl extends React.Component {
</tbody>
</Table>
<span className='icon-button'>
<Button variant='light' onClick={this.removeZones} ><Icon style={iconStyle} classname='icon-color' icon="trash-alt" /></Button>
<Button
variant='light'
onClick={this.removeZones} >
<Icon style={iconStyle} classname='icon-color' icon="trash-alt" />
</Button>
</span>
</Collapse>
<ColorPicker show={this.state.showColorPicker} onClose={(data) => this.closeEditModal(data)} widget={this.state.widget} zoneIndex={this.state.selectedIndex} controlId={'strokeStyle'} />
<ColorPicker
show={this.state.showColorPicker}
onClose={(data) => this.closeColorPickerEditModal(data)}
hexcolor={tempColor}
opacity={1}
disableOpacity={this.props.disableOpacity}
/>
</Form.Group>;
}
}

2
src/widget/edit-widget/edit-widget-control-creator.js
View file

@ -96,7 +96,7 @@ export default function CreateControls(widgetType = null, widget = null, session
<EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} handleChange={e => handleChange(e)} />,
<EditWidgetSignalControl key={1} widget={widget} controlId={'signalIDs'} signals={signals} handleChange={(e) => handleChange(e)} direction={'out'}/>,
<EditWidgetCheckboxControl key={2} widget={widget} controlId="customProperties.colorZones" input text="Show color zones" handleChange={e => handleChange(e)} />,
<EditWidgetColorZonesControl key={3} widget={widget} handleChange={e => handleChange(e)} />,
<EditWidgetColorZonesControl key={3} widget={widget} controlId="customProperties.zones" handleChange={e => handleChange(e)} disableOpacity={true}/>,
<EditWidgetMinMaxControl key={4} widget={widget} controlId="customProperties.value" handleChange={e => handleChange(e)} />
);
break;

107
src/widget/edit-widget/edit-widget-plot-colors-control.js
View file

@ -19,10 +19,7 @@ import React, { Component } from 'react';
import { OverlayTrigger, Tooltip , Button, Form } from 'react-bootstrap';
import ColorPicker from './color-picker'
import Icon from "../../common/icon";
import { scaleOrdinal } from "d3-scale";
import { schemeCategory10 } from "d3-scale-chromatic";
// schemeCategory20 no longer available in d3
import {schemeCategory10} from "d3-scale-chromatic";
class EditWidgetPlotColorsControl extends Component {
@ -30,51 +27,78 @@ class EditWidgetPlotColorsControl extends Component {
super(props);
this.state = {
widget: {},
showColorPicker: false,
originalColor: null,
selectedIndex: null
selectedIndex: null,
lineColors: [],
signalIDs: []
};
}
static getDerivedStateFromProps(props, state){
let widget = props.widget;
if(widget.customProperties.lineColors === undefined || widget.customProperties.lineColors === null){
// for backwards compatibility with old plots
widget.customProperties.lineColors = []
const newLineColor = scaleOrdinal(schemeCategory10);
for (let signalID of widget.signalIDs){
widget.customProperties.lineColors.push(newLineColor(signalID))
}
}
static getDerivedStateFromProps(props, state) {
return {
widget: widget
lineColors: props.widget.customProperties.lineColors,
signalIDs: props.widget.signalIDs,
};
}
//same here
componentDidUpdate(prevProps: Readonly<P>, prevState: Readonly<S>, snapshot: SS) {
closeEditModal = (data) => {
let lineColorsChanged = false;
if (JSON.stringify(this.state.signalIDs) !== JSON.stringify(prevState.signalIDs)){
// if there was a change to the signal IDs
let tempLineColors = JSON.parse(JSON.stringify(this.state.lineColors));
let oldNoSignals = tempLineColors.length
if (this.state.signalIDs.length > prevState.signalIDs.length){
// more signals than before
let diff = this.state.signalIDs.length - prevState.signalIDs.length
for (let i = 0; i<diff; i++){
tempLineColors.push(schemeCategory10[oldNoSignals+i % 10])
lineColorsChanged = true;
}
} else if (this.state.signalIDs.length < prevState.signalIDs.length){
// less signals than before
let diff = prevState.signalIDs.length - this.state.signalIDs.length
for (let i = 0; i<diff; i++){
tempLineColors.pop()
lineColorsChanged = true;
}
}
this.setState({lineColors: tempLineColors})
if (lineColorsChanged){
this.props.handleChange({target: { id: this.props.controlId, value: tempLineColors} })
}
}
}
closeColorPickerEditModal = (data) => {
this.setState({showColorPicker: false})
let tempLineColors = JSON.parse(JSON.stringify(this.state.lineColors));
if(typeof data === 'undefined'){
let temp = this.state.widget;
temp.customProperties.lineColors[this.state.selectedIndex] = this.state.originalColor;
this.setState({ widget: temp });
// Color picker canceled
tempLineColors[this.state.selectedIndex] = this.state.originalColor;
this.setState({lineColors: tempLineColors})
} else {
// color picker with result data {hexcolor, opacity}
tempLineColors[this.state.selectedIndex] = data.hexcolor
this.setState({lineColors: tempLineColors})
this.props.handleChange({target: { id: this.props.controlId, value: tempLineColors} })
}
}
editLineColor = (index) => {
if(this.state.selectedIndex !== index){
let color = this.state.widget.customProperties.lineColors[index];
this.setState({selectedIndex: index, showColorPicker: true, originalColor: color});
}
else{
this.setState({selectedIndex: null});
}
let color = typeof this.state.lineColors[index] === "undefined" ? schemeCategory10[index % 10] : this.state.lineColors[index];
this.setState({selectedIndex: index, showColorPicker: true, originalColor: color});
}
else{
this.setState({selectedIndex: null});
}
}
render() {
@ -84,15 +108,15 @@ class EditWidgetPlotColorsControl extends Component {
<Form.Label>Line Colors</Form.Label>
<div>
{
this.state.widget.signalIDs.map((signalID, idx) => {
let color = this.state.widget.customProperties.lineColors[signalID];
let width = 260 / this.state.widget.signalIDs.length;
this.props.widget.signalIDs.map((signalID, idx) => {
let color = typeof this.state.lineColors[idx] === "undefined" ? schemeCategory10[idx % 10] : this.state.lineColors[idx];
let width = 260 / this.props.widget.signalIDs.length;
let style = {
backgroundColor: color,
width: width,
height: '40px'
}
let signal = this.props.signals.find(signal => signal.id === signalID);
return <OverlayTrigger
@ -103,16 +127,23 @@ class EditWidgetPlotColorsControl extends Component {
<Button
style={style}
key={idx}
onClick={i => this.editLineColor(signalID)}
onClick={i => this.editLineColor(idx)}
>
<Icon icon="pen" />
</Button>
</OverlayTrigger>;
})
}
</div>
<ColorPicker show={this.state.showColorPicker} onClose={(data) => this.closeEditModal(data)} widget={this.state.widget} lineIndex={this.state.selectedIndex} controlId={'lineColor'} disableOpacity={true}/>
<ColorPicker
show={this.state.showColorPicker}
onClose={(data) => this.closeColorPickerEditModal(data)}
hexcolor={this.state.lineColors[this.state.selectedIndex]}
opacity={1}
disableOpacity={true}
/>
</Form.Group>
)

10
src/widget/widget-plot/plot-legend.js
View file

@ -24,9 +24,7 @@ function Legend(props){
const signal = props.sig;
const hasScalingFactor = (signal.scalingFactor !== 1);
const newLineColor = scaleOrdinal(schemeCategory10);
let color = typeof props.lineColor === "undefined" ? newLineColor(signal.id) : props.lineColor;
let color = typeof props.lineColor === "undefined" ? schemeCategory10[props.index % 10] : props.lineColor;
if(hasScalingFactor){
return (
@ -52,11 +50,11 @@ class PlotLegend extends React.Component {
return <div className="plot-legend">
<ul>
{ this.props.lineColors !== undefined && this.props.lineColors != null ? (
this.props.signals.map( signal =>
<Legend key={signal.id} sig={signal} lineColor={this.props.lineColors[signal.id]}/>
this.props.signals.map( (signal, idx) =>
<Legend key={signal.id} sig={signal} index={idx} lineColor={this.props.lineColors[idx]}/>
)) : (
this.props.signals.map( signal =>
<Legend key={signal.id} sig={signal} lineColor={"undefined"}/>
<Legend key={signal.id} sig={signal} index={idx} lineColor={"undefined"}/>
))
}
</ul>

7
src/widget/widget-plot/plot.js
View file

@ -199,7 +199,6 @@ class Plot extends React.Component {
// generate paths from data
const sparkLine = line().x(p => xScale(p.x)).y(p => yScale(p.y));
const newLineColor = scaleOrdinal(schemeCategory10);
const lines = this.state.data.map((values, index) => {
let signalID = this.props.signalIDs[index];
@ -208,10 +207,10 @@ class Plot extends React.Component {
this.props.lineColors = [] // for backwards compatibility
}
if (typeof this.props.lineColors[signalID] === "undefined") {
this.props.lineColors[signalID] = newLineColor(signalID);
if (typeof this.props.lineColors[index] === "undefined") {
this.props.lineColors[index] = schemeCategory10[index % 10];
}
return <path d={sparkLine(values)} key={index} style={{ fill: 'none', stroke: this.props.lineColors[signalID] }} />
return <path d={sparkLine(values)} key={index} style={{ fill: 'none', stroke: this.props.lineColors[index] }} />
});
this.setState({ lines, xAxis, yAxis });