[Charts] Ability to change marker color

frontend/src/Editor/Components/Chart.jsx

@@ -32,11 +32,30 @@ export const Chart = function Chart({
   const typeProperty = component.definition.properties.type;
   const chartType = typeProperty.value;
 
+  const markerColorProperty = component.definition.properties.markerColor;
+  const markerColor = markerColorProperty ? markerColorProperty.value : 'red';
+
   const chartData = [{
     type: chartType || 'line',
     x: data.map((item) => item["x"]),
-    y: data.map((item) => item["y"])
-  }]
+    y: data.map((item) => item["y"]),
+    marker: { color: markerColor },
+    xaxis: { showgrid: false }
+  }];
+
+  const layout = {
+    width, 
+    height, 
+    title,
+    xaxis: {
+      showgrid: true,
+      showline: true
+    },
+    yaxis: {
+        showgrid: true,
+        showline: true
+    }
+  }
 
   return (
     <div
@@ -45,7 +64,7 @@ export const Chart = function Chart({
     >
       <Plot
         data={chartData}
-        layout={ {width: width, height: height, title } }
+        layout={layout}
       />
     </div>
   );

frontend/src/Editor/Components/components.js

@@ -126,6 +126,7 @@ export const componentTypes = [
       title: { type: 'string', displayName: 'Title' },
       data: { type: 'json', displayName: 'Data' },
       loadingState: { type: 'code', displayName: 'Loading State'},
+      markerColor: { type: 'color', displayName: 'Marker color'},
       type: { type: 'select', displayName: 'Chart type', options: [
         { name: 'Line', value: 'line' },
         { name: 'Bar', value: 'bar' }
@@ -141,6 +142,7 @@ export const componentTypes = [
     definition: {
       properties: {
         title: { value: 'This title can be changed' },
+        markerColor: { value: 'red' },
         loadingState: { value: `{{false}}` },
         type: { value: `line` },
         data: { value: `[

frontend/src/Editor/Inspector/Components/Chart.jsx

@@ -81,6 +81,8 @@ class Chart extends React.Component {
         </div>
 
         {renderElement(component, componentMeta, paramUpdated, dataQueries, 'loadingState', 'properties', currentState)}
+
+        {renderElement(component, componentMeta, paramUpdated, dataQueries, 'markerColor', 'properties', currentState)}
       </div>
     );
   }